<template>
    <div class="TabsTextPhotoSector">
        <div class="contentTop">
            <img src="" alt="">
        </div>
        <div class="contentBottom">
            <div class="left">
                <leftStyle />
            </div>
            <div class="right">
                <sectorStyle 
                    :titleLink1="componentTitle1" 
                    :titleLink2="componentTitle2"
                    :componentStyle="templateData[0].component_style"
                    :templateData="templateData[0].componentData.data[0]"
                    :templateData1="templateData[0].componentData.data[1]" />
            </div>
        </div>

    </div>
</template>

<script setup>
import leftStyle from '@/components/template/component/list/380x460/1.vue'
import sectorStyle from '@/components/template/component/list/790x460/1.vue'
const props = defineProps({
    skinId: Number,//皮肤id
    templateData: Object,//新闻数据
    adData: Object,//广告数据
});
//该通栏下只有1个组件
const componentTitle1 = {
    alias: props.templateData[0].componentData.data[0].alias,
    aLIas_pinyin: props.templateData[0].componentData.data[0].pinyin,
    is_url: props.templateData[0].componentData.data[0].is_url ?? 0,//如果is_url为空 则默认为0
    children_count: props.templateData[0].componentData.data[0].children_count ?? 0,//如果children_count为空 则默认为0
    cid: props.templateData[0].componentData.data[0].category_id
}
const componentTitle2 = {
    alias: props.templateData[0].componentData.data[1].alias,
    aLIas_pinyin: props.templateData[0].componentData.data[1].pinyin,
    is_url: props.templateData[0].componentData.data[1].is_url ?? 0,//如果is_url为空 则默认为0
    children_count: props.templateData[0].componentData.data[1].children_count ?? 0,//如果children_count为空 则默认为0
    cid: props.templateData[0].componentData.data[1].category_id
}

</script>

<style lang="less" scoped>
.TabsTextPhotoSector {
    width: 1200px;
    height: 540px;
    margin: 0 auto;
    margin-bottom: 30px;

    .contentTop {
        width: 1200px;
        height: 32px;
        margin-bottom: 19px;
        margin-top: 19px;

        img {
            width: 1200px;
            height: 32px;
        }
    }

    .contentBottom {
        width: 1200px;
        height: 460px;

        .left {
            width: 380px;
            height: 460px;
            margin-right: 30px;
        }

        .right {
            width: 790px;
            height: 460px;
        }
    }
}
</style>