<template>
    <div class="c-share" v-if="show" @click="close">
        <div class="c-share__content" @click.stop>
            <div class="c-share__box">
                <div class="c-share__top" v-if="distribution && vip">
                    <img
                        class="c-share__icon"
                        src="/static/share/icon_1.jpg"
                        alt
                    />
                </div>
                <div
                    class="c-share__vip"
                    v-if="!vip && distribution"
                    @click="goVip"
                >
                    成为vip
                </div>
                <div class="c-share__title" v-if="distribution">
                    推广给好友购买最多可赚
                </div>
                <div class="c-share__price c-price" v-if="distribution">
                    <span class="c-price__sign">¥</span>
                    <span class="c-price__text">{{ price || "0.00" }}</span>
                </div>
            </div>
            <div class="c-share__division">分享</div>
            <ul class="c-list">
                <li class="c-list__item">
                    <button class="button" open-type="share">
                        <div class="c-list__content">
                            <img
                                class="c-list__icon"
                                src="/static/share/icon_2.jpg"
                                alt
                            />
                            <div class="c-list__text">发送给微信好友</div>
                        </div>
                    </button>
                </li>
                <li class="c-list__item" @click="share('single')">
                    <div class="c-list__content">
                        <img
                            class="c-list__icon"
                            src="/static/share/icon_3.jpg"
                            alt
                        />
                        <div class="c-list__text">保存图片到相册</div>
                    </div>
                </li>
                <li class="c-list__item" v-if="!hideMany">
                    <div class="c-list__content" @click="share('multi')">
                        <img
                            class="c-list__icon"
                            src="/static/share/icon_4.jpg"
                            alt
                        />
                        <div class="c-list__text">
                            <div>保存多张素材图</div>
                            <div>可用于分享朋友圈</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: "MyShare",
    props: {
        	hideMany: {
				type: Boolean,
				default: false
			},
    },
    // 数据
    data() {
        return {
            show: false,
            price: "",
            callback: "",

            distribution: false,
            vip: false,
        };
    },

    // 函数
    methods: {
        // 打开
        open(callback) {
            const self = this;

            self.show = true;
            // self.price = price
            // self.distribution = distribution
            // self.vip = vip
            self.callback = callback;
        },

        // 关闭
        close() {
            const self = this;

            self.show = false;

            if (self.fn.getType(self.callback) === "function") {
                self.callback();
            }
        },

        goVip() {
            this.router.push({
                path: "/pages/generalize/open",
            });
        },

        // 分享处理
        share(type) {
            const self = this;

            self.$emit("share", type);
        },
    },

    // 数据计算
    computed: {},

    // 数据监听
    watch: {},
};
</script>

<style lang="scss" scoped>
.c-share {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 995;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);

    &__content {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 100;
        width: 100%;
        background-color: #fff;
        border-radius: px(16) px(16) 0 0;
    }

    &__box {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    &__top {
        display: flex;
        justify-content: center;
        align-items: center;
        width: px(230);
        height: px(230);
        margin-top: px(-115);
        border-radius: 50%;
        background-color: #ef4a37;
    }

    &__icon {
        width: px(137);
        height: px(134);
    }
    &__vip {
        margin-top: px(80);
        color: #f8662a;
    }
    &__title {
        font-size: px(42);
        margin-top: px(30);
        color: #333;
        &.mt {
            margin-top: px(80);
        }
    }

    &__price {
        margin-top: px(70);
    }

    &__division {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: px(60);
        font-size: px(34);
        color: #999;

        &:before,
        &:after {
            content: "";
            display: block;
            width: px(460);
            height: px(3);
            background-color: #e7e7e7;
        }
    }
}

.c-price {
    display: flex;
    align-items: baseline;

    &__sign {
        font-size: px(26);
        color: #f8662a;
    }

    &__text {
        font-size: px(54);
        color: #f8662a;
    }
}

.c-list {
    display: flex;
    justify-content: space-around;
    height: px(345);
    padding-top: px(70);

    &__item {
        flex: 1;
    }

    &__content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    &__icon {
        width: px(100);
        height: px(100);
        margin-bottom: px(20);
    }

    &__text {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: px(32);
        color: #999;
    }
}
</style>