<!--
 * @Author: zwq
 * @Date: 2021-11-18 14:16:25
 * @LastEditors: zwq
 * @LastEditTime: 2025-12-11 10:47:50
 * @Description:
-->
<template>
	<div>
		<el-form
			:model="dataForm"
			:rules="dataRule"
			ref="dataForm"
			@keyup.enter.native="dataFormSubmit()"
			label-position="top"
			label-width="80px">
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="节假日名称" prop="name">
						<el-input
							ref="inputWidth"
							v-model="dataForm.name"
							clearable
							:disabled="detail"
							placeholder="请输入节假日名称" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="日历类型" prop="calendarType">
						<el-select
							v-model="dataForm.calendarType"
							:disabled="detail"
							style="width: 100%">
							<el-option
								v-for="item in options1"
								:key="item.value"
								:label="item.label"
								:value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="日期类型" prop="dateType">
						<el-select
							style="width: 100%"
							:disabled="detail"
							v-model="dataForm.dateType">
							<el-option
								v-for="item in options2"
								:key="item.value"
								:label="item.label"
								:value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item
						v-if="dataForm.dateType == 1 && dataForm.calendarType == 1"
						label="日期"
						prop="dateDay">
						<el-date-picker
							:disabled="detail"
							style="width: 100%"
							key="date"
							v-model="dataForm.dateDay"
							type="date"
							placeholder="选择日期"
							format="yyyy-MM-dd"
							value-format="yyyy-MM-dd"
							@blur="$forceUpdate()"
							:picker-options="pickerOptions"></el-date-picker>
					</el-form-item>
					<el-form-item
						v-else-if="dataForm.dateType == 2 && dataForm.calendarType == 1"
						label="日期"
						prop="dateDayArr">
						<el-date-picker
							:disabled="detail"
							style="width: 100%"
							key="daterange"
							v-model="dataForm.dateDayArr"
							type="daterange"
							format="yyyy-MM-dd"
							value-format="yyyy-MM-dd"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							@blur="$forceUpdate()"
							:picker-options="pickerOptions"></el-date-picker>
					</el-form-item>
					<el-form-item
						v-else-if="dataForm.dateType == 1 && dataForm.calendarType == 2"
						label="日期"
						prop="dateDayChinese">
						<j-date-picker
							ref="JDatePicker1"
							style="line-height: 18px"
							v-model="dataForm.dateDayChinese"
							id="value1"
							:width="width1"
							:placeholder="placeholder"
							:picker-options="pickerOptions"
							:rangeSeparator="rangeSeparator"
							@change="onDateChange"
							:disabled="detail"
							:showLunarClass="showLunarClass"
							:showLunarControl="showLunarControl"
							type="DATE"
							:showBackYears="showBackYears"
							:showLunarIcon="showLunarIcon"
							:format="format"></j-date-picker>
					</el-form-item>
					<el-form-item
						v-else-if="dataForm.dateType == 2 && dataForm.calendarType == 2"
						label="日期"
						prop="dateDayArrChinese">
						<j-date-picker
							style="line-height: 18px"
							ref="JDatePicker2"
							v-model="dataForm.dateDayArrChinese"
							id="value2"
							:width="width1"
							:placeholder="placeholder"
							:picker-options="pickerOptions"
							:rangeSeparator="rangeSeparator"
							@change="onDateChange"
							:disabled="detail"
							:showLunarClass="showLunarClass"
							:showLunarControl="showLunarControl"
							type="DATERANGE"
							:showBackYears="showBackYears"
							:showLunarIcon="showLunarIcon"
							:format="format"></j-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="是否每年重复" prop="repeat">
						<el-select
							v-model="dataForm.repeat"
							:disabled="detail"
							style="width: 100%">
							<el-option
								v-for="item in options3"
								:key="item.value"
								:label="item.label"
								:value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="detail">
					<el-form-item label="来源" prop="inherited">
						<el-radio-group disabled v-model="dataForm.inherited">
							<el-radio :label="true">继承</el-radio>
							<el-radio :label="false">自定义</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<el-dialog
			title="删除确认"
			:visible.sync="dialogVisible"
			width="30%"
			append-to-body>
			<span>
				确认删除该节假日吗？
				<br />
				该节假日已被排班计划使用，建议确认是否同步更新排班计划。
				<br />
				此操作不可恢复，请确认是否继续
			</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button @click="onlyDelete">仅删除</el-button>
				<el-button type="primary" @click="deleteAndUpdate">
					删除并更新
				</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import JDatePicker from './components/JDatePicker.vue';
