<template>
    <div class="c-share" v-if="show" @click="close">
        <div class="c-share__content" @click.stop>
  
            <div class="c-share__division">地址选择</div>
            <ul class="c-list">
                <li class="c-list__item" @click="tabClick('import')">
                    <div class="c-list__content">
                        <img
                            class="c-list__icon"
                            src="/static/share/icon_2.jpg"
                            alt
                        />
                        <div class="c-list__text">从微信导入</div>
                    </div>
                </li>
                <li class="c-list__item" @click="tabClick('add')">
                    <div class="c-list__content">
                        <img
                            class="c-list__icon"
                            src="/static/share/add.png"
                            alt
                        />
                        <div class="c-list__text">添加地址</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: "AddressSelect",
    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.callback = callback;
        },

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

            self.show = false;

        },


        // 点击
        tabClick(type){
            this.$emit("share", type);
            if(this.callback){
                this.callback(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>