<template>
    <div class="commentSectorBox">
        <div class="commentSector">
            <div>
                <div class="index_1_top_box">
                    <h4 class="index_1_top_h4">
                        <span>热点关注</span>
                    </h4>
                </div>
            </div>
            <div class="index_left">
                <div class="index_left_in">
                    <div class="index_1">
                        <leftTop1Style 
                            :titleLink="componentTitle" 
                            :templateData="templateData[0].componentData.data" 
                            :componentStyle="templateData[0].component_style" 
                        />
                    </div>
                    <div class="index_2">
                        <leftTop2Style 
                            :titleLink="componentTitle1" 
                            :templateData="templateData[1].componentData.data" 
                            :componentStyle="templateData[1].component_style" 
                        />
                    </div>
                </div>
                <div class="index_3">
                    <leftBottomStyle 
                        :titleLink1="componentTitle2" 
                        :titleLink2="componentTitle3"
                        :componentStyle="templateData[2].component_style"
                        :templateData="templateData[2].componentData.data[0]"
                        :templateData1="templateData[2].componentData.data[1]" 
                    />
                </div>
            </div>
            <div class="index_right">
                <rightStyle 
                    :titleLink="componentTitle4" 
                    :templateData="templateData[3].componentData.data" 
                    :componentStyle="templateData[3].component_style" 
                />
            </div>
        </div>
    </div>
</template>

<script setup>
//左侧上组件1
import leftTop1Style from '~/components/template/component/list/380x520/1.vue'
//左侧上组件2
import leftTop2Style from '~/components/template/component/list/380x520/1_1.vue'
//左侧下组件
import leftBottomStyle from '~/components/template/component/list/790x500/1.vue'
//右侧组件
import rightStyle from '~/components/template/component/list/380x1040/1.vue'
const props = defineProps({
    skinId: Number,//皮肤id
    templateData: Object,//新闻数据
    testData: 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
}
//2号位置
const componentTitle1 = {
    alias: props.templateData[1].componentData.data.alias,
    aLIas_pinyin: props.templateData[1].componentData.data.pinyin,
    is_url: props.templateData[1].componentData.data.is_url ?? 0,//如果is_url为空 则默认为0
    children_count: props.templateData[1].componentData.data.children_count ?? 0,//如果children_count为空 则默认为0
    cid: props.templateData[1].componentData.data.category_id
}
//3号位置-选项卡
const componentTitle2 = {
    alias: props.templateData[2].componentData.data[0].alias,
    aLIas_pinyin: props.templateData[2].componentData.data[0].pinyin,
    is_url: props.templateData[2].componentData.data[0].is_url ?? 0,//如果is_url为空 则默认为0
    children_count: props.templateData[2].componentData.data[0].children_count ?? 0,//如果children_count为空 则默认为0
    cid: props.templateData[2].componentData.data[0].category_id
}
const componentTitle3 = {
    alias: props.templateData[2].componentData.data[1].alias,
    aLIas_pinyin: props.templateData[2].componentData.data[1].pinyin,
    is_url: props.templateData[2].componentData.data[1].is_url ?? 0,//如果is_url为空 则默认为0
    children_count: props.templateData[2].componentData.data[1].children_count ?? 0,//如果children_count为空 则默认为0
    cid: props.templateData[2].componentData.data[1].category_id
}
//4号位置
const componentTitle4 = {
    alias: props.templateData[3].componentData.data.alias,
    aLIas_pinyin: props.templateData[0].componentData.data.pinyin,
    is_url: props.templateData[3].componentData.data.is_url ?? 0,//如果is_url为空 则默认为0
    children_count: props.templateData[0].componentData.data.children_count ?? 0,//如果children_count为空 则默认为0
    cid: props.templateData[3].componentData.data.category_id
}
</script>

<style lang="less" scoped>
.commentSectorBox {
    width: 100%;
    height: 1150px;

    .commentSector {
        width: 1200px;
        height: 1150px;
        margin: 0 auto;
        align-items: flex-start;
        justify-content: space-between;
        box-sizing: content-box;

        .commentSectorLeft {
            width: 790px;
            height: 1038px;

            .commentSectorLeftTop {
                width: 720px;
                height: 300px;
                margin-bottom: 28px;
                position: relative;
                box-sizing: content-box;
            }

            .commentSectorLeftBottom {
                width: 720px;
                height: 620px;
                position: relative;
            }
        }

        .commentSectorRight {
            width: 380px;
            height: 1038px;
            box-sizing: content-box;
            position: relative;
        }
    }
}

.commentSectorLeft {
    display: none;
}

.commentSectorRight {
    display: none;
}

.index_1_top_box {
    height: 42px;
    text-align: center;
    margin: 24px auto 24px;
    width: 100%;
}

.index_1_top_h4 {
    display: inline-block;
    text-align: center;
    position: relative;
    padding: 0px 20px;
    margin: 0px auto;
}

.index_1_top_h4::after {
    content: '';
    position: absolute;
    left: -440px;
    top: 14px;
    height: 20px;
    width: 440px;
    background: url(http://192.168.1.234:19000/pre/image/png/20251223/1766471836846789.png) no-repeat right 0px;
    background-size: auto 100%;
}

.index_1_top_h4::before {
    content: '';
    position: absolute;
    right: -440px;
    top: 14px;
    height: 20px;
    width: 440px;
    background: url(http://192.168.1.234:19000/pre/image/png/20251223/1766471917895279.png) no-repeat left 0px;
    background-size: auto 100%;

}

.index_1_top_box>* {
    text-align: center;
    height: 42px;
    line-height: 42px;
    color: #333;
    font-size: 32px;
    font-weight: normal;
}

.clearfix {
    overflow: hidden;
}

.line_1,
.line_2,
.line_3,
.line_4,
.line_5,
.line_com {
    border: 2px dashed #999;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

.line_1 {
    border-left: none;
    border-top: none;
}

.line_2 {
    border-top: none;
}

.line_3 {
    border-left: none;
    border-bottom: none;
}

.line_4 {
    border-right: none;
    border-top: none;
    border-bottom: none;
}

.line_5 {
    border-right: none;
    border-left: none;
    border-top: none;
}

.index_left {
    float: left;
    width: 790px;
    height: 1045px;
}

.index_right {
    float: right;
    width: 380px;
    height: 1052px;
    overflow: hidden;
}

.index_left_in {
    overflow: hidden;
    width: 100%;
}

.index_1 {
    float: left;
    width: 380px;
    height: 519px;
    position: relative;
    overflow: hidden;
}

.index_2 {
    float: right;
    width: 380px;
    height: 519px;
    overflow: hidden;
    position: relative;
}

.index_3 {
    width: 790px;
    height: 500px;
    margin-top: 26px;
    overflow: hidden;
    position: relative;
}

.index_4 {
    position: relative;
}
</style>
