<template>
    <div class="m-cart" :class="{ page_red: theme === 1 }">
        <ul class="m-goods">
            <li
                class="m-goods__item"
                v-for="(item, index) in goodsList"
                :key="index"
                @click="jump(item.link)"
            >
                <img class="m-goods__img" mode="aspectFill" :src="item.img" />
                <div class="m-goods__sale" v-if="isShowSale">
                    {{ "销量 " + (item.sale || "0") }}
                </div>
                <div class="m-goods__title">{{ item.title }}</div>
                <div class="m-goods__coupon" v-if="item.coupon">
                    {{ item.coupon }}
                </div>
                <div class="m-goods__bottom">
                    <div class="m-goods__price">
                        <div class="m-goods__present">
                            <span class="m-goods__rmb">¥</span>
                            <span class="m-goods__big">{{
                                item.price / 100 || "0.00"
                            }}</span>
                        </div>
                        <div
                            class="m-goods__original"
                            v-if="
                                isShowMembership &&
                                item.tagPrice &&
                                item.tagPrice !== '0.00' &&
                                item.tagPrice !== item.price
                            "
                        >
                            {{ "¥" + (item.tagPrice / 100 || "0.00") }}
                        </div>
                    </div>
                    <div
                        class="m-goods__cart m-goods__cart-text"
                        v-if="isShowCart && item.skus.length"
                        @click.stop="addCart(item)"
                    >
                        选规格
                    </div>
                    <div
                        class="m-goods__cart"
                        v-if="isShowCart && !item.skus.length"
                        @click.stop="addCart2(item)"
                    >
                        <i class="iconfont icongouwuche m-goods__cart-icon"></i>
                    </div>
                </div>
            </li>
        </ul>
        <div class="m-bottom-margin" v-if="bottomMargin"></div>
        <!-- <div class="m-more-text" v-if="goodsList.length">- 没有更多了 -</div> -->
        <!-- <g-spec ref="spec" :goods="goods"></g-spec> -->
        <g-spec-modal ref="spec" :goods="goods" :spec="'cart'"></g-spec-modal>
    </div>
</template>

<script>
// 双列商品
import GSpec from "../../pages/goods/spec";
import GSpecModal from "../../pages/goods/specModal";

export default {
    name: "MGoods",
    components: { GSpec, GSpecModal },
    props: {
        // 内容
        content: {
            type: Object,
        },
    },

    // 数据
    data() {
        return {
            goods: "",
            goodsList: [],
            isShowCart: false,
            isShowSale: false,
            isShowMembership: false,
            bottomMargin: false,
            cartList: [],
        };
    },

    // 初始化
    created() {
        const self = this;

        self.init();
    },

    // 函数
    methods: {
        init() {
            const self = this;

            self.goodsList = self.content.asynData.list || [];
            self.isShowCart =
                self.content.formData.form.models[0].isShowCart === "1";
            self.isShowSale =
                self.content.formData.form.models[0].isShowSale === "1";
            self.isShowMembership =
                self.content.formData.form.models[0].isShowMembership === "1";
            self.bottomMargin =
                self.content.formData.moduleTitle.models[0]
                    .isShowBottomMargin === "1";
            self.getGoodsList(self.content.asynData.ids);
        },

        // 获取商品列表
        getGoodsList(ids) {
            const self = this;
            if (!ids || ids.length === 0) {
                return;
            }
            self.api
                .post("/Product/GetListByIds", {
                    ids: ids,
                })
                .then((res) => {
                    self.goodsList = self.goodsList.filter((item) => {
                        let include = false;
                        res.data.forEach((val) => {
                            if (item.tradeItemId === val.id) {
                                item.title = val.name;
                                item.img = val.image;
                                item.coupon = val.coupon;
                                item.price = val.price;
                                item.tagPrice = val.tagPrice;
                                item.sale = val.sale;
                                item.stock = val.stock;
                                item.id = val.id;
                                item.skus = val.skus;
                                include = true;
                            }
                        });

                        return include;
                    });
                });
        },

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

            self.api
                .get("/Product/Detail", {
                    id: val.tradeItemId,
                })
                .then((res) => {
                    self.goods = JSON.parse(res.data);
                    self.$refs.spec.open("cart", () => {
                        self.fn.showToast("添加成功");
                        self.getCartNumber();
                        self.$emit("change");
                    });
                });
        },

        addCart2(item) {
            const self = this;
            console.log(item);
            self.api
                .post("/Order/AddCart", {
                    productId: item.id,
                    count: 1,
                    // skuId: self.spec.skuId,
                    // roomId: self.roomId || "",
                    // videoId: Number(self.videoId) || 0,
                })
                .then((res) => {
                    self.getCartNumber();
                    self.fn.showToast("添加成功");
                        self.$emit("change");
                    // self.$refs.shopCart.refresh();
                });
        },

        // 获取购物车数量
        getCartNumber() {
            const self = this;
            self.api.get("/Order/GetCartCount").then((res) => {
                if (res.data > 0) {
                    uni.setTabBarBadge({
                        index: 2,
                        text: res.data.toString(),
                    });
                } else {
                    uni.removeTabBarBadge({
                        index: 2,
                    });
                }
            });
        },
    },

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

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

            if (val) {
                self.init();
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.m-goods {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 px(30) px(30);

    &__item {
        position: relative;
        width: px(495);
        padding-bottom: px(30);
        margin-top: px(25);
        overflow: hidden;
        border-radius: px(15);
        background-color: #fff;

        &:nth-child(2n + 1) {
            margin-right: px(30);
        }
    }

    &__img {
        width: px(510);
        height: px(510);
    }

    &__title {
        @include omits(1);
        height: px(60);
        margin: px(20);
        font-size: px(40);
        color: #333;
    }

    &__coupon {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        height: px(40);
        padding: 0 px(15);
        margin: 0 px(20);
        font-size: px(30);
        color: #27a34f;
        border-radius: px(20);
        border: solid px(3) #27a34f;
    }

    &__bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 px(20);
        margin-top: px(20);
    }

    &__price {
        display: flex;
        align-items: flex-end;
    }

    &__present {
        color: #000;
        font-weight: 600;
    }

    &__rmb {
        font-size: px(30);
    }

    &__big {
        font-size: px(38);
    }

    &__original {
        position: relative;
        margin-left: px(20);
        font-size: px(32);
        color: #999;

        &:after {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            z-index: 1;
            width: 100%;
            height: px(1);
            transform: translateY(-100%);
            background-color: #999;
        }
    }

    &__sale {
        position: absolute;
        top: px(450);
        right: px(20);
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        width: px(135);
        height: px(46);
        font-size: px(30);
        color: #fff;
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: px(23);
    }

    &__cart {
        display: flex;
        justify-content: center;
        align-items: center;
        width: px(80);
        height: px(80);
        border-radius: 50%;
        background-color: #27a34f;
        &-text {
            width: auto;
            padding: 0 px(20);
            line-height: px(60);
            height: px(60);
            border-radius: px(30);
            font-size: px(30);
            color: #fff;
        }
    }

    &__cart-icon {
        font-size: px(40);
        color: #fff;
    }
}

.m-bottom-margin {
    height: px(30);
}

.m-more-text {
    display: flex;
    justify-content: center;
    padding-bottom: px(60);
    font-size: px(34);
    color: #999;
}
.page_red {
    .m-goods {
        &__cart {
            background-color: #27a34f;
        }
    }
}
</style>