﻿<template>
	<div class="mesHolidayType-container">
		<el-dialog v-model="isShowDialog" v-if="isShowDialog" :width="800" draggable="" :close-on-click-modal="false" :fullscreen="fullScreen">
			<template #header>
				<div style="color: #fff; display: flex; align-items: center; justify-content: space-between">
					<span>{{ props.title }}</span>
					<el-icon size="16" @click="fullScreen = !fullScreen" style="margin-right: 16px; display: block; vertical-align: middle; cursor: pointer">
						<ele-FullScreen v-if="!fullScreen" />
						<ele-Notification v-else />
					</el-icon>
				</div>
			</template>
			<el-form :model="ruleForm" ref="ruleFormRef" label-width="auto" :rules="rules">
				<el-row :gutter="35">
					<el-form-item v-show="false">
						<el-input v-model="ruleForm.id" />
					</el-form-item>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="公休日编码" prop="holidayCode">
							<el-input v-model="ruleForm.holidayCode" placeholder="请输入公休日编码" maxlength="100" show-word-limit clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="公休日名称" prop="holidayName">
							<el-input v-model="ruleForm.holidayName" placeholder="请输入公休日名称" maxlength="100" show-word-limit clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="公休日类型" prop="holidayType">
							<el-select clearable v-model="ruleForm.holidayType" placeholder="请选择公休日类型" @change="handleChange">
								<el-option v-for="(item, index) in ['周休', '单双休', '月休']" :key="index" :value="item" :label="`${item}`"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label=" " prop="zx">
							<el-checkbox-group v-model="restDays" v-if="ruleForm.holidayType == '周休'">
								<el-checkbox label="星期一" value="星期一" />
								<el-checkbox label="星期二" value="星期二" />
								<el-checkbox label="星期三" value="星期三" />
								<el-checkbox label="星期四" value="星期四" />
								<el-checkbox label="星期五" value="星期五" />
								<el-checkbox label="星期六" value="星期六" />
								<el-checkbox label="星期日" value="星期日" />
							</el-checkbox-group>
							<template v-if="ruleForm.holidayType == '单双休'">
								<el-checkbox-group v-model="restDays">
									<el-checkbox label="星期一" value="星期一" />
									<el-checkbox label="星期二" value="星期二" />
									<el-checkbox label="星期三" value="星期三" />
									<el-checkbox label="星期四" value="星期四" />
									<el-checkbox label="星期五" value="星期五" />
									<el-checkbox label="星期六" value="星期六" />
									<el-checkbox label="星期日" value="星期日" />
								</el-checkbox-group>
								<div></div>
								<el-checkbox-group v-model="restDays1">
									<el-checkbox label="星期一" value="星期一" />
									<el-checkbox label="星期二" value="星期二" />
									<el-checkbox label="星期三" value="星期三" />
									<el-checkbox label="星期四" value="星期四" />
									<el-checkbox label="星期五" value="星期五" />
									<el-checkbox label="星期六" value="星期六" />
									<el-checkbox label="星期日" value="星期日" />
								</el-checkbox-group>
							</template>
							<template v-if="ruleForm.holidayType == '月休'">
								<el-checkbox-group v-model="restDays">
									<el-checkbox v-for="(item, index) in 31" :label="item" :value="item" />
								</el-checkbox-group>
							</template>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="备注" prop="remark">
							<el-input v-model="ruleForm.remark" placeholder="请输入备注" type="textarea" show-word-limit clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="状态" prop="holidayTypeStatus">
							<el-switch v-model="ruleForm.holidayTypeStatus" active-text="启用" inactive-text="禁用" :active-value="1" :inactive-value="0" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="排序" prop="sorts">
							<el-input-number v-model="ruleForm.sorts" placeholder="请输入排序" clearable />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="submit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<style scoped>
:deep(.el-select),
:deep(.el-input-number) {
	width: 100%;
}
:deep(.el-checkbox__label) {
	width: 40px;
}
</style>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { getDictDataItem as di, getDictDataList as dl } from '/@/utils/dict-utils';
import { ElMessage } from 'element-plus';
import type { FormRules } from 'element-plus';
import { addMesHolidayType, updateMesHolidayType, detailMesHolidayType } from '/@/api/mes/mesHolidayType';
let fullScreen = ref(false);
//父级传递来的参数
var props = defineProps({
	title: {
		type: String,
		default: '',
	},
});
//父级传递来的函数，用于回调
const emit = defineEmits(['reloadTable']);
const ruleFormRef = ref();
const isShowDialog = ref(false);
const ruleForm = ref<any>({});
//自行添加其他规则
const rules = ref<FormRules>({
	holidayCode: [{ required: true, message: '请输入公休日编码！', trigger: 'blur' }],
	holidayName: [{ required: true, message: '请输入公休日名称！', trigger: 'blur' }],
	holidayType: [{ required: true, message: '请选择公休日类型！', trigger: 'blur' }],
});

const restDays = ref([]);
const restDays1 = ref([]);
// 打开弹窗
const openDialog = async (row: any) => {
	// ruleForm.value = JSON.parse(JSON.stringify(row));
	// 改用detail获取最新数据来编辑
	let rowData = JSON.parse(JSON.stringify(row));
	if (rowData.id) {
		var data = (await detailMesHolidayType(rowData.id)).data.result;
		if (data.holidayType == '月休') {
			if (data.restDays) restDays.value = data.restDays.split(',').map((item: any) => parseInt(item));
		} else if (data.holidayType == '周休') {
			if (data.restDays) restDays.value = data.restDays.split(',');
		} else if (data.holidayType == '单双休') {
			if (data.restDays) {
				var sps = data.restDays.split('|');
				if (sps[0]) {
					restDays.value = sps[0].split(',');
				} else {
					restDays.value = [];
				}
				if (sps[1]) {
					restDays1.value = sps[1].split(',');
				} else {
					restDays1.value = [];
				}
			}
		}
		ruleForm.value = data;
	} else {
		restDays.value = [];
		restDays1.value = [];
		ruleForm.value = rowData;
	}
	isShowDialog.value = true;
};

const handleChange = () => {
	restDays.value = [];
	restDays1.value = [];
};

// 关闭弹窗
const closeDialog = () => {
	emit('reloadTable');
	isShowDialog.value = false;
};

// 取消
const cancel = () => {
	isShowDialog.value = false;
};

// 提交
const submit = async () => {
	ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
		if (isValid) {
			let values = JSON.parse(JSON.stringify(ruleForm.value));
			if(restDays.value){
				restDays.value = restDays.value.filter(item => !isNaN(item));
			}
			if (values.holidayType == '周休' || values.holidayType == '月休') {
				values.restDays = restDays.value.join(',');
			} else if (values.holidayType == '单双休') {
				values.restDays = `${restDays.value.join(',')}|${restDays1.value.join(',')}`;
			}

			if (ruleForm.value.id == undefined || ruleForm.value.id == null || ruleForm.value.id == '' || ruleForm.value.id == 0) {
				await addMesHolidayType(values);
			} else {
				await updateMesHolidayType(values);
			}
			closeDialog();
		} else {
			ElMessage({
				message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
				type: 'error',
			});
		}
	});
};

// 页面加载时
onMounted(async () => {});

//将属性或者函数暴露给父组件
defineExpose({ openDialog });
</script>
