<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">{{ goods.itemInfo.title }}</span>
                <span class="close" @click="close">×</span>
            </div>
            <ul class="g-list">
                <li
                    class="g-list__item"
                    v-for="(item, index) in specList"
                    :key="index"
                >
                    <div class="g-list__title">{{ item.label + "：" }}</div>
                    <ul class="g-specification">
                        <li
                            class="g-specification__item"
                            :class="{
                                'g-specification__item--active': value.active,
                            }"
                            v-for="(value, key) in item.list"
                            :key="key"
                            @click="selectSpec(value, index)"
                        >
                            {{ value.name }}
                        </li>
                    </ul>
                </li>
            </ul>

            <div class="selected">
                已选规格：
                <span>{{ acTiveSpec }}</span>
            </div>

            <div class="modal-bottom">
                <div class="price">
                    ￥
                    <span class="num">{{ spec.priceFmt || nowPriceFmt }}</span>
                </div>
                <div class="btn" @click="addCart" v-if="!cartSku">
                    加入购物车
                </div>
                <div class="btns" v-if="cartSku">
                    <button
                        class="button button2"
                        @click.stop="setCaetNum(cartSku)"
                    >
                        <div class="btns__remove"></div>
                    </button>
                    <span class="cart-num">{{ cartSku.count }}</span>
                    <button class="button" @click.stop="addSpec(cartSku)">
                        <div class="btns__add"></div>
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import FInputNumber from "../../components/form/inputNumber";

export default {
    name: "GSpecModal",
    components: { FInputNumber },
    props: {
        // 内容
        goods: {
            type: Object,
        },
        // 直播间id
        roomId: {
            type: String,
        },
        // 短视频id
        videoId: {
            type: String,
        },
    },

    // 数据
    data() {
        return {
            show: false,
            specList: [],
            num: 1,
            type: "",
            callBack: "",
            cartSku: null,
        };
    },

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

            self.show = true;
            self.type = type || "sepc";
            self.callBack = callBack;
        },

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

            self.show = false;
        },

        // 选择规格
        selectSpec(val, index) {
            const self = this;

            self.specList[index].list.forEach((item, key) => {
                if (item[item.type + "Id"] === val[val.type + "Id"]) {
                    item.active = !item.active;
                } else {
                    item.active = false;
                }

                self.specList[index].list.splice(key, item);
            });
        },

        // 加入购物车
        addCart() {
            const self = this;

            if (self.specList.length && !self.spec) {
                self.fn.showToast("请选择商品规格");
            } else {
                self.api
                    .post("/Order/AddCart", {
                        productId: self.goods.itemInfo.itemId,
                        count: self.num,
                        skuId: self.spec.skuId,
                        roomId: self.roomId || "",
                        videoId: Number(self.videoId) || 0,
                    })
                    .then((res) => {
                        // self.close();
                        this.$emit("change");
                        // if (self.fn.getType(self.callBack) === "function") {
                        //     self.callBack(res);
                        // }
                        if (this.goods.cart) {
                            this.goods.cart.push(res.data);
                        } else {
                            this.goods.cart = [res.data];
                        }
                    });
            }
        },

        // 添加购物车
        addSpec(cart) {
            const self = this;
            if (cart) {
                cart.count++;
                self.api
                    .post("/Order/UpdateItemCount", {
                        id: cart.id,
                        count: cart.count,
                    })
                    .then(() => {
                        this.$emit("change");
                    })
                    .catch((res) => {
                        cart.count--;
                    });
            } else {
                self.api
                    .post("/Order/AddCart", {
                        productId: id,
                        count: 1,
                    })
                    .then((res) => {
                        // self.fn.showToast("已成功加入购物车");
                        this.$emit("change");
                    })
                    .catch((res) => {});
            }
        },

        setCaetNum(cart) {
            cart.count--;
            let num = cart.count;
            const self = this;
            if (num > 0) {
                self.api
                    .post("/Order/UpdateItemCount", {
                        id: cart.id,
                        count: num,
                    })
                    .then(() => {
                        this.$emit("change");
                    })
                    .catch((res) => {
                        cart.count++;
                    });
            } else {
                let id = cart.id;
                this.cartSku = null;
                self.api
                    .delete("/Order/RemoveCart", {
                        ids: [id],
                    })
                    .then(() => {
                        this.$emit("change");
                    });
            }
        },

        // 立即购买
        buy() {
            const self = this;

            if (self.specList.length && !self.spec) {
                self.fn.showToast("请选择商品规格");
            } else {
                self.api
                    .post("/Order/BuyNow", {
                        productId: self.goods.itemInfo.itemId,
                        count: self.num,
                        price:
                            parseFloat(self.spec.priceFmt / 100 ) ||
                            parseFloat(self.goods.priceInfo.nowPrice / 100),
                        skuId: self.spec.skuId,
                        roomId: self.roomId || "",
                        videoId: Number(self.videoId) || 0,
                    })
                    .then((res) => {
                        self.close();
                        if (self.fn.getType(self.callBack) === "function") {
                            self.callBack(res);
                        }
                    });
            }
        },

        // 确认处理
        affirm() {
            const self = this;

            if (self.type === "cart") {
                self.addCart();
            } else if (self.type === "buy") {
                self.buy();
            }
        },
    },

    // 数据计算
    computed: {
        // 判断主题  1:红色  2：绿色
        theme() {
            return this.$store.state.common.theme;
        },
        specSelectLsit() {
            const self = this;

            let list = [];
            self.specList.forEach((item) => {
                item.list.forEach((val) => {
                    if (val.active) {
                        list.push(val);
                    }
                });
            });

            return list;
        },

        acTiveSpec() {
            let str = "";
            if (this.specSelectLsit.length) {
                for (let item of this.specSelectLsit) {
                    str += item.name + ",";
                }
            }
            str = str.replace(/,$/, "");
            return str;
        },

        spec() {
            const self = this;

            let result = "";

            if (self.goods) {
                self.goods.skuDetail.skus.forEach((item) => {
                    if (self.specList.length === self.specSelectLsit.length) {
                        let verify = true;
                        self.specSelectLsit.forEach((val) => {
                            if (val.name !== item[val.type]) {
                                verify = false;
                            }
                        });

                        if (verify) {
                            result = item;
                        }
                    }
                });
            }
            if (result) {
                if (this.goods.cart) {
                    let k = true;
                    for (let item of this.goods.cart) {
                        if (item.skuId === result.skuId) {
                            this.cartSku = item;
                            k = false;
                        }
                    }
                    if (k) {
                        this.cartSku = null;
                    }
                }
            } else {
                this.cartSku = null;
            }
            self.$emit("update:spec", result);
            return result;
        },
        nowPriceFmt() {
            if (this.goods) {
                let n = this.goods.priceInfo.nowPrice / 100;
                return n.toFixed(2);
            } else {
                return "0.00";
            }
        },
    },

    // 数据监听
    watch: {
        goods(val) {
            const self = this;

            if (val) {
                self.specList = val.skuDetail.props;
            }
        },
    },
};
</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;
        }
    }
}

