<template>
	<view class="content">
		<view class="top-rail"></view>
		<view class="page-top" :style='{ justifyContent: "center" }'>

			<!-- 返回上一级页面信息 -->
			<view class='go-back-page' @click='pageBack'>返回</view>

			<!-- 人员/车辆/我的组件显示的表头信息 -->
			<view class="other-title-class">
				工作汇报
			</view>
		</view>

		<view class="top_">
			<view class="search_box">
				<u-search placeholder="请输入汇报人姓名或汇报主题进行搜索" @search="getReportList" @clear="getReportList"
					:showAction="false" searchIconColor="#427FFE" v-model="queryParams.topicOrUserName">
				</u-search>
				<text @click="showFilterPopup" class="filter-btn">筛选</text> <!-- 筛选按钮放在这里 -->
			</view>
		</view>

		<view class="container">
			<scroll-view scroll-y="true" class="tap_box" style="height: calc(100vh - 260px)"
				@scrolltolower="loadMoreData" @refresherrefresh="refreshList" :refresher-triggered="refresherTriggered"
				refresher-enabled>
				<view class="c_box" v-for="(item,index) in reportList" :key="index" @click="goDetails(item)">
					<view class="c_ds" style="margin-bottom: 15px;">
						<view class="touxiang_">
							<image :src="baseImageUrl + '/' + item.avatar" mode="" v-if="item.avatar"></image>
							<image src="/static/imgs/yh2.png" mode="" v-else></image>
						</view>
						<view class="name_">{{ item.userName }}</view>
						<view class="icon_">{{ item.reportTopic }}</view>
					</view>
					<view class="c_ds">
						<view class="" style="color: #8D90A6;">汇报时间：</view>
						<view class="">{{ formatDateChinese(item.reportTime) }}</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view style="width: 100%; height: 60px; "></view>

		<view class="bottom_" @click="goDetails()">
			<view class="bottom_box">填写汇报</view>
		</view>

		<!-- 筛选弹窗 -->
		<u-popup :show="showPopup" @close="closeFilterPopup" mode="right">
			<view class="filter-popup">
				<view class="popup-header">
					<text>时间筛选</text>
				</view>
				<view style="width: 95%; margin: 50px auto;">
					<uni-datetime-picker v-model="queryParams.reportTime" type="daterange" />
				</view>
				<view class="popup-footer">
					<u-button type="primary" @click="applyFilter">应用筛选</u-button>
					<u-button type="default" @click="clearTime">清除时间</u-button>
				</view>
			</view>
		</u-popup>

		<u-datetime-picker :show="showStarTime" v-model="queryParams.reportTime[0]" mode="date"
			@cancel="showStarTime = false" @confirm="selectStartTime"></u-datetime-picker>

		<u-datetime-picker :show="showEndTime" v-model="queryParams.reportTime[1]" mode="date"
			@cancel="showEndTime = false" @confirm="selectEndTime"></u-datetime-picker>
	</view>
</template>

