<template>
	<view class="attendance-page">

		<view class="header">
			<text class="title">我的考勤记录</text>
			<picker mode="selector" :range="timeRanges" @change="onTimeRangeChange">
				<view class="picker">
					{{ selectedTimeRange }}/切换
				</view>
			</picker>
		</view>

		<!-- 数据统计区域 -->
		<view class="statistics" :class="{'show': chartShow}">
			<view class="statistic-card">
				<view class="statistic-title">考勤统计</view>
				<view class="statistic-item">
					<view>
						<text class="ygoa-icon icon-attendance"></text>
						<text class="label">出勤:</text>
					</view>
					<text class="value">{{ attendanceCount }}</text>
				</view>
				<view class="statistic-item">
					<view>
						<text class="ygoa-icon icon-leave"></text>
						<text class="label">请假:</text>
					</view>
					<text class="value">{{ leaveCount }}</text>
				</view>
				<view class="statistic-item">
					<view>
						<text class="ygoa-icon icon-businessTrip"></text>
						<text class="label">出差:</text>
					</view>

					<text class="value">{{ businessTripCount }}</text>
				</view>
				<view class="statistic-item">
					<view>
						<text class="ygoa-icon icon-clockIn1"></text>
						<text class="label">打卡:</text>
					</view>
					<text class="value">{{ clockInCount }}</text>
				</view>
				<view class="statistic-item">
					<view>
						<text class="ygoa-icon icon-makeUp"></text>
						<text class="label">补卡:</text>
					</view>
					<text class="value">{{ makeUpCount }}</text>
				</view>
			</view>
		</view>

		<!-- 今日签到信息区域 -->
		<view class="todayCheckIn" :class="{'show': shouldShow}">
			<view class="check-in-container">
				<text class="title2">今日签到信息</text>
				<view class="info-row">
					<view>
						<text class="ygoa-icon icon-date"></text>
						<text class="value">日期:</text>
					</view>

					<text class="label">{{todayData.day}}</text>
				</view>
				<view class="info-row">
					<view>
						<text class="ygoa-icon icon-day"></text>
						<text class="value">晨签时间:</text>
					</view>
					<text class="label">{{todayData.startTime || '未打卡'}} </text>
				</view>
				<view class="info-row">
					<view>
						<text class="ygoa-icon icon-night"></text>
						<text class="value">晚签时间:</text>
					</view>

					<text class="label">{{todayData.endTime || '未打卡'}} </text>
				</view>
				<view class="info-row">
					<view>
						<text class="ygoa-icon icon-checkInStatus"></text>
						<text class="value">状态:</text>
					</view>

					<text class="label">{{todayData.status}}</text>
				</view>
			</view>
		</view>

		<!-- 图表区域 -->
		<view class="chart-container" :class="{'show': chartShow}">
			<view class="">
				<text class="chart-title">考勤趋势图</text>
				<view class="charts-box">
					<qiun-data-charts :type="chartsType" :opts="opts" :chartData="chartData" />
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue';
	import {
		CheckAttendance,
		getMyTotalCount
	} from "../../../api/mine/checkIn.js"

	// 创建一个响应式对象记录今天的考勤数据
	const todayData = reactive({
		day: '2024-11-11', // 当前日期
		startTime: '', // 晨签到时间
		endTime: '', // 晚签到时间
		status: '未打卡' // 签到状态
	})

	// 控制今日签到信息和图表显示的状态
	const shouldShow = ref(true) // 今日签到信息是否显示
	const chartShow = ref(false) // 图表是否显示

	// 图表类型的响应式引用
	const chartsType = ref('')

	// 图表要填充的数据
	const chartData = ref({})

	// 图表配置选项
	const opts = ref({
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
			"#ea7ccc"
		], // 设定图表颜色
		padding: [15, 15, 0, 5],
		enableScroll: false, // 禁用滚动
		legend: {}, // 图例设置
		xAxis: {
			disableGrid: true // 禁用网格线
		},
		yAxis: {
			data: [{
				min: 0 // y轴最小值
			}]
		},
		extra: {
			column: {
				type: "group",
				width: 30,
				activeBgColor: "#000000",
				activeBgOpacity: 0.08
			}
		}
	});

	// 时间范围选择数组
	const timeRanges = ref(['日', '周', '月']);
	const selectedTimeRange = ref('日'); // 初始化选择的时间范围为“日”

	// 考勤相关统计数据
	const attendanceCount = ref(0); // 出勤次数
	const leaveCount = ref(0); // 请假次数
	const businessTripCount = ref(0); // 出差次数
	const clockInCount = ref(0); // 打卡次数
	const makeUpCount = ref(0); // 补卡次数


	const currentData = ref({
		attendance: 0, // 出勤
		leave: 0, // 请假
		businessTrip: 0, // 出差
		clockIn: 0, // 打卡
		makeUp: 0, // 补卡
		res: {}, // 记录详细数据
	});
	const userId = ref('');
	//当前周的周一日期
	const thisMondayDate = ref('');

	onMounted(() => {
		userId.value = '511341581866278';
		initAttData(); //初始化日考勤数据
	});

	//初始化考勤数据
	function initAttData() {
		const nowDate = new Date();
		todayData.day = formatDate(nowDate);
		getDayAttData();
		getthisMondayDate();
	}

	//格式化日期
	function formatDate(date) {
		const year = date.getFullYear(); // 获取年份
		const month = date.getMonth() + 1; // 获取月份
		const day = date.getDate(); // 获取日期
		// 格式化月份和日期为两位数
		const formattedMonth = month < 10 ? '0' + month : month;
		const formattedDay = day < 10 ? '0' + day : day;
		return `${year}-${formattedMonth}-${formattedDay}`;
	}

	//获取日考勤数据
	function getDayAttData() {
		const params = {
			universalid: userId.value,
			rizi: todayData.day
		}
		CheckAttendance(params).then(res => {
			if ("success" == res.returnMsg) {
				const attList = res.returnParams.list;
				const time1 = attList.find(item => item.att_type_id === '1');
				const time2 = attList.find(item => item.att_type_id === '2');
				if (attList.length == 2) {
					todayData.endTime = time2.att_time.split(' ')[1];
					todayData.startTime = time1.att_time.split(' ')[1];
					todayData.status = '晚签完成'
				} else if (attList.length == 1) {
					if (time1 !== undefined) {
						todayData.startTime = time1.att_time.split(' ')[1];
						todayData.status = '早签完成'
					} else {
						todayData.endTime = time2.att_time.split(' ')[1];
						todayData.status = '待补卡'
					}
				}
			}
		})
	}

	// 时间范围切换事件
	function onTimeRangeChange(event) {
		const selectedIndex = event.detail.value;
		selectedTimeRange.value = timeRanges.value[selectedIndex]; // 设置选择的时间范围（日周月）
		// fetchAttendanceData(); // 获取考勤数据
		// 根据选择的时间范围更新展示内容
		switch (selectedTimeRange.value) {
			case '日':
				getDayAttData();
				showDay(); // 显示今日考勤
				break;
			case '周':
				chartsType.value = 'pie'; // 设置图表类型为饼图
				fetchWeekAttData().then(message => {
						console.log(message);
						showWeekAndMonth();
						updateChart(message);
					})
					.catch(error => {
						console.error(error); // 如果失败，打印错误消息
					});
				break;
			case '月':
				chartsType.value = 'column'; // 设置图表类型为柱状图
				fetchMonthAttData().then(message => {
						console.log('message',message);
						showWeekAndMonth();
						updateChart(message);
					})
					.catch(error => {
						console.error(error); // 如果失败，打印错误消息
					});
				break;
		}
	};

	// 显示今日考勤数据
	function showDay() {
		shouldShow.value = true; // 显示今日签到信息
		chartShow.value = false; // 隐藏图表
	}

	// 显示周或者月考勤
	function showWeekAndMonth() {
		shouldShow.value = false; // 隐藏今日签到信息
		chartShow.value = true; // 显示图表
	}


	//计算本周周一日期
	function getthisMondayDate() {
		const today = new Date();
		const dayOfWeek = today.getDay(); // 0 (周日) 到 6 (周六)
		const dayOfMonth = today.getDate();
		// 计算本周周一的日期
		const offset = dayOfWeek === 0 ? -6 : 1; // 如果今天是周日，则偏移量为-6，否则为1
		const thisMonday = new Date(today);
		thisMonday.setDate(dayOfMonth - dayOfWeek + offset);
		thisMondayDate.value = formatDate(thisMonday);
	}

	//获取周考勤记录
	function fetchWeekAttData() {
		return new Promise((resolve, reject) => {
			const params = {
				staffId: userId.value,
				start_date: thisMondayDate.value,
				end_date: todayData.day
			}
			// console.log('params', params);
			getMyTotalCount(params).then(res => {
				const myWeekAttData = res.returnParams;
				const mockData = {
					series: [{
						data: [{
								"name": "出勤",
								"value": myWeekAttData.type0,
								"labelText": "出勤:" + myWeekAttData.type0 + "次"
							},
							{
								"name": "外出",
								"value": myWeekAttData.type1
							},
							{
								"name": "公休",
								"value": myWeekAttData.type2
							},
							{
								"name": "未排班",
								"value": myWeekAttData.type3,
							},
							{
								"name": "迟到",
								"value": myWeekAttData.type4
							},
							{
								"name": "早退",
								"value": myWeekAttData.type5
							},
							{
								"name": "缺勤",
								"value": myWeekAttData.type6
							}
						]
					}],

				};
				const weekData = mockData.series[0].data;
				attendanceCount.value = weekData[0].value;
				leaveCount.value = weekData[1].value;
				businessTripCount.value = weekData[2].value;
				clockInCount.value = weekData[3].value;
				makeUpCount.value = weekData[4].value;
				resolve(mockData)
			}).catch(error => {
				reject(error)
			})
		})

	}

	// 获取月考勤记录
