<!--
 * @Author: zwq
 * @Date: 2024-07-01 14:54:06
 * @LastEditors: zwq
 * @LastEditTime: 2025-10-27 10:18:54
 * @Description:
-->
<template>
	<el-row :gutter="10" style="background-color: #f2f4f9">
		<!--部门数据-->
		<el-col :span="4">
			<div class="head-container">
				<el-input
					v-model="deptName"
					placeholder="请输入部门名称"
					clearable
					size="small"
					prefix-icon="el-icon-search"
					style="margin-bottom: 20px" />
				<el-tree
					:data="deptOptions"
					:props="defaultProps"
					:expand-on-click-node="false"
					:filter-node-method="filterNode"
					ref="tree"
					default-expand-all
					highlight-current
					@node-click="handleNodeClick" />
			</div>
		</el-col>
		<el-col :span="20">
			<div class="groupTeamScheduling">
				<div class="operationArea">
					<el-row>
						<el-col :span="16">
							<div style="height: 40px; font-size: 16px">
								<span style="color: #409eff; font-weight: 600">
									{{ showDeptName }}
								</span>
								节假日设置
							</div>
						</el-col>
						<el-col :span="8">
							<div style="float: right">
								<el-button
									size="small"
									type="primary"
									style="margin-right: 10px"
									v-hasPermi="['base:group-holiday:create']"
									@click="addHoliday">
									新增节假日
								</el-button>
								<el-button
									size="small"
									v-hasPermi="['base:group-holiday-log:query']"
									@click="holidayLog">
									节假日变更记录
								</el-button>
							</div>
						</el-col>
					</el-row>
				</div>
				<div class="operationArea">
					<el-form :inline="true" class="demo-form-inline">
						<span class="blue-block"></span>
						<el-form-item label="月份选择">
							<el-date-picker
								v-model="startDay"
								type="month"
								placeholder="选择月"
								size="small"
								@change="selectMonth"
								:clearable="false"
								style="width: 120px"></el-date-picker>
						</el-form-item>
						<el-form-item style="float: right">
							<el-button
								size="small"
								type="primary"
								@click="(startDay = new Date()), getHolidayPage()">
								跳转到今天
							</el-button>
						</el-form-item>
					</el-form>
					<el-tag
						v-if="topDeptId == deptId"
						type="warning"
						closable
						style="margin-bottom: 10px; color: black">
						<i class="el-icon-warning" style="color: #ffbd02"></i>
						当前节假日设置为组织架构中最高层级配置，默认自动继承至下属部门。子部门可选择
						<span style="color: red">解除继承</span>
						设置后进行独立修改，复制后不再继承上级设置
					</el-tag>
				</div>
				<!-- 日历区域 -->
				<div class="calenderArea">
					<el-calendar v-model="startDay">
						<template slot="dateCell" slot-scope="{ data }">
							<div v-if="data.type === 'current-month'">
								<!-- 日期 -->
								<div class="dateStyle">
									<el-row :gutter="20">
										<!-- 公历和农历 -->
										<el-col :span="18">
											{{ Number(data.day.split('-')[2]) }}
											<div class="lunar-date">{{ getLunarDate(data.day) }}</div>
										</el-col>
										<!-- 显示假或班 -->
										<el-col :span="6">
											<div
												class="work-tip"
												:style="{
													backgroundColor: HolidayList[
														Number(data.day.split('-')[2]) - 1
													]?.isHoliday
														? '#67C23A'
														: '#409EFF',
												}">
												{{
													HolidayList[Number(data.day.split('-')[2]) - 1]
														?.isHoliday
														? '假'
														: '班'
												}}
											</div>
										</el-col>
										<!-- 显示假期名和操作 -->
										<el-col
											:span="24"
											v-if="
												HolidayList[Number(data.day.split('-')[2]) - 1]
													?.isHoliday
											">
											<div
												class="holiday-div"
												@click="
													new Date(data.day).getTime() > Date.now() &&
														showDetail(
															HolidayList[Number(data.day.split('-')[2]) - 1]
																.holidayId
														)
												">
												{{
													HolidayList[Number(data.day.split('-')[2]) - 1]
														?.holidayName
												}}
												<span
													class="holiday-div-btn"
													v-if="new Date(data.day).getTime() > Date.now()">
													<i class="el-icon-more" style="color: #fff"></i>
												</span>
											</div>
										</el-col>
									</el-row>
								</div>
							</div>
							<div
								v-else
								style="font-size: 20px; font-weight: 500; text-align: left">
								<el-row :gutter="20">
									<el-col :span="24">
										{{ Number(data.day.split('-')[2]) }}
										<span style="font-size: 12px">
											{{ getLunarDate(data.day) }}
										</span>
									</el-col>
								</el-row>
							</div>
						</template>
					</el-calendar>
				</div>
			</div>
		</el-col>
		<base-dialog
			:dialogTitle="dialogTitle"
			:dialogVisible="addOrUpdateVisible"
			@cancel="cancel"
			@confirm="handleConfirm"
			:before-close="cancel"
			:destroy-on-close="true"
			width="40%">
			<add-or-updata
				ref="addOrUpdataRef"
				@refreshPage="successSubmit"></add-or-updata>
			<template #footer>
				<slot name="footer">
					<el-row slot="footer" type="flex" justify="end">
						<el-col :span="24">
							<el-button
								v-if="!detail"
								size="small"
								class="btnTextStyle"
								@click="cancel">
								取消
							</el-button>
							<el-button
								v-if="!detail"
								type="primary"
								class="btnTextStyle"
								size="small"
								@click="handleConfirm">
								确定
							</el-button>
							<el-button
								v-if="detail"
								size="small"
								type="primary"
								class="btnTextStyle"
								v-hasPermi="['base:group-holiday:update']"
								@click="editHoliday">
								修改
							</el-button>
							<el-button
								v-if="detail"
								class="btnTextStyle"
								size="small"
								v-hasPermi="['base:group-holiday:delete']"
								@click="deleteHoliday">
								删除
							</el-button>
						</el-col>
					</el-row>
				</slot>
			</template>
		</base-dialog>
		<base-dialog
			dialogTitle="节假日变更记录"
			:dialogVisible="logVisible"
			@cancel="cancelLog"
			:before-close="cancelLog"
			:destroy-on-close="true"
			width="70%">
			<holiday-log ref="holidayLogRef"></holiday-log>
			<template #footer>
				<slot name="footer">
					<el-row slot="footer" type="flex" justify="end">
						<el-col :span="24">
							<el-button size="small" class="btnTextStyle" @click="cancelLog">
								取消
							</el-button>
						</el-col>
					</el-row>
				</slot>
			</template>
		</base-dialog>
	</el-row>
