<template>
    <view class="component-cate-template-cate">
        <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" @click="clickItem(item.id)">
                <image class="item-menu-image" :src="item.cover" mode=""></image>
                <view class="item-menu-name limit-line clamp-1">{{ item.name }}</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: "component-cate-template-cate",
    data() {
        return {};
    },
    props: {
        parentId: {
            type: Number,
            default: 0,
        },
        data: {
            type: Object,
            default: [],
        },
    },
    components: {},
    created() {},
    mounted() {},
    destroyed() {},
    methods: {
        clickItem(id) {
            this.$emit("clickItem", this.parentId, id);
        },
    },
};
</script>

<style lang="less" scoped>
.component-cate-template-cate {
    .item-title {
        font-size: 26rpx;
        line-height: 26rpx;
        color: #010101;
        font-weight: bold;
    }
    .item-container {
        display: flex;
        flex-wrap: wrap;
    }
    .thumb-box {
        width: 130rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-top: 40rpx;
        margin-right: 40rpx;
    }
    .thumb-box:nth-child(3n) {
        margin-right: 0;
    }
    .item-menu-image {
        width: 120rpx;
        height: 120rpx;
        box-sizing: border-box;
        border-radius: 20rpx;
        border: 2rpx solid #d8d8d8;
    }
    .item-menu-name {
        margin-top: 15rpx;
        font-weight: normal;
        color: #333333;
        font-size: 24rpx;
    }
}
</style>