<template>
    <div class="listBigBox">
        <div class="listBox">
            <div class="listRouterBox">
                <templateBreadcrumb :routeId="routeId" />
            </div>
            <div class="listContentBox">
                <div class="listContentBoxLeft">
                    <!-- 列表样式5 -->
                    <div v-if="skinId == 5">
                        <list5Style :listData="newsList" :componentStyle="templateData[0].component_style" />
                    </div>
                </div>
                <div class="listContentBoxRight">
                    <div class="listContentBoxRightTop">
                        <div v-if="skinId == 5">
                            <news5style :componentStyle="templateData[1].component_style" />
                        </div>
                    </div>
                    <div class="listContentBoxRightBottom">
                        <div v-if="skinId == 5">
                            <hotNews5style :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 list5Style from '@/components/template/component/list/900x2250/1.vue'
//最新资讯
import news5style from '@/components/template/component/list/270x450/5.vue'
//热点精选
import hotNews5style from '@/components/template/component/list/270x580/5.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: 2250px;
    margin-bottom: 30px;

    .listBox {
        width: 1200px;
        height: 2250px;
        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: 2080px;
                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;
                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 ---------------------------------------->

//分页样式5 start ---------------------------------------->
.paginatioStyle5 {
    .el-pagination::v-deep :hover {
        color: #3848a0;
    }

    .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: #3848a0;
    }
}

//分页样式5 end ---------------------------------------->
</style>