</template>

<script>
import moment from 'moment';
import { solarToLunar } from 'chinese-lunar';

import { getUserProfile } from '@/api/system/user';
import { deptHolidayList, getEnableData } from '@/api/group/holidaySetting';

import addOrUpdata from './add-or-updata.vue';
import holidayLog from './holidayLog';

export default {
	name: '',
	components: {
		addOrUpdata,
		holidayLog,
	},
	data() {
		return {
			startDay: '', // 查询参数
			HolidayList: [],
			// 部门树选项
			deptOptions: undefined,
			// 查询的部门名称
			deptName: undefined,
			// 选择的部门名称
			showDeptName: undefined,
			topDeptId: undefined, // 保存当前用户的部门id为最高级部门id
			deptId: undefined,
			defaultProps: {
				children: 'children',
				label: 'name',
			},
			dialogTitle: undefined,
			addOrUpdateVisible: false,
			detail: false,
			logVisible: false,
		};
	},
	watch: {
		// 根据名称筛选部门树
		deptName(val) {
			this.$refs.tree.filter(val);
		},
	},
	created() {
		this.startDay = new Date();
		// 查询用户个人信息
		getUserProfile().then((response) => {
			this.showDeptName = response.data.dept.name || '';
			this.topDeptId = response.data.dept.id || ''; // 保存当前用户的部门id为最高级部门id
			this.deptId = response.data.dept.id || '';
			this.getHolidayPage();
		});
		this.getTreeselect();
	},
	methods: {
		getHolidayPage() {
			const now = new Date(this.startDay);
			const year = now.getFullYear();
			const month = now.getMonth();
			const startTime = `${year}-${String(month + 1).padStart(2, '0')}-01`;
			const lastDate = new Date(year, month + 1, 0).getDate();
			const endTime = `${year}-${String(month + 1).padStart(2, '0')}-${String(
				lastDate
			).padStart(2, '0')}`;

			this.HolidayList = [];
			deptHolidayList({
				deptId: this.deptId,
				startTime: Date.parse(startTime),
				endTime: Date.parse(endTime),
			}).then((res) => {
				this.HolidayList = res.data;
			});
		},
		// 切换月份
		selectMonth() {
			this.getHolidayPage();
		},
		/** 查询部门下拉树结构 */
		getTreeselect() {
			getEnableData().then((response) => {
				// 处理 deptOptions 参数
				this.deptOptions = [];
				this.deptOptions.push(...this.handleTree(response.data, 'id'));
			});
		},
		// 筛选节点
		filterNode(value, data) {
			if (!value) return true;
			return data.name.indexOf(value) !== -1;
		},
		// 节点单击事件
		handleNodeClick(data) {
			this.deptId = data.id;
			this.showDeptName = data.name;
			this.getHolidayPage();
		},
		//获取农历
		getLunarDate(solarDate) {
			try {
				const [year, month, day] = solarDate.split('-').map(Number);

				const date = new Date(year, month - 1, day);
				const lunar = solarToLunar(date);

				// 将数字月份和日期转换为中文
				const monthMap = {
					1: '正',
					2: '二',
					3: '三',
					4: '四',
					5: '五',
					6: '六',
					7: '七',
					8: '八',
					9: '九',
					10: '十',
					11: '冬',
					12: '腊',
				};

				const dayMap = {
					1: '初一',
					2: '初二',
					3: '初三',
					4: '初四',
					5: '初五',
					6: '初六',
					7: '初七',
					8: '初八',
					9: '初九',
					10: '初十',
					11: '十一',
					12: '十二',
					13: '十三',
					14: '十四',
					15: '十五',
					16: '十六',
					17: '十七',
					18: '十八',
					19: '十九',
					20: '二十',
					21: '廿一',
					22: '廿二',
					23: '廿三',
					24: '廿四',
					25: '廿五',
					26: '廿六',
					27: '廿七',
					28: '廿八',
					29: '廿九',
					30: '三十',
				};

				// 返回 "三月初四" 格式
				return `${monthMap[lunar.month]}月${dayMap[lunar.day]}`;
			} catch (error) {
				console.log(error);
				return '';
			}
		},
		addHoliday() {
			this.addOrUpdateVisible = true;
			this.detail = false;
			this.dialogTitle = '新增节假日';
			this.$nextTick(() => {
				this.$refs.addOrUpdataRef.init(this.deptId);
			});
		},
		holidayLog() {
			this.logVisible = true;
			this.$nextTick(() => {
				this.$refs.holidayLogRef.getDataList();
			});
		},
		cancel() {
			this.getHolidayPage();
			this.addOrUpdateVisible = false;
		},
		successSubmit() {
			this.cancel();
			this.getHolidayPage();
		},
		handleConfirm() {
			this.$refs.addOrUpdataRef.dataFormSubmit();
		},
		showDetail(id) {
			this.addOrUpdateVisible = true;
			this.detail = true;
			this.dialogTitle = '节假日详情';
			this.$nextTick(() => {
				this.$refs.addOrUpdataRef.init(this.deptId, id, true);
			});
		},
		editHoliday() {
			this.detail = false;
			this.$nextTick(() => {
				this.$refs.addOrUpdataRef.editHoliday();
			});
		},
		deleteHoliday() {
			this.$nextTick(() => {
				this.$refs.addOrUpdataRef.deleteHoliday();
			});
		},
		cancelLog() {
			this.logVisible = false;
		},
	},
};
</script>
<style lang="scss">
.head-container {
	padding: 20px 10px 0;
	background-color: #fff;
	min-height: calc(100vh - 120px - 8px);
	border-radius: 8px;
}
.groupTeamScheduling {
	.operationArea {
		padding: 14px 10px 0 16px;
		margin-bottom: 8px;
		background-color: #fff;
		border-radius: 8px;
		.blue-block {
			display: inline-block;
			width: 4px;
			height: 16px;
			background-color: #0b58ff;
			border-radius: 1px;
			margin-right: 8px;
			margin-top: 10px;
		}
		.el-form-item {
			margin-bottom: 10px;
		}
	}
	// 日历
	.calenderArea {
		padding: 14px 10px 0 20px;
		background-color: #fff;
		border-radius: 8px;
		min-height: calc(100vh - 120px - 8px - 168px);
		.el-calendar__body {
			padding: 10px 16px 16px 0;
		}
		.el-calendar__header {
			display: none;
		}
		.el-calendar-table > thead {
			height: 48px;
			font-size: 20px;
			font-weight: 500;
			color: #000000;
			background-color: rgba(242, 244, 249, 1);
		}
		.el-calendar-table__row {
			height: 133px;
			.prev,
			.next {
				pointer-events: none;
			}
			.is-selected,
			.is-today {
				background-color: #e4f0fd;
			}
			.el-calendar-day {
				padding: 0;
				height: 100%;
				:hover {
					background-color: #e4f0fd;
				}
				.dateStyle {
					font-size: 20px;
					font-weight: 500;
					color: #000000;
					text-align: left;
					height: 133px;
					line-height: 28px;
					padding: 10px;

					.lunar-date {
						display: inline-block;
						font-size: 12px;
						color: #909399;
					}
					.work-tip {
						background: #87c1ff;
						color: white;
						font-size: 18px;
						width: 30px;
						text-align: center;
						float: right;
					}
					.holiday-div {
						background-color: #67c23a;
						border-radius: 3px;
						height: 25px;
						text-align: center;
						line-height: 24px;
						color: #fff;
						.holiday-div-btn {
							float: right;
							transform: rotate(90deg);
							font-size: 14px;
							pointer-events: none;
						}
					}
				}
			}
		}
	}
}
</style>
