<script setup lang="ts">
    import { reactive, ref } from 'vue'
    import * as NewsApi from '@/api/model/news'
    import dayjs from 'dayjs'

    interface News {
        id: number
        title: string
        editor: string
        source: string
        publishDate: string
        posterUrl: string
        viewCount: number
    }
    interface Policy {
        id: number
        title: string
        timestamp: string
        views: number
    }

    const model = reactive({
        params: {
            pageNo: 1,
            pageSize: 10,
        }, // 分页参数
        hasMore: true, // 是否还有更多数据
        loading: false, // 是否正在加载
    })

    const newsList = ref<News[]>([])
    const policyList = ref<Policy[]>([])
    const infoType = ref(0)
    const navigateName = ref(['热点新闻', '农业政策'])

    async function getNewsList(params) {
        if (model.loading) return
        model.loading = true
        NewsApi.getList(params).then((res) => {
            if (res.records.length > 0) {
                const { records } = res
                if (model.params.pageNo === 1) {
                    newsList.value = records
                } else {
                    newsList.value = [...newsList.value, ...records]
                }

                model.hasMore = records.length === model.params.pageSize
                model.params.pageNo++
            } else {
                model.hasMore = false
            }
        })
        model.loading = false
    }
    async function getPolicyList() {}

    function switchNavigate(type: number) {
        infoType.value = type
        uni.setNavigationBarTitle({
            title: navigateName.value[type],
        })
    }

    function toNewsDetail(news) {
        uni.navigateTo({
            url: `/pages/news/detail?id=${news.id}`,
        })
    }

    function resetData() {
        model.params.pageNo = 1
        model.hasMore = true
        model.loading = false
        newsList.value = []
    }

    onPullDownRefresh(() => {
        resetData()
        getNewsList(model.params)
    })

    // onReachBottom(() => {
    //     if (model.hasMore) {
    //         getNewsList(model.params)
    //     }
    // })

    onShow(() => {
        resetData()
        switchNavigate(0)
        getNewsList(model.params)
        getPolicyList()
    })
</script>

<template>
    <view class="w-full h-95vh p-2 bg-#E6F5E8">
        <!-- <view class="tag-box">
            <view class="tag" :class="infoType === 0 ? 'active' : ''" @click="switchNavigate(0)">
                <image :src="infoType === 0 ? '/static/images/news/news-active.png' : '/static/images/news/news.png'" />
                热点新闻
            </view>
            <view class="tag" :class="infoType === 1 ? 'active' : ''" @click="switchNavigate(1)">
                <image :src="infoType === 1 ? '/static/images/news/policy-active.png' : '/static/images/news/policy.png'" />
                农业政策
            </view>
        </view> -->
        <!-- 列表 -->
        <scroll-view
            class="w-full h-full"
            style="font-family: '思源黑体'; font-weight: 400"
            scroll-y
            @scrolltolower="getNewsList(model.params)"
            :show-scrollbar="false"
        >
            <view
                v-for="news in newsList"
                :key="news.id"
                class="w-full h-auto flex flex-row justify-around p-2 bg-#fff border-rd-lg mb-2"
                style="min-height: 120rpx"
                @click="toNewsDetail(news)"
            >
                <view class="flex flex-col justify-between" :style="news.posterUrl ? 'width: 68%' : 'width: 100%'">
                    <view class="ellipsis-multiline text-28 color-#333333">{{ news.title }}</view>
                    <view class="flex flex-row justify-between text-25 color-#686868">
                        <text>{{ dayjs(news.publishDate).format('YYYY年MM月DD日') }}</text>
                        <view class="mr-1 flex-center">
                            <image class="mt-0.5 mr-1 w-30 h-26" src="/static/images/news/views.png" />
                            <view class="flex-center text-24 lh-24rpx">{{ news.viewCount }}</view>
                        </view>
                        <view v-show="!news.posterUrl" class="w-4%"></view>
                    </view>
                </view>
                <view v-show="news.posterUrl" class="w-30% h-120">
                    <image class="w-full h-full border-rd" :src="news.posterUrl" />
                </view>
            </view>
            <!-- 加载状态 -->
            <view class="loading-status">
                <text v-if="model.loading">加载中...</text>
                <text v-else-if="!model.hasMore">没有更多数据了</text>
                <text v-else>上拉加载更多</text>
            </view>
        </scroll-view>
    </view>
</template>

<style lang="less" scoped>
    .tag-box {
        display: flex;
        justify-content: space-around;
        align-items: center;

        .tag {
            width: 45%;
            height: 2.2rem;
            border-radius: 1rem;
            background-color: #fff;
            color: #333;
            text-align: center;
            line-height: 2.2rem;
        }
    }

    .active {
        background-color: #5db66f !important;
        color: #fff !important;
    }

    .loading-status {
        text-align: center;
        padding: 20rpx;
        color: #999;
        font-size: 28rpx;
    }

    .ellipsis-multiline {
        display: -webkit-box; /* 必须 */
        -webkit-box-orient: vertical; /* 垂直排列 */
        -webkit-line-clamp: 2; /* 限制显示3行 */
        overflow: hidden; /* 隐藏超出内容 */
        text-overflow: ellipsis; /* 可选，部分浏览器不生效 */
    }
</style>
