<template>
    <div class="m-classify">
        <ul class="m-list" :class="{four:type==='0'}">
            <li
                class="m-item"
                v-for="(item,index) of list"
                :key="index"
                @click="goClassify(item.id)"
            >
                <img
                    class="m-list__img"
                    mode="aspectFill"
                    :src="item.icon || '/static/icon/null.png'"
                    alt
                />
                <span class="m-list__title">{{ item.abbreviation }}</span>
            </li>
        </ul>
        <div class="m-bottom-margin" v-if="bottomMargin"></div>
    </div>
</template>

<script>
import qs from "qs";
// 视频组件
export default {
    name: "MClassify",

    props: {
        // 内容
        content: {
            type: Object,
        },
    },

    // 数据
    data() {
        return {
            type: "0", // '0'一行四个  '1'一行5个
            list: [],
            bottomMargin: false,
        };
    },

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

        self.init();
    },

    // 函数
    methods: {
        init() {
            const self = this;
            self.type = self.content.formData.form.models[0].categorytype;
            // self.list = self.content.asynData.list;
            self.ids = self.content.asynData.ids;
            if (self.ids && self.ids.length > 0) {
                this.getClassify();
            }
            self.bottomMargin =
                self.content.formData.moduleTitle.models[0]
                    .isShowBottomMargin === "1";
        },

        getClassify() {
            this.api
                .post("/Product/GetCategoryListByIds",{
                    ids:this.ids
                })
                .then((res) => {
                    this.list = res.data;
                });
        },

        // 跳转到详情
        goClassify(id) {
            this.$store.commit("common/update", {
                cateId: id,
            });
            console.log("cateId", id);
            this.router.push("/pages/goods/category?cateId=" + id);
        },
    },

    // 数据计算
    computed: {},

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

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

<style lang="scss" scoped>
.m-bottom-margin {
    height: px(30);
}

.m-list {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    padding: px(30) 0;
    .m-item {
        width: 20%;
        padding: px(20) px(10);
    }

    &__img {
        width: px(140);
        height: px(140);
        margin: 0 auto;
        object-fit: contain;
        border-radius: 50%;
    }
    &__title {
        font-size: px(40);
        display: block;
        text-align: center;
        margin-top: px(20);
        @include omit(100%);
    }

    &.four {
        .m-item {
            width: 25%;
            padding: px(20) px(10);
            text-align: center;
        }
        &__img {
            width: px(150);
            height: px(150);
        }
    }
}
</style>