<!-- src/pages/zhunongjinrong/zhunongjinrong.vue -->
<script setup lang="ts">
    import { reactive, ref } from 'vue'
	import successfulDialog from '@/components/ConfirmDialog/successfulDialog.vue';
	import { getCurrentDateTime } from '@/utils/date'
	import * as NewsApi from '@/api/model/news'
	import dayjs from 'dayjs'
	let currentTab = ref('redian');
	const pageData = reactive({
	    params: {
	        pageNo: 1,
	        pageSize: 10,
			news:{
				category:1
			}
	    }, // 分页参数
	    hasMore: true, // 是否还有更多数据
	    loading: false, // 是否正在加载
		dataList:[]
	})
	onLoad((options) => {
		if(options && options.category){
			pageData.params.news.category = options.category;
			currentTab.value = 'redian';
		}else{
			pageData.params.news.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.news.category = 1;
			getListData();
		}
		if(type == 'nongye'){
			pageData.params.news.category = 2;
			getListData();
		}
		if(type == 'butie'){
			pageData.params.news.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>
