<template>
    <div class="page">
        <div class="contet">
            <div class="news-info" v-for="item in list" :key="item.id" @click="goDetail(item)">
                <div class="text1">{{ item.title }}</div>
                <div class="text2">{{ item.createdAt }}</div>
            </div>
            <div class="pagination">
                <el-pagination
                    v-model:current-page="page"
                    layout="prev, pager, next"
                    :total="totalElements"
                    @current-change="changePage"
                    background
                />
            </div>
        </div>
    </div>
</template>

<script setup>
import useList from '@/plugins/list'
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'

const { page, empty, loading, finished, list, getData, totalElements } = useList('/news/all', () => {
    return {
        query: {
            del: false
        },
        sort: 'id,desc'
    }
})
onMounted(() => {
    getData(true)
})

function changePage() {
    getData()
    document.getElementById('app').scroll({
        top: 0,
        behavior: 'smooth'
    })
}

const router = useRouter()
function goDetail(info) {
    router.push({
        path: '/newsDetail',
        query: {
            id: info.id
        }
    })
}
</script>

<style lang="less" scoped>
.page {
    background-color: #f3f3f3;
    box-sizing: border-box;
    padding: 39px 135px 0;
}

.contet {
    background-color: #fff;
}

.news-info {
    height: 148px;
    .f();
    padding: 0 89px 0 100px;
    justify-content: space-between;
    cursor: pointer;
    .text1 {
        font-size: 30px;
        font-weight: bold;
        color: #11140a;
        line-height: 29px;
        flex-grow: 1;
        margin-right: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .text2 {
        font-size: 30px;
        color: #999999;
        line-height: 29px;
        flex-shrink: 0;
    }

    &:not(:last-child) {
        border-bottom: 1px solid #f8f8f8;
    }
}

.pagination {
    padding: 80px 0 156px;
    .f();
    justify-content: center;

    // .el-pagination{
    //     --el-pagination-hover-color
    // }
}

@media screen and(max-width:1600px) {
    .page {
        padding: 39px 60px;
    }
}
</style>
