<template>
    <div class="g-spec-modal" v-if="show" :class="{ page_red: theme === 1 }">
        <div class="bg" @click="close"></div>
        <div class="main">
            <div class="head">
                <span class="tit">跨店复制商品</span>
                <span class="close" @click="close">×</span>
            </div>
            <div class="box">
                <div class="title">商品：{{ goods.name }}</div>
                <div class="select">
                    <picker
                        :range="pricerData"
                        @change="chenge"
                        :mode="'selector'"
                    >
                        <input
                            type="text"
                            :disabled="true"
                            :value="curShop.name"
                            placeholder="请选择目标店铺"
                        />
                    </picker>
                </div>
            </div>

            <div class="modal-bottom">
                <div class="btn" @click="submit">确定</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "ShopSelect",
    components: {},
    props: {},

    // 数据
    data() {
        return {
            show: false,
            goods: {},
            shopList: [],
            pricerData: [],
            curShop: {},
            submitLoading:false,
        };
    },

    // 函数
    methods: {
        // 打开
        open(good, shopList) {
            const self = this;
            console.log("open");
            self.show = true;
            this.goods = good;
            this.shopList = shopList;
            let strArr = [];
            for (let item of this.shopList) {
                strArr.push(item.name);
            }
            this.pricerData = strArr;
        },

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

            self.show = false;
        },

        chenge(e) {
            this.curShop = this.shopList[e.detail.value];
            // console.log(e);
        },

        submit() {
            if (!this.curShop.id) {
                return this.fn.fn.showToast("请先选择店铺");
            }
            if (this.submitLoading) {
                return;
            }
            this.submitLoading = true;
            uni.showLoading({
                title: "提交中...",
            });
            this.api
                .post("/Product/CopyProducts", {
                    storeId: this.curShop.id,
                    productIds: [this.goods.id],
                })
                .then((res) => {
                    uni.hideLoading();
                    this.submitLoading = false;
                    if (res.success) {
                        this.fn.showToast("操作成功");
                        this.close();
                    } else {
                        this.fn.showToast("操作失败 " + res.message);
                    }
                });
        },
    },

    // 数据计算
    computed: {},

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

<style lang="scss" scoped>
.g-spec-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3000;
    .bg {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
    }
    .main {
        background-color: #fff;
        border-radius: px(30);
        position: absolute;
        top: 50%;
        left: px(100);
        right: px(100);
        transform: translate(0, -50%);
        max-height: 90vh;
        overflow: auto;
        z-index: 100;
        padding: px(40) 0;
    }
    .head {
        font-size: px(44);
        position: relative;
        padding-bottom: px(30);
        border-bottom: 1px solid #f1f1f1;
        line-height: px(88);
        padding: 0 px(40);
        .close {
            font-size: px(80);
            color: #666;
            position: absolute;
            right: px(40);
            top: 0%;
            z-index: 10;
        }
        .tit {
            margin-right: px(80);
            display: block;
            @include omit(100%);
            width: auto;
        }
    }
}

.box {
    font-size: px(40);
    padding: px(40);
    .title {
        padding-bottom: px(20);
    }
    .select {
        border: 1px solid #f1f1f1;
        height: px(100);
        line-height: px(100);
        padding: 0 px(20);
        margin-top: px(20);
    }
}

.modal-bottom {
    display: flex;
    margin-top: px(50);
    justify-content: flex-end;
    align-items: center;
    padding: 0 px(40);
    .price {
        color: #fe6661;
        font-size: px(40);
        .num {
            font-size: px(50);
        }
    }
    .btn {
        display: block;
        background-color: #27a34f;
        color: #fff;
        width: px(280);
        height: px(80);
        font-size: px(34);
        text-align: center;
        line-height: px(80);
        border-radius: px(40);
    }
}

.page_red {
    .modal-bottom .btn {
        background-color: #fe6661;
    }
    .btns__add {
        background-color: #fe6661;
    }
}
</style>