<template>
	<view class="page_body">
		<!-- 头部 -->
		<nav-bar :height="state.reviewStatus=='1'?'224':'312'" :title="state.honorTypeName" :tabList="state.tabList" :onlyTitle="false" :showHeadSearchInput="false" :showFilterPicker="false" :showTabs="state.reviewStatus=='1'?false:true" :showTabBtns="false" rightWidth="0rpx" @CommonFilterData="CommonFilterData" @GoBack="GoBack">
			<template #tabs_top_content>
				<!-- 搜索框单独一行 -->
				<view class="nav_head row_search_box">
					<uni-easyinput class="search_box" v-model="state.searchWord" trim="all" :styles="state.searchInputStyles"
						:placeholderStyle="state.searchInputPlaceholderStyle" placeholder="请输入关键字搜索" @input="HandleSearchInput">
						<template #left>
							<image src="@/static/image/overview/search.png" class="search_icon"></image>
						</template>
					</uni-easyinput>
				</view>
			</template>
		</nav-bar>
		<view :class="['page_content',{'no_review':state.reviewStatus=='1'}]">
			<scroll-view
			    class="scroll_view_y"
				:scroll-top="state.scrollTop"
				scroll-y="true"
				:refresher-enabled="false" 
				:enable-back-to-top="true"
				:show-scrollbar="false" 
				:scroll-with-animation="true" 
				refresher-default-style="none"
				refresher-background="#F8F9FD" 
				:refresher-triggered="state.isRefreshing" 
				@scrolltolower="OnLoadMore"
				@refresherrefresh="OnRefresh"
				@scroll="OnScroll">
				<view class="refresh_loading" v-if="state.isRefreshing"><uni-load-more status="loading" /></view>
				<view class="page_list">
					<view class="list_item" v-for="item in state.pageList" :key="item.id" @click="PreviewHonorDetail(item.id,item?.honorTypeDictBOS?.[1]?.name)">
						<view class="list_item_top">
							<image class="pic" mode="aspectFit" :src="item?.picUrls?.[0]"></image>
							<view class="title">{{item?.honorTypeDictBOS?.[1]?.name}}</view>
						</view>
						<view class="name_time">
							<view class="name">获奖人：{{item?.honorTypeDictBOS?.[0]?.name}}</view>
							<view class="time">{{item?.honorTypeDictBOS?.[2]?.name}}</view>
						</view>
					</view>
				</view>
				<view class="no_data" v-if="!state.isLoading && state.pageList.length == 0">
					<image class="no_data_img" src="@/static/image/bg/no_data.png"></image>
					<text class="no_data_text">暂无数据</text>
				</view>
				<uni-load-more v-if="state.pageList.length > 0" :status="state.loadStatus" />
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import navBar from '@/components/navBar.vue';
	import {queryHonorTableDataList} from '@/reqApi/teacherHonor.js';
	import {
		reactive,
		nextTick
	} from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	const state = reactive({
		tabList:[{
			label:'已审核',
			value:'1',
		},{
			label:'待审核',
			value:'0',
		},{
			label:'已驳回',
			value:'2',
		}],
		searchWord:'',//搜索
		searchInputStyles: { //搜索框样式
			borderColor: '#DCDFE6',
			color: '#333333'
		},
		searchInputPlaceholderStyle: 'color: #C0C4CC;fontSize: 28rpx', //搜索框样式
		pageLists:[],//全部数据
		pageList:[],//列表数据
		honorTypeId: '',//荣誉类型id
		honorTypeName:'',//荣誉类型名称
		reviewStatus:'0',//0 需审核 1无审核
		honorStatus:'1',//审核状态
		pageSize: 30,
		pageNum: 1,
		pages:0,
		scrollTop:0,
		oldScrollTop:0,
		isRefreshing:false,//设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
		isLoading:true,//加载中
		noMoreData:false,//没有更多数据了
		loadStatus:'more',//loading状态
	})
	onLoad((option) => {
		state.honorTypeId = option.honorTypeId;
		state.reviewStatus = option.reviewStatus;//0 需审核 1无审核
		if(state.reviewStatus=='1'){
			state.tabList = [];
		}
		state.honorTypeName = decodeURIComponent(option.honorTypeName);
		OnLoadData(true);
	});
	//切换条件选择器
	const CommonFilterData = (filterOptions,type) => {
		const { tabsSelected } = filterOptions;
		state.honorStatus = tabsSelected;
		OnLoadData(true)
	}
	//搜索
	const HandleSearchInput = (e) => {
		state.searchWord = e;
		OnLoadData(true)
	}
	/*
	*获取数据
	* initPage:初始分页 从第一开始
	* honorTypeId  -- 荣誉类型id
	* honorStatus--  0 待审核  1 已审核  2已驳回
	* queryStr: "", 
	* dictValueIds   --查询条件中 ，下拉选选择中的明细的id数组
	* startDate ---  获奖开始时间 
	* endDate: ""
	*/
	const OnLoadData = (initPage) => {
		state.isLoading = true;
		state.loadStatus = 'loading';
		if (initPage) {
			// uni.showLoading({
			// 	title: '加载中'
			// });
			state.pageNum = 1;//如果是下拉刷新、重新查询 默认加载第一页
			queryHonorTableDataList({
				dictNameIds:[],
				dictValueIds:[],
				honorTeacherIds:[],
				honorTypeId:state.honorTypeId,//荣誉类型id
				honorStatus:state.reviewStatus=='1'?'':state.honorStatus,//审核状态
				queryStr:state.searchWord,
				startDate:'',
				endDate:''
			}).then(res=>{
				if(res.code == 200){
					const tableData = res?.data?.tableDataList || [];
					state.pageLists = tableData;//全部数据
					const total = tableData?.length || 0;//总数
					state.pages = Math.ceil(total / state.pageSize);//总页数
					//默认加载
					state.pageList = state.pageLists.slice(0, state.pageSize);
					console.log(state.pageList,12121)
					//没有更多了
					state.noMoreData = state.pageNum == state.pages;
					//分页+1
					state.pageNum++;
					state.isLoading = false;
					state.isRefreshing = false;//下拉刷新未被触发
					state.loadStatus = state.noMoreData?'no-more':'more';
				}
			}).finally(()=>{
				// uni.hideLoading();
				//返回到页面顶部
				if(initPage){
					GoTop();
				}
			})
		}else{
			const start = (state.pageNum - 1) * state.pageSize;
			const end = start + state.pageSize;
			const list = state.pageLists.slice(start, end);
			state.pageList = [...state.pageList, ...list];
			state.noMoreData = state.pageNum == state.pages;
			state.pageNum++;
			setTimeout(() => {
				state.isLoading = false;
				state.isRefreshing = false; //下拉刷新未被触发
				state.loadStatus = state.noMoreData?'no-more':'more';
			}, 0)
		}
	}
	// 自定义下拉刷新被触发	 下拉刷新
	const OnRefresh = () =>{
		state.isRefreshing = true;//下拉刷新已经被触发
		OnLoadData(true);
	}
	//滚动到底部/右边 触发上拉刷新
	const OnLoadMore = () => {
		if (state.isLoading || state.noMoreData) return;
		OnLoadData(false);
	}
	//	滚动时触发
	const OnScroll = (e) => {
		state.oldScrollTop = e.detail.scrollTop;
	}
	//返回到顶部
	const GoTop = () => {
		// 解决view层不同步的问题
		state.scrollTop = state.oldScrollTop;
		nextTick(() => {
			state.scrollTop = 0
		});
	}
	//返回
	const GoBack = () => {
		uni.navigateBack({
			delta: 1
		});
	}
	const PreviewHonorDetail = (id,honorName) => {
		uni.navigateTo({
			url: `/pages/teacherHonor/honorAudit/teacherDetail?id=${id}&pageTitle=${honorName}&pageFoot=0`
		});
	}
