<template>
	<div class="device-line-edit-container">
		<el-dialog title="修改线路" v-model="state.dialogVisible" draggable>
			<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="150px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="线路号" prop="trunkId" :rules="[{ required: true, message: '请输入线路号', trigger: 'blur' }]">
							<el-input v-model="state.ruleForm.trunkId" placeholder="请输入线路号" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="早上时间" prop="morningTime" :rules="[{ required: true, message: '请选择早上时间', trigger: 'change' }]">
							<el-time-picker
								v-model="state.ruleForm.morningTime"
								is-range
								range-separator="至"
								start-placeholder="早上开始时间"
								end-placeholder="早上结束时间"
								@change="getMorningTime"
								format="HH:mm:ss"
								value-format="HH:mm:ss"
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="下午时间" prop="afternoonTime" :rules="[{ required: true, message: '请选择下午时间', trigger: 'change' }]">
							<el-time-picker
								v-model="state.ruleForm.afternoonTime"
								is-range
								range-separator="至"
								start-placeholder="下午开始时间"
								end-placeholder="下午结束时间"
								@change="getAfternoonTime"
								format="HH:mm:ss"
								value-format="HH:mm:ss"
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="工作日" prop="workDay" :rules="[{ required: true, message: '请选择工作日', trigger: 'change' }]">
							<el-select v-model="state.ruleForm.workDay" placeholder="请选择工作日" value-key="weekValue" class="w100" multiple>
								<el-option v-for="item in state.workDayList" :key="item.weekValue" :label="item.weekName" :value="item" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="工作时间IVR" prop="workCategory" :rules="[{ required: true, message: '请选择工作时间IVR', trigger: 'change' }]">
							<el-select v-model="state.ruleForm.workCategory" value-key="id" placeholder="请选择工作时间IVR" class="w100">
								<el-option v-for="item in state.workCategoryList" :key="item.id" :label="item.name" :value="item.id" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="休息时间IVR" prop="restCategory" :rules="[{ required: true, message: '请选择休息时间IVR', trigger: 'change' }]">
							<el-select v-model="state.ruleForm.restCategory" value-key="id" placeholder="请选择休息时间IVR" class="w100">
								<el-option v-for="item in state.restCategoryList" :key="item.id" :label="item.name" :value="item.id" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item
							label="工作时间直转分机组"
							prop="workToGroup"
							:rules="[{ required: true, message: '请选择工作时间直转分机组', trigger: 'change' }]"
						>
							<el-select v-model="state.ruleForm.workToGroup" value-key="no" placeholder="请选择工作时间直转分机组" class="w100">
								<el-option v-for="item in state.workToGroupList" :key="item.no" :label="item.name" :value="item.no" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item
							label="休息时间直转分机组"
							prop="restToGroup"
							:rules="[{ required: true, message: '请选择休息时间直转分机组', trigger: 'change' }]"
						>
							<el-select v-model="state.ruleForm.restToGroup" value-key="no" placeholder="请选择休息时间直转分机组" class="w100">
								<el-option v-for="item in state.restToGroupList" :key="item.no" :label="item.name" :value="item.no" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="评分IVR" prop="evaluateCategory" :rules="[{ required: false, message: '请选择评分IVR', trigger: 'change' }]">
							<el-select v-model="state.ruleForm.evaluateCategory" value-key="id" placeholder="请选择休息时间IVR" class="w100">
								<el-option v-for="item in state.restCategoryList" :key="item.id" :label="item.name" :value="item.id" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="是否启用" prop="isEnable" :rules="[{ required: false, message: '是否启用', trigger: 'change' }]">
							<el-switch v-model="state.ruleForm.isEnable" inline-prompt active-text="启" inactive-text="禁"></el-switch>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" class="default-button">取 消</el-button>
					<el-button type="primary" @click="onSubmit(ruleFormRef)" v-waves="'light'" :loading="state.loading">确 定 </el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="deviceLineEdit">
