<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="top-heder">
			<view class="t-left" @click="getback()">
				<uni-icons type="left" size="18"></uni-icons>
			</view>
			<view class="t-title">
				<text>汇报列表</text>
			</view>
			<view class="t-you" @click="showFilterPopup">
				<text>筛选</text>
			</view>
		</view>

		<!-- 搜索栏 -->
		<view class="searchContent">
			<view class="t-input">
				<uni-icons type="search" color="#BCBCBC" size="22"></uni-icons>
				<input type="text" v-model="queryParams.topicOrUserName" placeholder="请输入汇报主题或汇报人">
			</view>
			<view class="sou" @click="search()">搜索</view>
		</view>


		<!-- 汇报列表 -->
		<view class="report-list">
			<view class="report-item" v-for="(item, index) in reportList" :key="index"
				@click="goToEditWriteReport(item.id)">
				<image class="avatar" :src="baseImageUrl + '/' + item.avatar"></image>
				<view class="content">
					<view class="top">
						<view class="name">{{ item.userName }}</view>
						<u-tag :text="item.reportTopic" type="primary" size="mini" class="tag"></u-tag>
					</view>
					<view class="report-time">汇报时间：{{ formatDateTimeToMinute(item.reportTime) }}</view>
				</view>
			</view>
		</view>

		<!-- 筛选弹窗 -->
		<u-popup :show="showPopup" @close="closeFilterPopup" mode="right" closeable="true">
			<view class="filter-popup">
				<view class="popup-header">
					<text>时间筛选</text>
				</view>
				<view style="width: 95%; margin: 5px 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 class="bottom-btn">
			<u-button type="primary" shape="circle" class="report-btn" @click="goToWriteReport">填写汇报</u-button>
		</view>
	</view>
</template>

<script>
	import request from "@/utils/request";
	import {
		formatDate,
		formatDateTimeToMinute
	} from "@/utils/utils";
	import config from "@/config";

	export default {
		data() {
			return {
				reportList: [],
				showPopup: false, // 控制筛选弹窗显示
				// 查询参数
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					reportTopic: null,
					reportTime: [],
					createTime: [],
					userName: null,
					servicePackageId: "jiance",
					dictType: 'ins_high_rise',
					topicOrUserName: '',
				},
				showStarTime: false,
				showEndTime: false,
				baseImageUrl: config.baseImageUrl,
				totalPages: 0,
				reportTimeStr: [],
			};
		},
		onLoad() {
			this.getReportList();
		},
		onReachBottom() {
			if (this.queryParams.pageNo >= this.totalPages) {
				uni.showToast({
					title: '没有下一页数据',
					icon: 'none'
				});
			} else {
				this.queryParams.pageNo++;
				this.getReportList();
			}
		},
		methods: {
			// 打开筛选弹窗
			showFilterPopup() {
				this.showPopup = true;
			},
			// 关闭筛选弹窗
			closeFilterPopup() {
				this.showPopup = false;
			},
			// 应用筛选
			applyFilter() {
				this.closeFilterPopup();
				this.search();
			},
			// 清除时间
			clearTime() {
				this.showPopup = false;
				this.queryParams.reportTime = ['', ''];
				this.reportTimeStr = [];
				this.search();
			},
			formatDateTimeToMinute,
			formatDate,
			// 搜索
			search() {
				this.reportList = [];
				this.queryParams.pageNo = 1;
				this.getReportList();
			},
			// 获取汇报列表
			getReportList() {
				request({
					url: "/work/report/page",
					method: "GET",
					params: this.queryParams,
				}).then((res) => {
					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);
				});
			},
			// 返回上一页
			getback() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 跳转到填写汇报页面
			goToWriteReport() {
				uni.navigateTo({
					url: "/pages/manage/workReport/workReportAdd?type=add"
				});
			},
			// 跳转到编辑汇报页面
			goToEditWriteReport(id) {
				uni.navigateTo({
					url: "/pages/manage/workReport/workReportAdd?type=edit&id=" + id
				});
			},
			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;
				});
			},
		},
	};
</script>

<style scoped>
	.container {
		background-color: #f5f6fa;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}

	/* 筛选弹窗样式 */
	.filter-popup {
		padding: 20rpx;
		width: 450rpx;
		/* 或者设置更大的固定宽度，如 600px */
		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;
	}

	/* 列表样式 */
	.report-list {
		padding: 20rpx;
	}

	.report-item {
		display: flex;
		align-items: center;
		background: #fff;
		padding: 10rpx;
		/* 减少上、下内边距 */
		margin-bottom: 16rpx;
		height: 180rpx;
		/* 调整高度，使整体紧凑 */
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
		border: 1px solid #eaeaea;
	}

	/* 头像 */
	.avatar {
		width: 90rpx;
		height: 90rpx;
		//border-radius: 50%; margin-right: 20rpx; border: 2rpx solid #ddd;
	}

	/* 内容区 */
	.content {
		flex: 1;
		display: flex;
		flex-direction: column;
		/* 改为垂直排列 */
		justify-content: space-between;
		/* 保证内容上下分布 */
		margin-left: 20rpx;
	}

	/* 姓名 + 主题 */
	.top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 0;
		/* 调整顶部间距为0 */
	}

	.name {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}

	/* 主题标签 */
	.tag {
		padding: 4rpx 12rpx;
		font-size: 24rpx;
	}

	/* 汇报时间 */
	.report-time {
		font-size: 26rpx;
		color: #999;
		margin-top: 8rpx;
		/* 保证汇报时间在下面 */
	}

	/* 底部按钮 */
	.bottom-btn {
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 90%;
	}

	.report-btn {
		font-size: 32rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
	}


	.top-heder {
		width: 100%;
		height: 68px;
		background: white;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 5px 15px;
		margin-top: 2rem;
	}

	.t-title {
		font-size: 17px;
		font-weight: bold;
		color: #333333;
	}

	.t-left {
		width: 20%;
		height: 20px;
	}

	.t-you {
		width: 20%;
		height: 20px;
	}

	.t-input {
		width: 75%;
		height: 36px;
		background: #F0F0F0;
		border-radius: 50px;
		box-sizing: border-box;
		padding: 0 15px;
		display: flex;
		align-items: center;
	}

	.sou {
		width: 10%;
		margin-left: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.searchContent {
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
	}


	.time-picker {
		display: flex;
		flex-direction: column;
		/* 添加：使子元素垂直排列 */
		align-items: center;
		padding: 20rpx;
		background: #fff;
		margin: 20rpx 0;
	}

	.picker-item {
		flex: 1;
		display: block;
		/* 修改：改为块级元素 */
		padding: 20rpx;
		background: #f8f8f8;
		border-radius: 12rpx;
		margin: 10rpx 0;
		/* 添加：增加上下间距 */
	}

	.split-line {
		padding: 0 10rpx;
		color: #999;
	}

	.label {
		font-size: 26rpx;
		color: #666;
		margin-right: 15rpx;
	}

	.time-text {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.placeholder {
		color: #999;
	}

	uni-icons {
		margin-left: 10rpx;
	}


	/* 添加清除按钮样式 */
	.clear-btn {
		color: #007AFF;
		font-size: 26rpx;
		margin-left: 20rpx;
		padding: 10rpx 20rpx;
		border: 1rpx solid #007AFF;
		border-radius: 8rpx;
	}
</style>