<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="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="申请人">
							{{ state.ruleForm.creationName }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="申请部门">
							{{ state.ruleForm.creationBMName }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12"  v-if="state.ruleForm.expiredTime">
						<el-form-item label="截止时间">
							{{ formatDate(state.ruleForm.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}
						</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-divider />
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="state.ruleForm.kbTitle">
						<el-form-item label="关联知识">
							<span style="color: var(--el-color-primary)">
								{{ state.ruleForm.kbTitle }}
							</span>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="state.ruleForm.processor">
						<el-form-item label="处理人">
							{{ state.ruleForm.processor }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="state.ruleForm.handleTime">
						<el-form-item label="处理完成时间">
							{{ formatDate(state.ruleForm.handleTime, 'YYYY-mm-dd HH:MM:SS') }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="state.ruleForm.returnTime">
						<el-form-item label="退回时间">
							{{ formatDate(state.ruleForm.returnTime, 'YYYY-mm-dd HH:MM:SS') }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="state.ruleForm.opinion">
						<el-form-item label="备注">
							{{ state.ruleForm.opinion }}
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" class="default-button">关 闭</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="knowledgeMyApplyDetail">
import { reactive, ref } from 'vue';
import { formatDate } from '/@/utils/formatTime';
import { KnowledgeApplyDetail } from '/@/api/knowledge/apply';

// 定义变量内容
const ruleFormRef = ref<any>();
const state = reactive<any>({
	isShowDialog: false,
	ruleForm: {
		knowledgeApplyType: 1,
		KnowledgeId: '',
	},
	orgData: [], // 上级
	loading: false,
	identityTypeOptions: [],
});
// 打开弹窗
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();
};
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>
