<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)">
                <img :src="infoType === 0 ? '/src/static/images/news/news-active.png' : '/src/static/images/news/news.png'" />
                热点新闻
            </view>
            <view class="tag" :class="infoType === 1 ? 'active' : ''" @click="switchNavigate(1)">
                <img :src="infoType === 1 ? '/src/static/images/news/policy-active.png' : '/src/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 flex flex-row justify-around p-2 bg-#fff border-rd-lg mb-2 h-150"
                @click="toNewsDetail(news)"
            >
                <view class="flex flex-col justify-between" :class="news.image ? 'w-70%' : 'w-full'">
                    <view class="text-28 color-#333333">{{ news.title }}</view>
                    <view class="flex flex-row justify-between text-25 color-#686868">
                        <text>{{ news.publishDate }}</text>
                        <view class="mr-1">
                            <img class="mr-1" src="/src/static/images/news/views.png" />
                            <text>{{ news.viewCount }}</text>
                        </view>
                    </view>
                </view>
                <view v-show="news.image" class="w-30% h-full">
                    <img class="w-full h-full border-rd" :src="news.image" />
                </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>

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

    interface News {
        id: number
        title: string
        editor: string
        source: string
        publishDate: string
        image: 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(['热点新闻', '农业政策'])

    const getNewsList = async (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
    }
    const getPolicyList = async () => {}

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

    const toNewsDetail = (news) => {
        uni.navigateTo({
            url: '/pages/news/detail?id=' + news.id,
        })
    }

    const 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>

<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;
    }
</style>
