<template>
	<el-dialog v-model="state.dialogVisible" width="50%" draggable :title="dialogTitle">
		<el-form :model="state.ruleForm" label-width="110px" ref="ruleFormRef">
			<template v-if="dialogTitle === '编辑通知'">
				<el-row :gutter="10">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="通知类型" prop="commonType" :rules="[{ required: true, message: '请选择通知类型', trigger: 'change' }]">
							<el-select v-model="state.ruleForm.commonType" placeholder="请选择通知类型" clearable class="w100">
								<el-option v-for="item in commonType" :value="item.key" :key="item.key" :label="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<el-form-item label="通知标题" prop="content" :rules="[{ required: true, message: '请输入通知标题', trigger: 'blur' }]">
							<el-input v-model="state.ruleForm.content" placeholder="请输入通知标题" clearable show-word-limit maxlength="200"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<el-form-item label="必须阅读" prop="content" :rules="[{ required: true, message: '请选择必须阅读', trigger: 'change' }]">
							<el-radio-group v-model="state.ruleForm.content">
								<el-radio label="1">是</el-radio>
								<el-radio label="2">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
			</template>
			<template v-if="dialogTitle === '编辑公告'">
				<el-row :gutter="10">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="公告类型" prop="bulletinObj" :rules="[{ required: true, message: '请选择公告类型', trigger: 'change' }]">
							<el-select
								v-model="state.ruleForm.bulletinObj"
								placeholder="请选择公告类型"
								value-key="dicDataValue"
								class="w100"
								@change="
									(e) => {
										state.ruleForm.bulletinTypeId = e.dicDataValue;
										state.ruleForm.bulletinTypeName = e.dicDataName;
									}
								"
							>
								<el-option v-for="item in bulletinTypeOptions" :value="item" :key="item.dicDataValue" :label="item.dicDataName" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<el-form-item label="公告标题" prop="title" :rules="[{ required: true, message: '请输入公告标题', trigger: 'blur' }]">
							<el-input v-model="state.ruleForm.title" placeholder="请输入公告标题"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<el-form-item label="失效时间" prop="loseEfficacyTime" :rules="[{ required: true, message: '请选择失效时间', trigger: 'change' }]">
							<el-date-picker
								v-model="state.ruleForm.loseEfficacyTime"
								type="datetime"
								placeholder="请选择失效时间"
								value-format="YYYY-MM-DD[T]HH:mm:ss"
								class="w100"
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<el-form-item label="来源单位" prop="sourceOrgId" :rules="[{ required: true, message: '请选择来源单位', trigger: 'change' }]">
							<el-cascader
								:options="orgsOptions"
								filterable
								:props="{ value: 'id', label: 'name', emitPath: false, checkStrictly: true }"
								placeholder="请选择来源单位"
								class="w100"
								v-model="state.ruleForm.sourceOrgId"
								ref="orgRef"
                @change="changeOrg"
							>
							</el-cascader>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="公告范围" prop="pushRangesArray" :rules="[{ required: true, message: '请选择公告范围', trigger: 'change' }]">
							<el-checkbox-group v-model="state.ruleForm.pushRangesArray">
								<el-checkbox :label="item.dicDataValue" v-for="item in pushRangesOptions" :key="item.dicDataValue">{{
									item.dicDataName
								}}</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="文档内容" prop="content" :rules="[{ required: true, message: '请输入文档内容', trigger: 'blur' }]">
							<editor v-model:get-html="state.ruleForm.content" placeholder="请输入文档内容" height="450px" />
						</el-form-item>
					</el-col>
				</el-row>
			</template>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="closeDialog" class="default-button">关 闭</el-button>
				<el-button type="primary" @click="onSubmit(ruleFormRef)" :loading="loading">确 定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="noticeDetail">
import { reactive, ref, defineAsyncComponent } from 'vue';
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import { bulletinAddBaseData, bulletinDetail } from '/@/api/auxiliary/notice';
import { throttle } from '/@/utils/tools';
import { FormInstance } from 'element-plus';
// 引入组件
const Editor = defineAsyncComponent(() => import('/@/components/Editor/index.vue')); // 富文本编辑器
// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList']);
const props = defineProps({
	commonType: {
		type: Array,
		default: () => [],
	},
});
// 定义变量内容
const state = reactive<any>({
	dialogVisible: false,
	ruleForm: {
		bulletinObj: {}, // 公告类型
		bulletinType: '', // 公告类型
		bulletinTypeName: '', // 公告类型
		title: '', // 公告标题
		loseEfficacyTime: '', // 失效时间
		sourceOrgId: '', // 来源单位
		pushRangesArray: [], // 公告范围
		content: '', // 文档内容
		sourceOrg: [], // 来源单位
	},
});
let loading = ref<boolean>(false); // 加载状态
// 打开弹窗
const ruleFormRef = ref<RefType>();
const dialogTitle = ref<string>('编辑通知');

const bulletinTypeOptions = ref<EmptyArrayType>([]); // 公告类型
const circularTypeOptions = ref<EmptyArrayType>([]); // 通知类型
const pushRangesOptions = ref<EmptyArrayType>([]); // 公告范围
const orgsOptions = ref<EmptyArrayType>([]); // 来源单位
const openDialog = async (row: any, type: string) => {
	ruleFormRef.value?.resetFields();
	switch (type) {
		case '0':
			dialogTitle.value = '编辑通知';
			break;
		case '1':
			dialogTitle.value = '编辑公告';
			const [responseAnnounce, response] = await Promise.all([bulletinAddBaseData(), bulletinDetail(row.id)]);
			bulletinTypeOptions.value = responseAnnounce.result?.bulletinType ?? [];
			pushRangesOptions.value = responseAnnounce.result?.pushRanges ?? [];
			orgsOptions.value = responseAnnounce.result?.orgsOptions ?? [];

			state.ruleForm = response.result;
			state.ruleForm.bulletinObj = {
				dicDataValue: response.result.bulletinTypeId,
				dicDataName: response.result.bulletinTypeName,
			};
			state.ruleForm.pushRangesArray = response.result.pushRanges.map((item: any) => {
				return item.key;
			});
			break;
		default:
			dialogTitle.value = '编辑通知';
			break;
	}
	try {
		state.dialogVisible = true;
	} catch (error) {
		console.log(error);
	}
};
const orgRef = ref<RefType>(); //来源单位
const changeOrg = () => {
  const currentNode = orgRef.value.getCheckedNodes();
  state.ruleForm.sourceOrgName = currentNode[0].label;
};
// 保存
const onSubmit = throttle(async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid: boolean) => {
		if (!valid) return;
		loading.value = true;
    switch (dialogTitle.value) {
      case '编辑通知':
        break;
      case '编辑公告':
        const pushRanges = state.ruleForm.pushRangesArray.map((item: any) => {
          const element = pushRangesOptions.value.filter((element: any) => element.dicDataValue === item)[0];
          return {
            key: element.dicDataValue,
            value: element.dicDataName,
          }
        });
        const request = {
          ...state.ruleForm,
          pushRanges,
        }
        console.log(request);
        break;
    }
	});
}, 300);
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>
