<template>
    <div class="headLineBigBox">
        <!--板式1-->
        <div v-if="templateData.componentList[0].component_style.toString()=='1'">
            <style1 
                v-if="templateData.componentList[0].data.text.length > 0" 
                :templateData="templateData.componentList[0].data.text" 
                :skinId="skinId"
            />
            <nodata v-else :dataStyle="2" :dataWidth="1200" :dataHeight="140" />
        </div>
        <!--板式2-->
        <div v-if="templateData.componentList[0].component_style.toString()=='2'">
            <style2
                v-if="templateData.componentList[0].data.text.length > 0" 
                :templateData="templateData.componentList[0].data.text" 
                :skinId="skinId"
            />
            <nodata v-else :dataStyle="2" :dataWidth="1200" :dataHeight="140" />
        </div>
    </div>
</template>

<script setup>
//样式1
import style1 from '@/components/template/component/headLine/1200x140/1.vue'
//样式2
import style2 from '@/components/template/component/headLine/1200x140/2.vue'
//暂无数据
import nodata from '@/components/template/component/public/nodata.vue'

const props = defineProps({
    skinId: Number,//皮肤id
    templateData:Object,//新闻数据
});
</script>

<style lang="less" scoped>
.headLineBigBox {
    width: 1200px;
    height: 110px;
    position: relative;
    margin: 0 auto;
    margin-bottom: 30px;
    .templateEditBtnBox {
        right: 0;
    }
}
</style>