import { reactive, ref } from 'vue';
import { ElMessage, FormInstance } from 'element-plus';
import { authAll } from '/@/utils/authFunction';
import { updateLine, getLineDetail, baseInfo } from '/@/api/device/line';
import other from '/@/utils/other';

// 定义接口来定义对象的类型
interface OrgFormState {
	dialogVisible: boolean;
	ruleForm: {
		trunkId: string; // 线路号
		morningTime: EmptyArrayType; // 上午时间
		afternoonTime: EmptyArrayType; // 下午时间
		morningBegin: string; //早上开始时间
		morningEnd: string; // 早上结束时间
		afterBegin: string; // 下午开始时间
		afterEnd: string; //下午结束时间
		workDay: Array<any>; //工作日
		workCategory: string; //工作时间IVR
		restCategory: string; // 休息时间IVR
		workToGroup: string; // 工作时间直转分机组
		restToGroup: string; //休息时间直转分机组
		evaluateCategory: string; // 评分IVR
		isEnable: boolean; //是否启用
	};
	workDayList: Array<any>; // 工作日数据
	workCategoryList: Array<any>; // 工作时间IVR数据
	restCategoryList: Array<any>; // 休息时间IVR数据
	workToGroupList: Array<any>; // 工作时间直转分机组数据
	restToGroupList: Array<any>; // 休息时间直转分机组数据
	loading: boolean;
}

// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList']);

// 定义变量内容
const ruleFormRef = ref<FormInstance>();
const state = reactive<OrgFormState>({
	dialogVisible: false,
	ruleForm: {
		trunkId: '',
		morningTime: [],
		afternoonTime: [],
		morningBegin: '',
		morningEnd: '',
		afterBegin: '',
		afterEnd: '',
		workDay: [],
		workCategory: '',
		restCategory: '',
		workToGroup: '',
		restToGroup: '',
		evaluateCategory: '',
		isEnable: true,
	},
	workDayList: [],
	workCategoryList: [],
	restCategoryList: [],
	workToGroupList: [],
	restToGroupList: [],
	loading: false,
});
// 获取上午时间
const getMorningTime = (val: string[]) => {
	state.ruleForm.morningBegin = val[0];
	state.ruleForm.morningEnd = val[1];
};
// 获取下午时间
const getAfternoonTime = (val: string[]) => {
	state.ruleForm.afterBegin = val[0];
	state.ruleForm.afterEnd = val[1];
};
// 打开弹窗
const openDialog = async (row: any) => {
	ruleFormRef.value?.clearValidate();
	ruleFormRef.value?.resetFields();
	// 获取详情
	if (!authAll(['device:line:detail', 'device:line:baseData'])) ElMessage.warning('抱歉，您没有权限获取线路详情！');
	else {
		try {
			const res: any = await Promise.all([getLineDetail(row.id), baseInfo()]);
			state.ruleForm = res[0].result;
			state.ruleForm.morningTime = [res[0].result.morningBegin, res[0].result.morningEnd];
			state.ruleForm.afternoonTime = [res[0].result.afterBegin, res[0].result.afterEnd];
			const { workDay, restCategory, workCategorys, workToGroup, restToGroup } = res[1].result;
			state.workDayList = workDay;
			state.workCategoryList = workCategorys;
			state.restCategoryList = restCategory;
			state.workToGroupList = workToGroup;
			state.restToGroupList = restToGroup;
			state.dialogVisible = true;
		} catch (error) {
			console.log(error);
		}
	}
};
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 编辑保存
const onSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid: boolean) => {
		if (!valid) return;
		let requestData = other.deepClone(state.ruleForm);
		// 移除无用的参数
		delete requestData.morningTime;
		delete requestData.afternoonTime;
		// 调用新增接口，传入requestData
		updateLine(requestData).then(() => {
			emit('updateList');
			closeDialog(); // 关闭弹窗
			ElMessage.success('操作成功');
		});
	});
};
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>
