<template>
    <div class="commentSectorBox">
        <div class="commentSector">
            <div class="commentSectorLeft">
                <div class="commentSectorLeftTop">
                    <!--左侧顶部组件皮肤1-->
                    <div v-if="skinId==1">
                        <leftTop1Style 
                            :titleLink="componentTitle1" 
                            :templateData="templateData[0].componentData.data"
                            :componentStyle="templateData[0].component_style"
                        />
                    </div>
                    <!--左侧顶部组件皮肤2-->
                    <div v-if="skinId==2">
                        <leftTop2Style 
                            :titleLink="componentTitle1" 
                            :templateData="templateData[0].componentData.data"
                            :componentStyle="templateData[0].component_style"
                        />
                    </div>
                    <!--左侧顶部组件皮肤3-->
                    <div v-if="skinId==3">
                        <leftTop3Style 
                            :titleLink="componentTitle1" 
                            :templateData="templateData[0].componentData.data"
                            :componentStyle="templateData[0].component_style"
                        />
                    </div>
                    <!--左侧顶部组件皮肤4-->
                    <div v-if="skinId==4">
                        <leftTop4Style 
                            :titleLink="componentTitle1" 
                            :templateData="templateData[0].componentData.data"
                            :componentStyle="templateData[0].component_style"
                        />
                    </div>
                </div>
                <div class="commentSectorLeftBottom">
                    <!--左侧底部组件皮肤1-->
                    <div v-if="skinId==1">
                        <leftBottom1Style 
                            :titleLink="componentTitle2" 
                            :templateData="templateData[1].componentData.data"
                            :componentStyle="templateData[1].component_style"
                        />
                    </div>
                    <!--左侧底部组件皮肤2-->
                    <div v-if="skinId==2">
                        <leftBottom2Style 
                            :titleLink="componentTitle2" 
                            :templateData="templateData[1].componentData.data"
                            :componentStyle="templateData[1].component_style"
                        />
                    </div>
                    <!--左侧底部组件皮肤3-->
                    <div v-if="skinId==3">
                        <leftBottom3Style 
                            :titleLink="componentTitle2" 
                            :templateData="templateData[1].componentData.data"
                            :componentStyle="templateData[1].component_style"
                        />
                    </div>
                    <!--左侧底部组件皮肤4-->
                    <div v-if="skinId==4">
                        <leftBottom4Style 
                            :titleLink="componentTitle2" 
                            :templateData="templateData[1].componentData.data"
                            :componentStyle="templateData[1].component_style"
                        />
                    </div>
                </div>
            </div>
            <div class="commentSectorRight">
                <!--右侧组件皮肤1-->
                <div v-if="skinId==1">
                    <right1Style 
                        :titleLink="componentTitle3" 
                        :templateData="templateData[2].componentData.data"
                        :componentStyle="templateData[2].component_style"
                    />
                </div>
                <!--右侧组件皮肤2-->
                <div v-if="skinId==2">
                    <right2Style 
                        :titleLink="componentTitle3" 
                        :templateData="templateData[2].componentData.data"
                        :componentStyle="templateData[2].component_style"
                    />
                </div>
                <!--右侧组件皮肤3-->
                <div v-if="skinId==3">
                    <right3Style 
                        :titleLink="componentTitle3" 
                        :templateData="templateData[2].componentData.data"
                        :componentStyle="templateData[2].component_style"
                    />
                </div>
                <!--右侧组件皮肤4-->
                <div v-if="skinId==4">
                    <right4Style 
                        :titleLink="componentTitle3" 
                        :templateData="templateData[2].componentData.data"
                        :componentStyle="templateData[2].component_style"
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
//左侧顶部组件皮肤1
import leftTop1Style from '@/components/template/component/list/720x300/1.vue'
//左侧顶部组件皮肤2
import leftTop2Style from '@/components/template/component/list/720x300/2.vue'
//左侧顶部组件皮肤3
import leftTop3Style from '@/components/template/component/list/720x300/3.vue'
//左侧底部组件皮肤4
import leftTop4Style from '@/components/template/component/list/720x300/4.vue'

//左侧底部组件皮肤1
import leftBottom1Style from '@/components/template/component/list/720x620/1.vue'
//左侧底部组件皮肤2
import leftBottom2Style from '@/components/template/component/list/720x620/2.vue'
//左侧底部组件皮肤3
import leftBottom3Style from '@/components/template/component/list/720x620/3.vue'
//左侧底部组件皮肤4
import leftBottom4Style from '@/components/template/component/list/720x620/4.vue'

//右侧组件皮肤1
import right1Style from '@/components/template/component/list/450x950/1.vue'
//右侧组件皮肤2
import right2Style from '@/components/template/component/list/450x950/2.vue'
//右侧组件皮肤3
import right3Style from '@/components/template/component/list/450x950/3.vue'
//右侧组件皮肤4
import right4Style from '@/components/template/component/list/450x950/4.vue'

//暂无数据
import nodata from '@/components/template/component/public/nodata.vue'
const props = defineProps({
    skinId: Number,//皮肤id
    templateData:Object,//新闻数据
});
//该栏目下有三个组件 此时需要提供children_count来判断是否跳转到频道页
const componentTitle1 = {
    alias:props.templateData[0].componentData.data.alias,
    aLIas_pinyin:props.templateData[0].componentData.data.pinyin,
    is_url: props.templateData[0].componentData.data.is_url ?? 0,//如果is_url为空 则默认为0
    children_count: props.templateData[0].componentData.data.children_count ?? 0,//如果children_count为空 则默认为0
    cid:props.templateData[0].componentData.data.category_id
}
const componentTitle2 = {
    alias:props.templateData[1].componentData.data.alias,
    aLIas_pinyin:props.templateData[1].componentData.data.pinyin,
    is_url: props.templateData[1].componentData.data.is_url ?? 0,//如果is_url为空 则默认为0
    children_count: props.templateData[1].componentData.data.children_count ?? 0,//如果children_count为空 则默认为0
    cid:props.templateData[1].componentData.data.category_id
}
const componentTitle3 = {
    alias:props.templateData[2].componentData.data.alias,
    aLIas_pinyin:props.templateData[2].componentData.data.pinyin,
    is_url: props.templateData[2].componentData.data.is_url ?? 0,//如果is_url为空 则默认为0
    children_count: props.templateData[2].componentData.data.children_count ?? 0,//如果children_count为空 则默认为0
    cid:props.templateData[2].componentData.data.category_id
}
</script>

<style scoped lang="less">
//基本样式 start ---------------------------------------->
.commentSectorBox {
    width:100%;
    height: 950px;
    display: flex;
    margin-bottom: 30px;
    .commentSector {
        width: 1200px;
        height: 950px;
        margin: 0 auto;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        box-sizing: content-box;
        .commentSectorLeft {
            width: 720px;
            height: 950px;
            .commentSectorLeftTop {
                width: 720px;
                height: 300px;
                margin-bottom: 28px;
                position: relative;
                box-sizing: content-box;
            }
            .commentSectorLeftBottom {
                width: 720px;
                height: 620px;
                position: relative;
            }
        }
        .commentSectorRight {
            width: 450px;
            height: 950px;
            box-sizing: content-box;
            position: relative;
        }
    }
}
//基本样式 end ---------------------------------------->
</style>

