<template>
	<div class="knowledge-apply-add-container">
		<el-dialog title="知识申请处理" v-model="state.isShowDialog" draggable>
			<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="100px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<span class="font16"><b>基本信息</b></span>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="诉求类型">
							{{ state.ruleForm.knowledgeApplyType === 0 ? '新增' : '更新' }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="诉求处理部门">
							{{ state.ruleForm.department }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="申请人"> </el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="申请部门"> </el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="截止时间">
							{{ formatDate(state.info.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="关联知识"> </el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="诉求内容">
							{{ state.ruleForm.content }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<span class="font16"><b>办理信息</b></span>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="关联知识" prop="knowledgeId" :rules="[{ required: true, message: '请选择关联知识', trigger: 'change' }]">
							<template #label>
								<div style="height: 34px; display: flex; align-items: center">
									关联知识
									<el-tooltip placement="top">
										<SvgIcon name="ele-QuestionFilled" size="18px" class="ml3" />
										<template #content>
											温馨提示：
											<br />
											1、新增诉求：已有对应知识时，请选择对应知识进行关联；没有对应知识时，请先新增知识，然后再进行关联 <br />
											2、更新诉求：需先更新对应知识，方可进行关联；若知识库未按照要求更新，直接关联，将影响部门指标考核
										</template>
									</el-tooltip>
								</div>
							</template>
							<el-select
								v-model="state.ruleForm.knowledgeId"
								value-key="dicDataValue"
								clearable
								filterable
								placeholder="请选择关联知识"
								style="width: 80%"
							>
								<el-option v-for="item in state.knowledgeOptions" :key="item.id" :label="item.title" :value="item.id" />
							</el-select>
							<el-button type="primary" link class="ml10" @click="createKnowledge">创建知识</el-button>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="备注" prop="opinion" :rules="[{ required: false, message: '请填写备注', trigger: 'blur' }]">
							<el-input
								style="width: 80%"
								v-model="state.ruleForm.opinion"
								type="textarea"
								:autosize="{ minRows: 6, maxRows: 8 }"
								placeholder="请填写备注"
								clearable
								maxlength="2000"
							>
							</el-input>
						</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="knowledgeApplyHandle">
import { reactive, ref, onMounted } from 'vue';
import { ElMessage, FormInstance } from 'element-plus';
import { useRouter } from 'vue-router';
import { formatDate } from '/@/utils/formatTime';
import { KnowledgeApplyDetail, KnowledgeHandle } from '/@/api/knowledge/apply';
import { KnowledgeGetknowledge } from '/@/api/knowledge';

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

// 定义变量内容
const ruleFormRef = ref<any>();
const state = reactive<any>({
	isShowDialog: false,
	ruleForm: {
		knowledgeApplyType: 1,
		KnowledgeId: '',
	},
	orgData: [], // 上级
	loading: false,
	knowledgeOptions: [],
});
const router = useRouter();
// 打开弹窗
const openDialog = async (row: any) => {
	state.loading = true;
	try {
		const res: any = await KnowledgeApplyDetail(row.id);
		state.ruleForm = res.result ?? {};
		state.isShowDialog = true;
		state.loading = false;
	} catch (error) {
		state.loading = false;
	}
};
// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 创建知识
const createKnowledge = () => {
	state.isShowDialog = false;
	router.push({
		path: '/knowledge/add',
	});
};
// 保存
const onSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid, fields) => {
		if (valid) {
			state.loading = true;
			const request = {
				id: state.ruleForm.id,
				knowledgeId: state.ruleForm.knowledgeId,
				opinion: state.ruleForm.opinion,
			};
			KnowledgeHandle(request)
				.then(() => {
					emit('updateList');
					closeDialog(); // 关闭弹窗
					state.loading = false;
					ElMessage.success('新增成功');
				})
				.catch(() => {
					state.loading = false;
				});
		} else {
			state.loading = false;
			console.log('error submit!', fields);
		}
	});
};
onMounted(async () => {
	try {
		const res: any = await KnowledgeGetknowledge({ PageIndex: 1, PageSize: 99 });
		state.knowledgeOptions = res.result?.items ?? [];
	} catch (error) {
		console.log(error);
	}
});
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>
