<template>
    <view class="component-cate-template-list">
        <view class="item-title">
            <text>{{ data.name }}</text>
        </view>
        <view class="item-container">
            <view class="thumb-box" v-for="(item, index) in data.child" :key="index">
                <service-preview-item :data="item" @clickItem="clickItem" />
                <widget-count-modify
                    :init="briefCart.list[item.id] || 0"
                    class="component-add"
                    @change="changeCount($event, item.id)"
                />
            </view>
        </view>
    </view>
</template>

<script>
import WidgetCountModify from "@/components/widgets/count-modify";
import ServicePreviewItem from "@/components/service/preview-item";
import { mapState } from "vuex";
export default {
    name: "component-cate-template-list",
    data() {
        return {};
    },
    props: {
        parentId: {
            type: Number,
            default: 0,
        },
        data: {
            type: Object,
            default: [],
        },
    },
    computed: {
        ...mapState({
            briefCart: (state) => state.cart.briefCart,
        }),
    },
    components: {
        WidgetCountModify,
        ServicePreviewItem,
    },
    created() {},
    mounted() {},
    destroyed() {},
    methods: {
        clickItem(id) {
            this.$emit("clickItem", this.parentId, id);
        },
        changeCount(e, id) {
            this.$emit("changeNumber", e, id);
        },
    },
};
</script>

<style lang="less" scoped>
.component-cate-template-list {
    .item-title {
        font-size: 26rpx;
        line-height: 26rpx;
        color: #8b8b8b;
        font-weight: bold;
    }
    .item-container {
        display: flex;
        flex-wrap: wrap;
    }
    .thumb-box {
        position: relative;
        width: 100%;
        margin-top: 40rpx;

        .component-add {
            position: absolute;
            right: 0;
            bottom: 8rpx;
        }
    }
    .thumb-box:nth-child(3n) {
        margin-right: 0;
    }
}
</style>