<script>
	import VNavigationBarVue from '../../components/VNavigationBar.vue';
	import config from "@/config";
	import {
		formatDate,
		formatDateChinese,
		formatDateTimeToMinute
	} from "@/utils/utils";
	import request from "@/utils/request";

	export default {
		data() {
			return {
				titles: "汇报列表",
				List: [],
				show: false,
				status: 'loading',
				reportList: [],
				showPopup: false, // 控制筛选弹窗显示
				// 查询参数
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					reportTopic: null,
					reportTime: [],
					createTime: [],
					userName: null,
					servicePackageId: "jiuyuan",
					dictType: 'rescue_high_rise',
					topicOrUserName: '',
				},
				isLoading: false,
				refresherTriggered: false,
				showStarTime: false,
				showEndTime: false,
				baseImageUrl: config.baseImageUrlNew,
				totalPages: 0,
				reportTimeStr: [],
			}
		},
		components: {
			VNavigationBarVue
		},
		onLoad() {
			this.getReportList();
		},
		onShow() {
			this.getReportList();
		},
		onPullDownRefresh() {
			this.queryParams.pageNo = 1;
			this.getReportList();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			if (this.queryParams.pageNo >= this.totalPages) {
				uni.showToast({
					title: '没有下一页数据',
					icon: 'none'
				})

			} else {
				this.queryParams.pageNo++
				this.getReportList()
			}
		},
		methods: {
			formatDateChinese,
			formatDateTimeToMinute,
			// 获取汇报列表
			async getReportList() {
				if (this.isLoading) return;
				this.isLoading = true;
				try {
					const res = await request({
						url: "/work/report/page",
						method: "GET",
						params: this.queryParams,
					});
					if (this.queryParams.pageNo != 1) {
						this.reportList = this.reportList.concat(res.data.records);
					} else {
						this.reportList = res.data.records;
					}
					let total = res.total;
					this.totalPages = Math.ceil(total / this.queryParams.pageSize);
				} catch (e) {
					console.error("请求失败", e);
				} finally {
					this.isLoading = false;
				}
			},
			goDetails(data) {
				if (!data) {
					uni.navigateTo({
						url: '/pages/internal/reportDetals'
					})
				} else {
					console.log('id', data)
					uni.navigateTo({
						url: '/pages/internal/reportDetals?id=' + data.id
					})
				}
			},

			// 筛选
			// 搜索
			search() {
				this.reportList = [];
				this.queryParams.pageNo = 1;
				this.getReportList();
			},
			// 打开筛选弹窗
			showFilterPopup() {
				this.showPopup = true;
			},
			// 关闭筛选弹窗
			closeFilterPopup() {
				this.showPopup = false;
			},
			// 应用筛选
			applyFilter() {
				this.closeFilterPopup();
				this.search();
			},
			// 清除时间
			clearTime() {
				this.showPopup = false;
				this.queryParams.reportTime = ['', ''];
				this.reportTimeStr = [];
				this.search();
			},
			selectStartTime() {
				//加延时器
				this.$nextTick(() => {
					this.queryParams.reportTime[0] = formatDate(this.queryParams.reportTime[0]);
					this.reportTimeStr[0] = this.queryParams.reportTime[0]
					this.showStarTime = false;
				});

			},
			selectEndTime() {
				this.$nextTick(() => {
					this.queryParams.reportTime[1] = formatDate(this.queryParams.reportTime[1]);
					this.reportTimeStr[1] = this.queryParams.reportTime[1]
					this.showEndTime = false;
				});
			},
			pageBack() {
				uni.navigateBack({
					delta: 1 // delta值为1时表示返回的页面层数
				});
			},

			loadMoreData() {
				if (this.queryParams.pageNo >= this.totalPages || this.isLoading) {
					return;
				}
				this.queryParams.pageNo++;
				this.getReportList();
			},

			async refreshList() {
				if (this.isLoading) return;
				this.queryParams.pageNo = 1;
				this.refresherTriggered = true;
				this.reportList = []; // 清空列表
				try {
					await this.getReportList();
				} finally {
					this.refresherTriggered = false;
				}
			},

		}

	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		box-sizing: border-box;
		background: #f4f5f6;
		// background: #55aaff;
		height: 100vh;
	}

	.container {
		box-sizing: border-box;
		padding: 30rpx;
		background: #f4f5f6;
	}

	.search_box {
		box-sizing: border-box;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #F5F5F5;
		display: flex;
		align-items: center;
	}

	.top_ {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;
		background: #fff;
		padding-bottom: 0px;
	}

	.filter-btn {
		font-size: 28rpx;
		color: #427FFE;
		margin-left: 20rpx;
		cursor: pointer;
	}

	.c_box {
		width: 100%;
		background: #fff;
		box-sizing: border-box;
		padding: 20px;
		margin-bottom: 30rpx;
	}

	.c_ds {
		display: flex;
		align-items: center;
	}

	.touxiang_ {
		width: 90rpx;
		height: 90rpx;
		margin-right: 20rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.name_ {
		font-size: 32rpx;
		color: #101A3E;
		margin-right: 20rpx;
	}

	.icon_ {
		background: #eaf2fe;
		box-sizing: border-box;
		padding: 5rpx 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 16rpx;
		color: #427FFE;
	}

	.bottom_ {
		width: 100%;
		height: 158rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -1rpx 24rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 15px 15px 0px 0px;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bottom_box {
		width: 600rpx;
		height: 78rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #fff;
		background: #427FFE;
		border: 2rpx solid #427FFE;
		border-radius: 50px;
		margin: 30rpx;
	}

	.filter-popup {
		padding: 20rpx;
		width: 450rpx;
		max-width: 90%;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
		margin-top: 70rpx;
	}

	.popup-footer {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.top-rail {
		height: 60rpx;
		width: 100%;
		background-color: #054DF3;
	}

	.page-top {
		flex-shrink: 0;
		width: 100%;
		height: 160rpx;
		display: flex;
		align-items: center;
		color: white;
		flex-shrink: 0;
		background: linear-gradient(180deg, #054DF3 0%, #55A3FF 100%);

		.go-back-page {
			position: absolute;
			left: 20rpx;
		}
	}
</style>