</script>

<style lang="scss" scoped>
	.page_body{
		height: 100%;
		min-height: auto;
		.row_search_box{
			height: 96rpx;
			align-items: flex-start;
		}
		:deep(.scroll_tabs){
			margin-top: 32rpx;
		}
		.page_content{
			height: calc(100% - 312rpx);
			&.no_review{
				height: calc(100% - 224rpx);
			}
			.scroll_view_y{
				height: 100%;
				.refresh_loading{
					padding: 10rpx 0;
				}
			}
			.page_list{
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				gap: 24rpx 22rpx;
				.list_item{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: calc((100% - 22rpx) / 2);
					padding: 6rpx 14rpx 24rpx;
					background-color: #F8F9FD;
					border-radius: 20rpx;
					box-sizing: border-box;
					.list_item_top{
						display: flex;
						flex-direction: column;
						.pic{
							width: 100%;
							height: 198rpx;
							border-radius: 8rpx;
						}
						.title{
							width: 100%;
							font-weight: 500;
							font-size: 28rpx;
							margin-top: 8rpx;
							color: #333333;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
					.name_time{
						width: 100%;
						display: flex;
						margin-top: 16rpx;
						font-weight: 400;
						font-size: 20rpx;
						color: #333333;
						.name{
							flex:1;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.time{
							flex-shrink: 0;
						}
					}
				}
			}
		}
	}
</style>