<template>
    <div class="NewsHyjjSector">
        <div class="NewsHyjjSectorTop">
            <img src="https://img.bjzxtw.org.cn/pre/image/png/20251111/1762847683404338.png" alt="">
        </div>
        <div class="NewsHyjjSectorBottom">
            <div class="NewsHyjjSectorBottomLeft">
                <sectorLeftStyle 
                    :titleLink="componentTitle" 
                    :componentStyle="templateData[0].component_style"
                    :templateData="templateData[0].componentData.data" />
            </div>
            <div class="NewsHyjjSectorBottomRight">
                <sectorRightStyle 
                    :titleLink1="componentTitle1"
                    :titleLink2="componentTitle2"
                    :componentStyle="templateData[1].component_style"
                    :templateData="templateData[1].componentData.data[0]"
                    :templateData1="templateData[1].componentData.data[1]"
                />
            </div>
        </div>
    </div>
</template> 

<script setup>
import sectorLeftStyle from '@/components/template/component/list/585x250/1.vue'
import sectorRightStyle from '@/components/template/component/list/585x250/2.vue'
const props = defineProps({
    skinId: Number,//皮肤id
    templateData:Object,//新闻数据
});
//该通栏下只有1个组件
const componentTitle = {
    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 componentTitle1 = {
    alias:props.templateData[1].componentData.data[0].alias,
    aLIas_pinyin:props.templateData[1].componentData.data[0].pinyin,
    is_url: props.templateData[1].componentData.data[0].is_url ?? 0,//如果is_url为空 则默认为0
    children_count: props.templateData[1].componentData.data[0].children_count ?? 0,//如果children_count为空 则默认为0
    cid:props.templateData[1].componentData.data[0].category_id
}
const componentTitle2 = {
    alias:props.templateData[1].componentData.data[1].alias,
    aLIas_pinyin:props.templateData[1].componentData.data[1].pinyin,
    is_url: props.templateData[1].componentData.data[1].is_url ?? 0,//如果is_url为空 则默认为0
    children_count: props.templateData[1].componentData.data[1].children_count ?? 0,//如果children_count为空 则默认为0
    cid:props.templateData[1].componentData.data[1].category_id
}

</script>

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

    .NewsHyjjSectorTop {
        width: 100%;
        height: 70px;
        margin-bottom: 30px;
    }

    .NewsHyjjSectorBottom {
        width: 100%;
        height: 250px;
        display: flex;
        justify-content: space-between;
        .NewsHyjjSectorBottomLeft {
            width: 585px;
            height: 100%;
        }
        .NewsHyjjSectorBottomRight {
            width: 585px;
            height: 100%;
        }
    }
}
</style>