function fetchMonthAttData() {
	return new Promise((resolve, reject) => {
		const weekNodeList = [];
		weekNodeList.unshift(thisMondayDate.value, todayData.day);
		while (weekNodeList.length !== 8) {
			const weekNode = getOneDaysAgo(weekNodeList[0]);
			weekNodeList.unshift(weekNode);
			weekNodeList.unshift(getSixDaysAgo(weekNode));
		}

		const data1 = [];
		const data2 = [];
		const data3 = [];
		const dataFetchPromises = [];// 存储所有数据请求的promise

		for (let i = 0; i < weekNodeList.length - 1; i += 2) {
			const params = {
				staffId: userId.value,
				start_date: weekNodeList[i],
				end_date: weekNodeList[i + 1]
			};
			const fetchPromise = getMyTotalCount(params).then(res => {
				// for (const type in res.returnParams) {
				// 	console.log('type', type);
				// }
				console.log('res.returnParams', res.returnParams);
				
				data1.push(res.returnParams.type0);
				data2.push(res.returnParams.type1);
				data3.push(res.returnParams.type4);
			});
			dataFetchPromises.push(fetchPromise);
		}

		// 等待所有数据请求完成
		Promise.all(dataFetchPromises).then(() => {
			const params = {
				staffId: userId.value,
				start_date: weekNodeList[0],
				end_date: weekNodeList[weekNodeList.length - 1]
			};
			return getMyTotalCount(params);
		}).then(res => {
			const myMonthAttData = res.returnParams;
			attendanceCount.value = myMonthAttData.type0;
			leaveCount.value = myMonthAttData.type1;
			businessTripCount.value = myMonthAttData.type2;
			clockInCount.value = myMonthAttData.type3;
			makeUpCount.value = myMonthAttData.type4;

			const mockData = {
				categories: ["第1周", "第2周", "第3周", "第4周"],
				series: [{
					name: "出勤",
					data: data1
				}, {
					name: "出差",
					data: data2
				}, {
					name: "迟到",
					data: data3
				}]
			};
			// console.log(data1); // 打印data1检查内容
			resolve(mockData);
		}).catch(error => {
			reject(error);
		});
	});
}


	//获取六天前的日期
	function getSixDaysAgo(dateStr) {
		const date = new Date(dateStr);
		date.setDate(date.getDate() - 6);
		return date.toISOString().split('T')[0]; // 返回格式为'YYYY-MM-DD'的字符串
	}
	//获取一天前的日期
	function getOneDaysAgo(dateStr) {
		const date = new Date(dateStr);
		date.setDate(date.getDate() - 1);
		return date.toISOString().split('T')[0]; // 返回格式为'YYYY-MM-DD'的字符串
	}


	// 更新图表数据
	function updateChart(res) {
		chartData.value = JSON.parse(JSON.stringify(res)); // 更新图表数据
	}

