<template>
    <div class="g-spec" v-if="show" :class="{ page_red: theme === 1 }">
        <div
            class="g-spec__content"
            :class="{ 'g-spec__content--iphoneX': iphoneX }"
        >
            <div class="g-info">
                <div class="g-info__content">
                    <img
                        class="g-info__img"
                        :src="goods.pictureUrls[0]"
                        alt=""
                    />
                    <div class="g-info__right">
                        <div class="g-info__title">
                            {{ goods.name }}
                        </div>
                        <div class="g-info__price">
                            ¥{{ spec.price | minuteToRmb2 }}
                        </div>
                    </div>
                    <div class="g-info__close" @click="close">
                        <i class="iconfont iconclose g-info__close-icon"></i>
                    </div>
                </div>
            </div>
            <ul class="g-list">
                <li class="g-list__item">
                    <div class="g-list__title">规格</div>
                    <ul class="g-specification">
                        <li
                            class="g-specification__item"
                            :class="{
                                'g-specification__item--active': value.active,
                            }"
                            v-for="(value, key) in specList"
                            :key="key"
                            @click="selectSpec(value, index)"
                        >
                            {{ value.properties }}
                        </li>
                    </ul>
                </li>
            </ul>
            <div class="g-entrepot">
                <div class="g-entrepot__left">
                    <div class="g-entrepot__title">购买数量：</div>
                    <div class="g-entrepot__num">
                        {{
                            "剩余" +
                            (spec ? spec.inventory : goods.totalInventory) +
                            "件"
                        }}
                    </div>
                </div>
                <f-input-number
                    v-model="num"
                    :max="spec.inventory || goods.totalInventory"
                ></f-input-number>
            </div>
            <ul class="g-nav" v-if="type === 'spec'">
                <li class="g-nav__item" @click="addCart">加入购物车</li>
                <li class="g-nav__item" @click="buy">立即购买</li>
            </ul>
            <div class="g-bottom" v-if="type !== 'spec'">
                <div class="g-bottom__btn" @click="affirm">确定</div>
            </div>
        </div>
    </div>
</template>

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

export default {
    name: "GSpec",
    components: { FInputNumber },
    props: {
        // 内容
        goods: {
            type: Object,
        },
    },

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

    // 函数
    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;
            for (let item of self.specList) {
                if (item.skuNo === val.skuNo) {
                    item.active = true;
                } else {
                    item.active = false;
                }
            }
            this.specList = [...this.specList];
        },

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

            if (self.specList.length && !self.spec) {
                self.fn.showToast("请选择商品规格");
            } else {
                self.api
                    .post("/Order/AddCart", {
                        productId: self.goods.pid,
                        count: self.num,
                        skuId: self.spec.skuNo,
                        productSource: 1,
                    })
                    .then((res) => {
                        self.close();
                        if (self.fn.getType(self.callBack) === "function") {
                            self.callBack(res);
                        }
                    });
            }
        },

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

            if (self.specList.length && !self.spec) {
                self.fn.showToast("请选择商品规格");
            } else {
                self.api
                    .post("/Order/BuyNow", {
                        productId: self.goods.pid,
                        count: self.num,
                        price: parseFloat(self.spec.price / 100),
                        skuId: self.spec.skuNo,
                        productSource: 1,
                    })
                    .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;
        },

        spec() {
            const self = this;

            let result = "";

            if (self.goods) {
                for (let item of this.specList) {
                    if (item.active) {
                        result = item;
                    }
                }
            }

            self.$emit("update:spec", result);
            return result;
        },
    },

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

            if (val) {
                self.specList = val.skuList;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.g-spec {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 996;
    background-color: rgba(0, 0, 0, 0.4);

    &__content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
        background-color: #fff;

        &--iphoneX {
            padding-bottom: px(30);
        }
    }
}

.g-info {
    padding-left: px(55);

    &__content {
        display: flex;
        height: px(300);
        border-bottom: solid px(3) #fafafa;
    }

    &__img {
        width: px(300);
        height: px(300);
        margin-top: px(-40);
        border-radius: px(10);
    }

    &__right {
        flex: 1;
        padding: px(35);
    }

    &__title {
        @include omits(2);
        width: px(500);
        font-size: px(36);
        color: #000;
    }

    &__price {
        margin-top: px(30);
        font-size: px(34);
        color: #000;
    }

    &__close {
        position: absolute;
        top: px(-115);
        right: px(55);
        z-index: 1;
        height: px(115);

        &:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            z-index: 1;
            width: px(2);
            height: px(34);
            transform: translateX(-50%);
            background-color: #fff;
        }
    }

    &__close-icon {
        font-size: px(84);
        color: #fff;
    }
}

.g-list {
    padding: 0 px(55) px(60);
    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;
        }
    }
}

.g-entrepot {
    display: flex;
    justify-content: space-between;
    padding: px(35) px(55);

    &__title {
        padding-top: px(15);
        font-size: px(38);
        color: #333;
    }

    &__num {
        margin-top: px(35);
        font-size: px(34);
        color: #9e9e9e;
    }
}

.g-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 px(55);
    height: px(165);
    border-top: solid px(3) #fafafa;

    &__item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: px(470);
        height: px(110);
        font-size: px(38);
        color: #262626;
        border-radius: px(55);
        background-color: #e5e5e5;

        &:last-child {
            color: #fff;
            background-color: #27a34f;
        }
    }
}

.g-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 px(55);
    height: px(165);
    border-top: solid px(3) #fafafa;

    &__btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: px(110);
        font-size: px(38);
        color: #fff;
        border-radius: px(55);
        background-color: #27a34f;
    }
}
.page_red {
    .g-bottom__btn {
        background-color: #27a34f;
    }
}
</style>