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

    const currentTab = ref('redian')
    const pageData = reactive({
        params: {
            pageNo: 1,
            pageSize: 10,
            category: 1,
            /* news:{
				category:1
			} */
        }, // 分页参数
        hasMore: true, // 是否还有更多数据
        loading: false, // 是否正在加载
        dataList: [],
    })
    onLoad((options) => {
        if (options && options.category == 1) {
            pageData.params.category = options.category
            currentTab.value = 'redian'
        } else {
            pageData.params.category = 2
            currentTab.value = 'nongye'
        }
    })
    onShow(() => {
        getListData()
    })
    async function getListData() {
        if (pageData.loading) 
return
        pageData.loading = true
        await NewsApi.getList(pageData.params).then((res) => {
            if (res.records.length > 0) {
                const { records } = res
                if (pageData.params.pageNo === 1) {
                    pageData.dataList = records
                } else {
                    pageData.dataList = [...pageData.dataList, ...records]
                }
                pageData.hasMore = records.length === pageData.params.pageSize
                pageData.params.pageNo++
            } else {
                pageData.hasMore = false
            }
        })
        pageData.loading = false
    }
    function toNewsDetail(news) {
        uni.navigateTo({
            url: `/pages/news/detail?id=${news.id}`,
        })
    }
    function switchTab(type) {
        pageData.dataList = []
        pageData.hasMore = true
        pageData.params.pageNo = 1
        currentTab.value = type
        if (type == 'redian') {
            pageData.params.category = 1
            getListData()
        }
        if (type == 'nongye') {
            pageData.params.category = 2
            getListData()
        }
        if (type == 'butie') {
            pageData.params.category = 3
            pageData.dataList = []
        }
    }
</script>

<template>
    <view class="nongyezhengce-page">
        <view class="nongyezhengce-content">
            <scroll-view class="page-content" scroll-y @scrolltolower="getListData()" :show-scrollbar="false">
                <view class="top-tab">
                    <view
                        class="tab-btn"
                        :class="currentTab == 'redian' ? 'tab-active' : ''"
                        @click="switchTab('redian')"
                    >
                        <image
                            class="tab-icon"
                            mode="heightFix"
                            :src="`/static/images/home/${currentTab == 'redian' ? 'redian_active' : 'redian_icon'}.png`"
                        />
                        <text class="tab-text">热点新闻</text>
                    </view>
                    <view
                        class="tab-btn"
                        :class="currentTab == 'nongye' ? 'tab-active' : ''"
                        @click="switchTab('nongye')"
                    >
                        <image
                            class="tab-icon"
                            mode="heightFix"
                            :src="`/static/images/home/${currentTab == 'nongye' ? 'nongye_active' : 'nongye_icon'}.png`"
                        />
                        <text class="tab-text">农业政策</text>
                    </view>
                    <view
                        class="tab-btn"
                        :class="currentTab == 'butie' ? 'tab-active' : ''"
                        @click="switchTab('butie')"
                    >
                        <image
                            class="tab-icon"
                            mode="heightFix"
                            :src="`/static/images/home/${currentTab == 'butie' ? 'butie_active' : 'butie_icon'}.png`"
                        />
                        <text class="tab-text">购置补贴</text>
                    </view>
                </view>
                <view class="list-content">
                    <view v-if="!pageData.dataList || pageData.dataList.length == 0" style="height: 700rpx">
                        <fui-empty marginTop="100" src="/static/images/no-data.png" title="暂无数据" />
                    </view>
                    <view
                        class="content-item"
                        v-for="item in pageData.dataList"
                        :key="item.id"
                        @click="toNewsDetail(item)"
                    >
                        <view class="item-content">{{ item.title }}</view>
                        <view class="item-info">
                            <view class="item-time">{{ dayjs(item.publishDate).format('YYYY-MM-DD') }}</view>
                            <view class="item-views"
                                ><image
                                    class="views-icon"
                                    mode="widthFix"
                                    src="/static/images/home/views_icon.png"
                                /><text>{{ item.viewCount }}</text></view
                            >
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
        <view class="loading-status">
            <text v-if="pageData.loading">加载中...</text>
            <text v-else-if="!pageData.hasMore">没有更多数据了</text>
            <text v-else>上拉加载更多</text>
        </view>
    </view>
</template>

<style scoped lang="scss">
    .nongyezhengce-page {
        background-color: #e6f5e8;
        overflow-y: auto;
    }
    .nongyezhengce-content {
        width: 100vw;
        height: calc(100vh - 88rpx);
        display: flex;
        justify-content: center;
        .page-content {
            width: 690rpx;
            padding-top: 24rpx;
            padding-bottom: 24rpx;
            .top-tab {
                display: flex;
                justify-content: space-between;
                .tab-btn {
                    width: 220rpx;
                    height: 72rpx;
                    border-radius: 9999px;
                    background: #ffffff;
                    color: #333333;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .tab-icon {
                        height: 36rpx;
                        margin-right: 8rpx;
                    }
                    .tab-text {
                        font-size: 28rpx;
                    }
                }
                .tab-active {
                    background: #5db66f;
                    color: #ffffff;
                }
            }
            .list-content {
                margin-top: 4rpx;
            }

            .content-item {
                width: 690rpx;
                border-radius: 8rpx;
                background: #ffffff;
                padding: 20rpx;
                margin-top: 20rpx;
                .item-content {
                    font-size: 28rpx;
                    line-height: 40rpx;
                    text-align: justify;
                    color: #333333;
                }
                .item-info {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 20rpx;
                    color: #666666;
                    font-size: 24rpx;
                    line-height: 40rpx;
                    font-weight: 400;
                    .views-icon {
                        width: 28rpx;
                        margin-right: 8rpx;
                    }
                }
            }
        }
    }
    .loading-status {
        background-color: #e6f5e8;
        text-align: center;
        padding: 20rpx;
        color: #999;
        font-size: 28rpx;
    }
</style>
