<template>
    <div class="listBigBox">
        <div class="listBox">
            <div class="listRouterBox">
                <templateBreadcrumb :routeId="routeId" />
            </div>
            <div class="listContentBox">
                <div class="listContentBoxLeft">
                    <!--列表样式1 列表无需判断皮肤-->
                    <div v-if="templateData[0].component_style.toString()=='1'">
                        <list1Style :listData="newsList" :skinId="skinId"/>
                    </div>
                    <!--列表样式2 列表无需判断皮肤-->
                    <div v-if="templateData[0].component_style.toString()=='2'">
                        <list2Style :listData="newsList" :skinId="skinId"/>
                    </div>
                    <!--列表样式3 列表无需判断皮肤-->
                    <div v-if="templateData[0].component_style.toString()=='3'">
                        <list3Style :listData="newsList" :skinId="skinId"/>
                    </div>
                    <!--列表样式4 列表无需判断皮肤-->
                    <div v-if="templateData[0].component_style.toString()=='4'">
                        <list4Style :listData="newsList" :skinId="skinId"/>
                    </div>
                </div>
                <div class="listContentBoxRight">
                    <div class="listContentBoxRightTop">
                        <div v-if="skinId==1">
                            <news1style :componentStyle="templateData[1].component_style"/>
                        </div>
                        <div v-if="skinId==2">
                            <news2style :componentStyle="templateData[1].component_style"/>
                        </div>
                        <div v-if="skinId==3">
                            <news3style :componentStyle="templateData[1].component_style"/>
                        </div>
                        <div v-if="skinId==4">
                            <news4style :componentStyle="templateData[1].component_style"/>
                        </div>
                    </div>
                    <div class="listContentBoxRightBottom">
                        <div v-if="skinId==1">
                            <hotNews1style :componentStyle="templateData[2].component_style"/>
                        </div>
                        <div v-if="skinId==2">
                            <hotNews2style :componentStyle="templateData[2].component_style"/>
                        </div>
                        <div v-if="skinId==3">
                            <hotNews3style :componentStyle="templateData[2].component_style"/>
                        </div>
                        <div v-if="skinId==4">
                            <hotNews4style :componentStyle="templateData[2].component_style"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="paginationBox">
                <div :class="'paginationBoxLeft paginatioStyle' + skinId">
                    <el-pagination 
                        size="small" 
                        background 
                        layout="prev, pager, next" 
                        :total="pageData.total" 
                        :page-size="pageData.pageSize" 
                        :current-page="pageData.pageNum" 
                        prev-text="上一页" 
                        next-text="下一页"
                        @current-change="changePage"
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
//引入vue
import {ref} from 'vue';
import {ElPagination} from 'element-plus';
//引入面包屑路径组件
import templateBreadcrumb from '@/components/template/component/public/breadcrumb.vue'
//引入列表组件
import list1Style from '@/components/template/component/list/900x1050/1.vue'
import list2Style from '@/components/template/component/list/900x1050/2.vue'
import list3Style from '@/components/template/component/list/900x1050/3.vue'
import list4Style from '@/components/template/component/list/900x1050/4.vue'
//最新资讯
import news1style from '@/components/template/component/list/270x450/1.vue'
import news2style from '@/components/template/component/list/270x450/2.vue'
import news3style from '@/components/template/component/list/270x450/3.vue'
import news4style from '@/components/template/component/list/270x450/4.vue'
//热点精选
import hotNews1style from '@/components/template/component/list/270x580/1.vue'
import hotNews2style from '@/components/template/component/list/270x580/2.vue'
import hotNews3style from '@/components/template/component/list/270x580/3.vue'
import hotNews4style from '@/components/template/component/list/270x580/4.vue'
const props = defineProps({
    skinId: Number,//皮肤id
    templateData:Object,//新闻数据
    routeId: Number,//导航池id
    pageData:Object,//分页数据
    newsList:Object,//新闻列表
});
//分页事件
let changePage = (value) => {
    const targetSegment = getRoutePath(1);
    props.pageData.pageNum = value;
    console.log("当前页码", value);
    navigateTo(`/${targetSegment}/list-${value}.html`)
}
//页面数据---------------------------------------->
</script>

<style lang="less" scoped>
//列表基本样式 start ---------------------------------------->
.listBigBox{
    width: 100%;
    height: 1220px;
    margin-bottom: 30px;
    .listBox{
        width: 1200px;
        height: 1220px;
        margin: 0 auto;
        .listRouterBox{
            height: 52px;
            border-bottom: 1px solid #D9D9D9;
        }
        .listContentBox {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-top: 17px;
            .listContentBoxLeft {
                width: 900px;
                height: 1050px;
                position: relative;
            }
            .listContentBoxRight {
                width: 270px;
                height: 1050px;
                .listContentBoxRightTop {
                    width: 270px;
                    height: 440px;
                    margin-bottom: 30px;
                    position: relative;
                }
                .listContentBoxRightBottom {
                    width: 270px;
                    height: 580px;
                    position: relative;
                }
            }
        }
        .paginationBox {
            height: 100px;
            .paginationBoxLeft {
                width: 900px;
                height: 100px;
                //padding-top: 33px;
                box-sizing: border-box;
                text-align: center;
            }
        }
    }
}
//列表基本样式 end ---------------------------------------->

//分页基本样式 start ---------------------------------------->
.paginationBoxLeft {
    width: 800px;
    height: 34px;
    margin-left: 141px;
    display: flex;
    justify-content: center;
    margin: 0;
    .el-pagination.is-background::v-deep .btn-next,
    .el-pagination.is-background::v-deep .btn-prev {
        width: 70px;
        height: 34px;
        margin: 0px 10px;
        border-radius: 4px;
    }
    .el-pagination.is-background::v-deep .el-pager li {
        margin: 0px 10px;
        width: 38px;
        height: 34px;
        border-radius: 4px;
    }
    .el-pagination.is-background::v-deep .btn-next.is-active,
    .el-pagination.is-background::v-deep .btn-prev.is-active,
    .el-pagination.is-background::v-deep .el-pager li.is-active {
        color: #fff;
    }
}
//分页基本样式 end ---------------------------------------->

//分页样式1 start ---------------------------------------->
.paginatioStyle1 {
    .el-pagination::v-deep :hover {
        color: #004564;
    }
    .el-pagination.is-background::v-deep .btn-next.is-active,
    .el-pagination.is-background::v-deep .btn-prev.is-active,
    .el-pagination.is-background::v-deep .el-pager li.is-active {
        background-color: #004564;
    }
}
//分页样式1 end ---------------------------------------->

//分页样式2 start ---------------------------------------->
.paginatioStyle2 {
    .el-pagination::v-deep :hover {
        color: #A91B33;
    }
    .el-pagination.is-background::v-deep .btn-next.is-active,
    .el-pagination.is-background::v-deep .btn-prev.is-active,
    .el-pagination.is-background::v-deep .el-pager li.is-active {
        background-color: #A91B33;
    }
}
//分页样式2 end ---------------------------------------->
</style>