<template>
	<el-dialog v-model="state.dialogVisible" draggable :title="dialogTitle" ref="dialogRef" width="50%" append-to-body destroy-on-close @close="close">
		<div class="collapse-container">
			<el-form label-width="110px" ref="ruleFormRef" :model="state.ruleForm">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="工单编码"> {{ state.orderDetail.no }} </el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="工单标题"> {{ state.orderDetail.title }} </el-form-item>
					</el-col>
					<template v-if="isAudit">
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
							<el-form-item label="申请人"> {{ state.visitDetail.creatorName }} </el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
							<el-form-item label="申请部门"> {{ state.visitDetail.creatorOrgName }} </el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
							<el-form-item label="申请时间"> {{ formatDate(state.visitDetail.creationTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
						</el-col>
					</template>
					<template v-else>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
							<el-form-item label="申请人"> {{ userInfos.name }} </el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
							<el-form-item label="申请部门"> {{ userInfos.orgName }} </el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
							<el-form-item label="申请时间"> {{ formatDate(Date(), 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
						</el-col>
					</template>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="特别说明" class="color-danger"> 请及时联系市民处理，处理完成后在申请二次回访，由热线中心人工进行回访 </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' }]">
							<el-input
								v-model="state.ruleForm.content"
								type="textarea"
								:autosize="{ minRows: 6, maxRows: 10 }"
								placeholder="请填写二次回访说明"
								:disabled="isAudit"
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="附件">
							<annex-list
								name="二次回访附件"
								:readonly="isAudit"
								v-model:format="filesFormat"
								:businessId="state.visitDetail.id"
								classify="二次回访附件"
								v-model="state.visitDetail.files"
							/>
						</el-form-item>
					</el-col>
					<template v-if="isAudit">
						<el-divider />
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
							<el-form-item label="审批意见" prop="examinOpinion" :rules="[{ required: true, message: '请填二次回访写审批意见', trigger: 'blur' }]">
								<el-input
									v-model="state.ruleForm.examinOpinion"
									type="textarea"
									:autosize="{ minRows: 6, maxRows: 10 }"
									placeholder="请填二次回访审批意见"
								/>
							</el-form-item>
						</el-col>
					</template>
				</el-row>
			</el-form>
		</div>
		<template #footer v-if="isAudit">
			<span class="dialog-footer">
				<el-button @click="closeDialog" class="default-button">取 消</el-button>
				<el-button type="primary" @click="onPass(ruleFormRef)" :loading="state.loading">审批通过</el-button>
				<el-button type="primary" @click="onReject(ruleFormRef)" :loading="state.loading">驳回</el-button>
			</span>
		</template>
		<template #footer v-else>
			<span class="dialog-footer">
				<el-button @click="closeDialog" class="default-button">取 消</el-button>
				<el-button type="primary" @click="onSubmit(ruleFormRef)" :loading="state.loading">提交审批</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script setup lang="ts" name="secondVisitDialog">
import { computed, defineAsyncComponent, reactive, ref } from 'vue';
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useUserInfo } from '@/stores/userInfo';
import { formatDate } from '@/utils/formatTime';
import { secondVisitAdd, secondVisitDetail, secondVisitAudit } from '@/api/business/secondVisit';
import { transformFile } from '@/utils/tools';

// 引入组件
const AnnexList = defineAsyncComponent(() => import('@/components/AnnexList/index.vue'));

// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList']);
// 定义变量内容
const state = reactive<any>({
	dialogVisible: false, // 是否显示弹窗
	loading: false, // 是否显示加载
	ruleForm: {
		content: '', // 申请理由
		examinOpinion: '', // 审批意见
	},
	visitDetail: {}, //回访详情
	orderDetail: {}, // 工单详情
});
const ruleFormRef = ref<RefType>();
const storesUserInfo = useUserInfo();
const { userInfos } = storeToRefs(storesUserInfo); // 用户信息
const isAudit = ref<boolean>(false); // 是否是审核
/**
 * @description 打开弹窗
 * @param {object} val 工单详情
 * @param {boolean} audit 是否是审核
 */
const openDialog = (val: any, audit = false) => {
	if (audit) {
		secondVisitDetail(val.id).then((res) => {
			state.orderDetail = res.result?.order ?? {};
			state.ruleForm.content = res.result?.visitReason ?? '';
			state.visitDetail = res.result ?? {};
			state.visitDetail.files = transformFile(state.visitDetail.files);
		});
	} else {
		state.orderDetail = val.orderVisit?.order ?? {};
		state.visitDetail = val.orderVisit ?? {};
	}
	isAudit.value = audit;
	state.dialogVisible = true;
};
const dialogTitle = computed(() => {
	return isAudit.value ? '二次回访审核' : '二次回访申请';
});
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
const close = () => {
	ruleFormRef.value?.clearValidate();
	ruleFormRef.value?.resetFields();
};
// 提交
const filesFormat = ref<EmptyArrayType>([]); // 附件列表
const onSubmit = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid: boolean) => {
		if (!valid) return;
		state.loading = true;
		let request = {
			orderNo: state.orderDetail.no,
			orderId: state.orderDetail.id,
			visitReason: state.ruleForm.content,
			orderVisitId: state.visitDetail.id,
			files: filesFormat.value,
		};
		secondVisitAdd(request)
			.then(() => {
				state.loading = false;
				closeDialog();
				emit('updateList');
				ElMessage.success('操作成功');
			})
			.catch(() => {
				state.loading = false;
			});
	});
};
// 审批通过
const onPass = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid: boolean) => {
		if (!valid) return;
		ElMessageBox.confirm(`您确定要通过本次二次回访申请，是否继续?`, '提示', {
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning',
			draggable: true,
			cancelButtonClass: 'default-button',
			autofocus: false,
		})
			.then(() => {
				secondVisitAudit({
					id: state.visitDetail.id,
					examinOpinion: state.ruleForm.applyContent,
					isPass: true,
				}).then(() => {
					ElMessage.success('操作成功');
					state.loading = false;
					closeDialog();
					emit('updateList');
				});
			})
			.catch(() => {});
	});
};
// 审批驳回
const onReject = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid: boolean) => {
		if (!valid) return;
		ElMessageBox.confirm(`您确定要驳回本次二次回访申请，是否继续?`, '提示', {
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning',
			draggable: true,
			cancelButtonClass: 'default-button',
			autofocus: false,
		})
			.then(() => {
				secondVisitAudit({
					id: state.visitDetail.id,
					examinOpinion: state.ruleForm.examinOpinion,
					isPass: true,
				}).then(() => {
					ElMessage.success('操作成功');
					state.loading = false;
					closeDialog();
					emit('updateList');
				});
			})
			.catch(() => {});
	});
};
defineExpose({
	openDialog,
	closeDialog,
});
</script>
