<template>
    <div class="listBigBox">
        <div class="listBox">
            <div class="listRouterBox">
                <templateBreadcrumb :routeId="routeId" />
            </div>
            <div class="listContentBox">
                <div class="listContentBoxLeft">
                    <div v-if="templateData.componentList[0].component_style == 2">
                        <list1Style :listData="listData" :skinId="skinId"/>
                    </div>
                    <div v-if="templateData.componentList[0].component_style == 1">
                        <list2Style :listData="listData" :skinId="skinId"/>
                    </div>
                </div>
                <div class="listContentBoxRight">
                    <div class="listContentBoxRightTop">
                        <div v-if="templateData.componentList[1].component_style == 1">
                            <news1style :templateData="templateData.componentList[1].data" :skinId="skinId"/>
                        </div>
                        <div v-if="templateData.componentList[1].component_style == 2">
                            <news2style :templateData="templateData.componentList[1].data" :skinId="skinId"/>
                        </div>
                    </div>
                    <div class="listContentBoxRightBottom">
                        <div v-if="templateData.componentList[2].component_style == 1">
                            <hotNews1style :templateData="templateData.componentList[2].data" :skinId="skinId"/>
                        </div>
                        <div v-if="templateData.componentList[2].component_style == 2">
                            <hotNews2style :templateData="templateData.componentList[2].data" :skinId="skinId"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="paginationBox">
                <div class="paginationBoxLeft">
                    <el-pagination 
                        size="small" 
                        background 
                        layout="prev, pager, next" 
                        :total="100" 
                        :page-size="pageSize" 
                        :current-page="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 news1style from '@/components/template/component/list/270x450/1.vue'
import news2style from '@/components/template/component/list/270x450/2.vue'
//热点精选
import hotNews1style from '@/components/template/component/list/270x580/1.vue'
import hotNews2style from '@/components/template/component/list/270x580/2.vue'

const props = defineProps({
    skinId: Number,//皮肤id
    templateData:Object,//新闻数据
    routeId: Number,//导航池id
});

const listData = {
    "code": 200,
    "message": "success",
    "data": {
        "rows": [
            {
                "id": 2863,
                "title": "1以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                "islink": 0,
                "linkurl": "",
                "pinyin": "nongminxinnongcun/nongcunxinfangshe",
                "updated_at":"2025-07-19 10:00:00"
            },
            {
                "id": 50129,
                "title": "2以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                "islink": 0,
                "linkurl": "",
                "pinyin": "sannongzixun",
                "updated_at":"2025-07-19 10:00:00"
            },
            {
                "id": 50129,
                "title": "3以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                "islink": 0,
                "linkurl": "",
                "pinyin": "sannongzixun",
                "updated_at":"2025-07-19 10:00:00"
            },
            {
                "id": 2862,
                "title": "4以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                "islink": 0,
                "pinyin": "sannongzixun/buweidongtai",
                "updated_at":"2025-07-19 10:00:00"
            },
            {
                "id": 50126,
                "title": "5以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                "islink": 0,
                "pinyin": "sannongzixun",
                "updated_at":"2025-07-19 10:00:00"
            },
            {
                "id": 3976,
                "title": "6以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                "islink": 0,
                "pinyin": "sannongzixun",
                "updated_at":"2025-07-19 10:00:00"
            },
            {
                "id": 50189,
                "title": "7以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                "islink": 0,
                "pinyin": "nongminhezuoshe",
                "updated_at":"2025-07-19 10:00:00"
            },
            {
                "id": 50190,
                "title": "8以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                "islink": 0,
                "pinyin": "nongminhezuoshe",
                "updated_at":"2025-07-19 10:00:00"
            }
        ],
        "count": 100
    }
}

//页面数据 ---------------------------------------->
// let pageNum = ref(2); //当前页码
// pageNum.value = parseInt(route.params.id);//路由中传递的分页页码
// let total = ref(1); //总条数
// let pageSize = ref(20); //每页条数

// //新闻列表
// const newsList = ref([]);
// let newslists = async () => {
//     const listData = await requestDataPromise('/web/getWebsiteArticleList', {
//         method: 'GET',
//         query: {
//             'page': pageNum.value,
//             'pageSize': pageSize.value,
//             'catid': articleId
//         },
//     });
//     if (listData.code == 200) {
//         newsList.value = listData.data.rows;
//         total.value = listData.data.count;

//     } else {
//         console.log("错误位置：获取新闻列表")
//     }
// }
// //获得列表
// newslists();

// //分页事件
// let changePage = (value) => {
//     console.log("当前页码", value);
//     navigateTo(`/${targetSegment}/list-${value}.html`)
// }
//页面数据---------------------------------------->
</script>

<style lang="less" scoped>
.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: center;
            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;
            }
        }
    }
}
.paginationBoxLeft {
    width: 800px;
    height: 34px;
    margin-left: 141px;
    display: flex;
    justify-content: center;
    margin: 0;
    // 鼠标移入后字体颜色
    .el-pagination::v-deep :hover {
        color: #004564;
    }
    .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 {
        background-color: #004564;
        color: #fff;
    }
}
</style>