<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">{{ good.baseInfo.name }}</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.title + "：" }}</div>
                    <ul class="g-specification">
                        <li
                            class="g-specification__item"
                            :class="{
                                'g-specification__item--active': value.active,
                            }"
                            v-for="(value, key) in item.valList"
                            :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">{{
                        cartSku
                            ? cartSku.price / 100
                            : good.baseInfo.price / 100
                    }}</span>
                </div>
                <div
                    class="btn"
                    @click="addCart"
                    v-if="!cartSku || !cartSku.select_num"
                >
                    加入列表
                </div>
                <div class="btns" v-if="cartSku && cartSku.select_num">
                    <button
                        class="button button2"
                        @click.stop="setCaetNum('-')"
                    >
                        <div class="btns__remove"></div>
                    </button>
                    <span class="cart-num">{{ cartSku.select_num }}</span>
                    <button class="button" @click.stop="setCaetNum('+')">
                        <div class="btns__add"></div>
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

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

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

    // 函数
    methods: {
        // 打开
        open(good, callBack) {
            const self = this;
            self.cartSku = null;
            self.show = true;
            self.good = good;
            let skus = good.skuInfo;
            self.initSkus(skus);
            // self.specList =
            self.callBack = callBack;
        },

        initSkus(skus) {
            let skuArr = [];
            for (let n in skus.skuAttrs) {
                let obj = {
                    name: n,
                    title: skus.skuAttrs[n],
                    valList: [],
                };
                for (let item of skus.skus) {
                    let flag = obj.valList.some((x) => x.name === item[n]);
                    if (!flag) {
                        obj.valList.push({
                            name: item[n],
                        });
                    }
                }
                skuArr.push(obj);
            }
            this.specList = skuArr;
            console.log(skus, skuArr, 111);
        },

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

            self.show = false;
        },

        initCurSku() {
            const self = this;
            let skus = this.good.skuInfo;

            let arr = [];
            for (let item of this.specList) {
                for (let child of item.valList) {
                    if (child.active) {
                        arr.push({
                            name: item.name,
                            title: item.title,
                            value: child.name,
                        });
                    }
                }
            }
            let cur = null;
            for (let item of skus.skus) {
                let flag = true;
                let index = 0;
                for (let active of arr) {
                    index++;
                    if (item[active.name] !== active.value) {
                        flag = false;
                    }
                }
                if (flag && index === this.specList.length) {
                    cur = item;
                }
            }

            if (cur) {
                this.cartSku = cur;
            } else {
                this.cartSku = null;
            }
            console.log("cartSku", cur);
        },

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

            self.specList[index].valList.forEach((item, key) => {
                if (item.name === val.name) {
                    item.active = true;
                } else {
                    item.active = false;
                }
                // self.specList[index].valList.splice(key, item);
            });
            this.specList = [...this.specList];

            this.initCurSku();
        },

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

            if (!self.cartSku) {
                self.fn.showToast("请选择商品规格");
            } else {
                this.callBack(
                    {
                        ...this.good.baseInfo,
                        _sku: this.cartSku,
                        name:
                            this.good.baseInfo.name +
                            "(" +
                            this.cartSku.key +
                            ")",
                        select_num: 1,
                    },
                    "add"
                );
                for (let item of self.good.skuInfo.skus) {
                    if (item.skuId === this.cartSku.skuId) {
                        item.select_num = 1;
                        this.cartSku = item;
                    }
                }
                this.initCurSku();
                this.$forceUpdate();
            }
        },

        setCaetNum(type) {
            if (type === "+") {
                this.cartSku.select_num++;
            } else {
                this.cartSku.select_num--;
            }
            this.initCurSku();
            this.$forceUpdate();
            this.callBack(
                {
                    ...this.good.baseInfo,
                    _sku: this.cartSku,
                    name: this.good.baseInfo.name + " " + this.cartSku.key,
                    select_num: this.cartSku.select_num,
                },
                "edit"
            );
        },
    },

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

            let list = [];
            self.specList.forEach((item) => {
                item.valList.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;
        },
    },

    // 数据监听
    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;
        }
    }
}

.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: #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);
    }
}

.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: #fe6661;
    }
    .btns__add {
        background-color: #fe6661;
    }
}
</style>