.g-list {
    padding: 0 px(40) px(50);
    border-bottom: solid px(3) #fafafa;

    &__item {
        padding-top: px(40);
    }

    &__title {
        font-size: px(44);
        color: #333;
    }
}

.g-specification {
    display: flex;
    flex-wrap: wrap;

    &__item {
        display: flex;
        justify-content: center;
        align-items: center;
        height: px(85);
        padding: 0 px(30);
        margin: px(30) px(30) 0 0;
        font-size: px(34);
        color: #333;
        border-radius: px(10);
        background-color: #f8f8f8;

        &--active {
            color: #fff;
            background-color: #262626;
        }
    }
}

.selected {
    background-color: #fafafa;
    font-size: px(32);
    color: #666;
    padding: px(30) px(40);
    line-height: 1.5;
    span {
        color: #333;
    }
}

.modal-bottom {
    display: flex;
    margin-top: px(50);
    justify-content: space-between;
    align-items: center;
    padding: 0 px(40);
    .price {
        color: #27a34f;
        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);
    }
}

.btns {
    display: flex;
    align-items: center;
    .cart-num {
        // padding: px(30) px(10) px(10) px(30);
        padding: 0 px(30);
        box-sizing: border-box;
        min-width: px(60);
    }
    &__add {
        background-color: #27a34f;
        width: px(60);
        height: px(60);
        border-radius: 50%;
        // box-shadow: px(1) px(2) px(6) #27a34f;
        position: relative;
        &::after,
        &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 1;
            width: 60%;
            height: px(6);
            border-radius: px(6);
            background: #fff;
        }
        &::after {
            transform: translate(-50%, -50%);
        }
        &::before {
            transform-origin: center;
            transform: translate(-50%, -50%) rotate(90deg);
        }
    }

    &__remove {
        background-color: #fff;
        width: px(60);
        height: px(60);
        border-radius: 50%;
        border: 1px solid #999;
        position: relative;
        &::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 1;
            width: 60%;
            height: px(6);
            border-radius: px(6);
            background: #999;
            transform: translate(-50%, -50%);
        }
    }
}

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