<template>
    <div class="newsTabsAdSector">
        <div class="newsTabsAdSectorBottomLeft">
            <sectorLeftStyle 
                :titleLink1="componentTitle1" 
                :titleLink2="componentTitle2"
                :componentStyle="templateData[0].component_style" 
                :templateData="templateData[0].componentData.data[0]"
                :templateData1="templateData[0].componentData.data[1]" />
        </div>
        <div class="newsTabsAdSectorBottomRight">
            <div class="adTitle">
                <span>广告内容</span>
            </div>
            <div class="adBox" v-for="item in adData" :key="item.ad_tag">
                <a :href="item.ad_url" v-if="item.image_url == null" target="_blank" :title="item.introduce">
                    <img :src="item.thumb" :alt="item.introduce" :id="item.ad_tag" data-tag="item.ad_tag">
                </a>
                <a :href="item.image_url" v-else :title="item.introduce">
                    <img :src="item.image_src" :alt="item.introduce" :id="item.ad_tag" data-tag="item.ad_tag">
                </a>
            </div>
        </div>
    </div>
</template>

<script setup>
import sectorLeftStyle from '@/components/template/component/list/790x370/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>
.newsTabsAdSector {
    width: 1200px;
    height: 370px;
    margin: 0 auto;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;

    .newsTabsAdSectorBottomLeft {
        width: 790px;
        height: 100%;
    }

    .newsTabsAdSectorBottomRight {
        width: 380px;
        height: 100%;

        .adTitle {
            width: 100%;
            height: 30px;
            margin-bottom: 24px;
            margin-top: 5px;

            span {
                display: block;
                width: 144px;
                height: 24px;
                line-height: 24px;
                font-size: 24px;
                font-weight: bold;
                color: #3848a0;
                text-align: center;
                margin: 0px auto;
                border-left: 5px solid #e8edf6;
                border-right: 5px solid #e8edf6;
            }
        }

        .adBox {
            box-sizing: border-box;
            position: relative;
            margin-bottom: 10px;

            img {
                display: block;
                width: 380px;
                height: 148px;
            }

            .templateEditBtnBox {
                right: 0;
            }
        }

        .adBox:last-child {
            margin-bottom: 0;
        }
    }

}
</style>