import {
	createHoliday,
	updateHoliday,
	checkDeleteHoliday,
	deleteHoliday,
	updateSchedule,
	getHoliday,
} from '@/api/group/holidaySetting';

export default {
	components: {
		JDatePicker,
	},
	data() {
		return {
			dataForm: {
				id: undefined,
				name: undefined,
				calendarType: 1,
				dateType: 1,
				dateDay: undefined,
				dateDayArr: [],
				dateDayChinese: undefined,
				dateDayArrChinese: [],
				noRepeatYear: undefined,
				noRepeatYearChinese: undefined,
				repeat: true,
				inherited: true, //	是否为继承
				deptId: undefined,
			},
			detail: false,
			inherited: true,
			options1: [
				{
					value: 1,
					label: '公历(阳历)',
				},
				{
					value: 2,
					label: '农历(阴历)',
				},
			],
			options2: [
				{
					value: 1,
					label: '单天',
				},
				{
					value: 2,
					label: '时间段',
				},
			],
			options3: [
				{
					value: false,
					label: '否，本年度有效',
				},
				{
					value: true,
					label: '是，每年循环生效',
				},
			],
			dataRule: {
				name: [
					{ required: true, message: '节假日名称不能为空', trigger: 'blur' },
				],
				calendarType: [
					{ required: true, message: '日历类型不能为空', trigger: 'change' },
				],
				dateType: [
					{ required: true, message: '日期类型不能为空', trigger: 'change' },
				],
				dateDay: [
					{ required: true, message: '日期不能为空', trigger: 'change' },
				],
				dateDayArr: [
					{ required: true, message: '日期不能为空', trigger: 'change' },
				],
				dateDayChinese: [
					{ required: true, message: '日期不能为空', trigger: 'change' },
				],
				dateDayArrChinese: [
					{ required: true, message: '日期不能为空', trigger: 'change' },
				],
				repeat: [
					{
						required: true,
						message: '是否每年重复不能为空',
						trigger: 'change',
					},
				],
			},
			pickerOptions: {
				disabledDate(time) {
					return time.getTime() < Date.now();
				},
			},
			dialogVisible: false,
			//农历组件数据
			showLunarClass: 'LUNAR', //农历日期的展示类型 MIX(混合)FULLLUNAR(全农历)LUNAR(农历)NUMBER(数字)
			showBackYears: 2, //向后展示年数;见于年份列表;
			showLunarIcon: true, //是否显示农历控制组件
			showLunarControl: false, //是否显示农历控制组件
			width1: '300', //这个设置成100%，原组件写死了px需要修改
			format: 'yyyy-MM-dd',
			placeholder: '',
			rangeSeparator: '-',
			editable: true,
			clearable: true,
			pickerOptions: {
				disabledDate(time) {
					return time.getTime() < Date.now() - 8.64e7;
				},
			},
		};
	},

	watch: {
		'dataForm.calendarType': function (newValue, oldValue) {
			this.$nextTick(() => {
				if (this.$refs.JDatePicker1) {
					this.$refs.JDatePicker1.isLunar = true; //默认转为农历
					this.$refs.JDatePicker1.onLunarChange();
				}
				if (this.$refs.JDatePicker2) {
					this.$refs.JDatePicker2.isLunar = true;
					this.$refs.JDatePicker2.onLunarChange();
				}
			});
		},
		'dataForm.dateType': function (newValue, oldValue) {
			this.$nextTick(() => {
				if (this.$refs.JDatePicker1) {
					this.$refs.JDatePicker1.isLunar = true; //默认转为农历
					this.$refs.JDatePicker1.onLunarChange();
				}
				if (this.$refs.JDatePicker2) {
					this.$refs.JDatePicker2.isLunar = true;
					this.$refs.JDatePicker2.onLunarChange();
				}
			});
		},
	},
	mounted() {
		this.$nextTick(() => {
			this.width1 = this.$refs.inputWidth.$el.offsetWidth + '';
		});
	},
	methods: {
		init(deptId, val, detail, inherited) {
			this.dataForm.deptId = deptId || undefined;
			this.dataForm.id = val.holidayId || undefined;
			this.dataForm.inherited = val.isInherit || false;
			this.detail = detail || false;
			this.inherited = inherited; //编辑的时候，该部门如果是自定义的，但这个val数据是继承的，修改之后，则变成自定义的inherited
			this.$nextTick(() => {
				this.$refs['dataForm'].resetFields();
				if (this.dataForm.id) {
					getHoliday(this.dataForm.id).then((res) => {
						//设置年份，不重复的直接用返回的年份，重复的直接用当年年份
						let year = new Date().getFullYear();
						if (res.data.calendarType == 1 && !res.data.repeat) {
							year = res.data.noRepeatYear;
						} else if (res.data.calendarType == 2 && !res.data.repeat) {
							year = res.data.noRepeatYearChinese;
						}

						this.dataForm = res.data;
						if (
							this.dataForm.dateType == 1 &&
							this.dataForm.calendarType == 1
						) {
							this.dataForm.dateDay =
								year + '-' + this.dataForm.oneDay.slice(-5);
						} else if (
							this.dataForm.dateType == 2 &&
							this.dataForm.calendarType == 1
						) {
							let num = this.compareMonthDay(
								this.dataForm.startDay.slice(-5),
								this.dataForm.endDay.slice(-5)
							);
							this.dataForm.dateDayArr = [
								year + '-' + this.dataForm.startDay.slice(-5),
								(num > 0 ? year : year + 1) +
									'-' +
									this.dataForm.endDay.slice(-5),
							];
						} else if (
							this.dataForm.dateType == 1 &&
							this.dataForm.calendarType == 2
						) {
							this.dataForm.dateDayChinese =
								'L' + year + this.dataForm.oneDayChinese.slice(-6);
						} else if (
							this.dataForm.dateType == 2 &&
							this.dataForm.calendarType == 2
						) {
							let num = this.compareMonthDay(
								this.dataForm.startDayChinese.slice(-6),
								this.dataForm.endDayChinese.slice(-6)
							);
							this.dataForm.dateDayArrChinese = [
								'L' + year + this.dataForm.startDayChinese.slice(-6),
								'L' +
									(num > 0 ? year : year + 1) +
									+this.dataForm.endDayChinese.slice(-6),
							];
						}
					});
				}
			});
		},
		//用于比较日期大小，判断年份是否要加1
		compareMonthDay(dateStr1, dateStr2) {
			const [month1, day1] = dateStr1.split('-').map(Number);
			const [month2, day2] = dateStr2.split('-').map(Number);

			if (month1 !== month2) {
				return month2 - month1;
			}
			return day2 - day1;
		},
		editHoliday() {
			this.detail = false;
		},
		deleteHoliday() {
			//删除节假日基础信息前校验是否影响排班
			checkDeleteHoliday(this.dataForm.id).then((res) => {
				if (res.data) {
					this.dialogVisible = true;
				} else {
					this.$confirm(
						'确认删除该节假日吗？<br/>此操作不可恢复，请确认是否继续',
						'删除确认',
						{
							dangerouslyUseHTMLString: true,
							confirmButtonText: '确认删除',
							cancelButtonText: '取消',
							type: 'warning',
						}
					)
						.then(() => {
							deleteHoliday(this.dataForm.id).then((res) => {
								console.log(res);
								this.$modal.msgSuccess('删除成功');
								this.$emit('refreshPage');
							});
						})
						.catch(() => {
							this.$message({
								type: 'info',
								message: '已取消',
							});
						});
				}
			});
		},
		onlyDelete() {
			deleteHoliday(this.dataForm.id).then((res) => {
				this.dialogVisible = false;
				this.$modal.msgSuccess('删除成功');
				this.$emit('refreshPage');
			});
		},
		deleteAndUpdate() {
			deleteHoliday(this.dataForm.id).then((res) => {
				this.dialogVisible = false;
				this.$modal.msgSuccess('删除成功');
				updateSchedule({ logId: res.data.logId }).then((res1) => {
					this.$modal.msgSuccess('更新成功');
				});
				this.$emit('refreshPage');
			});
		},
		onDateChange(val) {
			console.log(val);
		},
		// 表单提交
		dataFormSubmit() {
			this.$refs['dataForm'].validate((valid) => {
				if (!valid) {
					return false;
				}
				if (this.dataForm.dateType == 1 && this.dataForm.calendarType == 1) {
					const [year, month, day] = this.dataForm.dateDay.split('-');
					this.dataForm.oneDay = `--${month}-${day}`;
				} else if (
					this.dataForm.dateType == 2 &&
					this.dataForm.calendarType == 1
				) {
					const [year, month, day] = this.dataForm.dateDayArr[0].split('-');
					this.dataForm.startDay = `--${month}-${day}`;
					const [year1, month1, day1] = this.dataForm.dateDayArr[1].split('-');
					this.dataForm.endDay = `--${month1}-${day1}`;
				} else if (
					this.dataForm.dateType == 1 &&
					this.dataForm.calendarType == 2
				) {
					this.dataForm.oneDayChinese =
						'--' + this.dataForm.dateDayChinese.slice(-5);
				} else if (
					this.dataForm.dateType == 2 &&
					this.dataForm.calendarType == 2
				) {
					this.dataForm.startDayChinese =
						'--' + this.dataForm.dateDayArrChinese[0].slice(-5);
					this.dataForm.endDayChinese =
						'--' + this.dataForm.dateDayArrChinese[1].slice(-5);
				}
				//是否每年重复，不重复的话需要传  年份
				if (
					this.dataForm.dateType == 1 &&
					this.dataForm.calendarType == 1 &&
					!this.dataForm.repeat
				) {
					const [year, month, day] = this.dataForm.dateDay.split('-');
					this.dataForm.noRepeatYear = year;
				} else if (
					this.dataForm.dateType == 2 &&
					this.dataForm.calendarType == 1 &&
					!this.dataForm.repeat
				) {
					const [year, month, day] = this.dataForm.dateDayArr[0].split('-');
					this.dataForm.noRepeatYear = year;
				} else if (
					this.dataForm.dateType == 1 &&
					this.dataForm.calendarType == 2 &&
					!this.dataForm.repeat
				) {
					this.dataForm.noRepeatYearChinese =
						this.dataForm.dateDayChinese.slice(1, 5);
				} else if (
					this.dataForm.dateType == 2 &&
					this.dataForm.calendarType == 2 &&
					!this.dataForm.repeat
				) {
					this.dataForm.noRepeatYearChinese =
						this.dataForm.dateDayArrChinese[0].slice(1, 5);
				}
				// 修改的提交
				if (this.dataForm.id) {
					if (!this.inherited) {
						this.dataForm.inherited = false;
					}
					updateHoliday(this.dataForm).then((res) => {
						if (res.code === 0 || res.code === 200) {
							if (!res.data.updateFlag) {
								this.$modal.msgSuccess('修改成功');
								this.$emit('refreshPage');
							} else {
								this.$confirm(
									'新增节假日影响已有排班计划，是否立即更新？',
									'更新排班',
									{
										confirmButtonText: '立即更新',
										cancelButtonText: '暂不更新',
										type: 'warning',
									}
								)
									.then(() => {
										updateSchedule({ logId: res.data.logId }).then((res1) => {
											this.$modal.msgSuccess('更新成功');
										});
										this.$emit('refreshPage');
									})
									.catch(() => {
										this.$message({
											type: 'info',
											message: '已取消',
										});
										this.$emit('refreshPage');
									});
							}
						} else {
							this.$modal.msg(res.msg);
						}
					});
					return;
				}
				// 添加的提交
				createHoliday(this.dataForm).then((res) => {
					if (res.code === 0 || res.code === 200) {
						if (!res.data.updateFlag) {
							this.$modal.msgSuccess('新增成功');
							this.$emit('refreshPage');
						} else {
							this.$confirm(
								'新增节假日影响已有排班计划，是否立即更新？',
								'更新排班',
								{
									confirmButtonText: '立即更新',
									cancelButtonText: '暂不更新',
									type: 'warning',
								}
							)
								.then(() => {
									updateSchedule({ logId: res.data.logId }).then((res1) => {
										this.$modal.msgSuccess('更新成功');
									});
									this.$emit('refreshPage');
								})
								.catch(() => {
									this.$message({
										type: 'info',
										message: '已取消',
									});
									this.$emit('refreshPage');
								});
						}
					} else {
						this.$modal.msg(res.msg);
					}
				});
			});
		},
	},
};
</script>
