<template>
    <div class="onlyImgSectorBox">
        <div class="onlyImgSector">
            <div v-if="templateData.componentList[0].component_style.toString()=='1'">
                <main1Style 
                    v-if="templateData.componentList[0].data.text.length > 0" 
                    :titleLink="componentTitle1" 
                    :templateData="templateData.componentList[0].data"
                    :skinId="skinId"
                />
                <nodata v-else :dataStyle="2" :dataWidth="1200" :dataHeight="480" />
            </div>
            <div v-if="templateData.componentList[0].component_style.toString()=='2'">
                <main2Style 
                    v-if="templateData.componentList[0].data.text.length > 0" 
                    :titleLink="componentTitle1" 
                    :templateData="templateData.componentList[0].data"
                    :skinId="skinId"
                />
                <nodata v-else :dataStyle="2" :dataWidth="1200" :dataHeight="480" />
            </div>
        </div>
    </div>
</template>

<script setup>
//组件样式1
import main1Style from '@/components/template/component/list/1200x480/1.vue'
//组件样式2
import main2Style from '@/components/template/component/list/1200x480/2.vue'

const props = defineProps({
    skinId: Number,//皮肤id
    templateData:Object,//新闻数据
});
//该通栏下只有1个组件
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
}
</script>

<style lang="less" scoped>
.onlyImgSectorBox {
    width: 100%;
    height: 480px;
    .onlyImgSector {
        width: 1200px;
        height: 480px;
        margin: 0 auto;
        box-sizing: content-box;
        position: relative;
    }
}
</style>