</script>


<style scoped>
	@import "@/static/font/ygoa/iconfont.css";

	.ygoa-icon {
		margin-right: 20rpx;
		font-size: 50rpx;
		vertical-align: middle;
		/* 确保图标与文本竖直居中 */
	}

	.attendance-page {
		padding: 20px;
		background-color: #f9f9f9;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		color: #333;
	}

	.picker {
		border: 1px solid #3498db;
		border-radius: 5px;
		padding: 10px;
		background-color: #ecf6fc;
		color: #3498db;
	}

	.statistics {
		display: flex;
		justify-content: center;
	}

	.statistic-card {
		background: white;
		border-radius: 10px;
		padding: 20px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		/* width: 100%; */
		max-width: 600px;
	}

	.statistic-title {
		text-align: center;
		font-size: 20px;
		font-weight: bold;
		color: #333;
	}

	.statistic-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		border-bottom: 1px solid #eee;
		padding-bottom: 10px;
	}

	.label {
		color: #666;
	}

	.value {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	.value,
	.label {
		line-height: 50rpx;
		/* 与图标高度一致，确保垂直对齐 */
	}

	.chart-container {
		margin-top: 20px;
	}

	.chart-title {
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 10px;
		color: #333;
	}

	.charts-box {
		width: 100%;
		height: 300px;
	}


	.todayCheckIn {

		background-color: #ffffff;
		padding: 20px;
		box-sizing: border-box;
	}



	.check-in-container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.title2 {
		font-size: 22px;
		font-weight: bold;
		margin-bottom: 20px;
	}


	.info-row {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
	}


	.todayCheckIn,
	.chart-container,
	.statistics {
		/* 默认隐藏 */
		display: none;
	}

	/* 当需要显示时，可以添加一个额外的类 */
	.todayCheckIn.show,
	.chart-container.show,
	.statistics.show {
		display: block;
	}

	.icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
		vertical-align: middle;
		/* 确保图标与文本竖直居中 */
	}
</style>