<template>
    <div class="manyPictureSectorBox">
        <!-- 
            注意 ，该组件可以在首页与频道页中通用
         -->
        <div class="manyPictureSector">
            <div class="manyPictureSectorLeft">
                <div v-if="templateData.componentList[0].component_style.toString()=='1'">
                    <left1Style 
                        v-if="templateData.componentList[0].data.text.length > 0" 
                        :titleLink="componentTitle1" 
                        :templateData="templateData.componentList[0].data"
                        :skinId="skinId"
                    />
                    <nodata v-else :dataStyle="2" :dataWidth="720" :dataHeight="440" />
                </div>
                <div v-if="templateData.componentList[0].component_style.toString()=='2'">
                    <left2Style 
                        v-if="templateData.componentList[0].data.text.length > 0" 
                        :titleLink="componentTitle1" 
                        :templateData="templateData.componentList[0].data" 
                        :skinId="skinId"
                    />
                    <nodata v-else :dataStyle="2" :dataWidth="720" :dataHeight="440" />
                </div>
            </div>
            <div class="manyPictureSectorRight">
                <div v-if="templateData.componentList[1].component_style.toString()=='1'">
                    <right1Style 
                        v-if="templateData.componentList[1].data.text.length > 0" 
                        :titleLink="componentTitle2" 
                        :templateData="templateData.componentList[1].data" 
                        :skinId="skinId"
                    />
                    <nodata v-else :dataStyle="2" :dataWidth="450" :dataHeight="440" />
                </div>
                <div v-if="templateData.componentList[1].component_style.toString()=='2'">
                    <right2Style 
                        v-if="templateData.componentList[1].data.text.length > 0" 
                        :titleLink="componentTitle2" 
                        :templateData="templateData.componentList[1].data" 
                        :skinId="skinId"
                    />
                    <nodata v-else :dataStyle="2" :dataWidth="450" :dataHeight="440" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
//左侧样式1
import left1Style from '@/components/template/component/list/720x440/3.vue'
//左侧样式2
import left2Style from '@/components/template/component/list/720x440/4.vue'
//右侧样式1
import right1Style from '@/components/template/component/list/450x440/3.vue'
//右侧样式2
import right2Style from '@/components/template/component/list/450x440/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.componentList[0].data.alias,
    aLIas_pinyin:props.templateData.componentList[0].data.pinyin,
    is_url: props.templateData.componentList[0].data.is_url,
    children_count: props.templateData.componentList[0].data.children_count,
    cid:props.templateData.componentList[0].data.category_id
}
const componentTitle2 = {
    alias:props.templateData.componentList[1].data.alias,
    aLIas_pinyin:props.templateData.componentList[1].data.pinyin,
    is_url: props.templateData.componentList[1].data.is_url,
    children_count: props.templateData.componentList[1].data.children_count,
    cid:props.templateData.componentList[1].data.category_id
}
</script>

<style lang="less" scoped>
.manyPictureSectorBox {
    width: 100%;
    height: 440px;
    margin-bottom: 30px;
    box-sizing: content-box;
    .manyPictureSector {
        width: 1200px;
        height: 440px;
        margin:0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .manyPictureSectorLeft {
        width: 720px;
        height: 440px;
        position: relative;
    }
    .manyPictureSectorRight {
        width: 450px;
        height:440px;
        position: relative;
    }
}
</style>