<template>
	<el-dialog v-model="state.dialogVisible" draggable title="查看回复" append-to-body ref="dialogRef" destroy-on-close>
		<el-form :model="state.ruleForm" label-width="90px" ref="ruleFormRef">
			<el-form-item label="回复内容"> {{ state.ruleForm.replyContent }} </el-form-item>
			<el-form-item label="完成时间"> {{ formatDate(state.ruleForm.replyTime, 'YYYY-mm-dd') }} </el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="closeDialog" class="default-button">关 闭</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { getObservationsReplyDetail } from '@/api/business/observations';
import { formatDate } from '@/utils/formatTime';

// 定义变量内容
const state = reactive<any>({
	dialogVisible: false,
	ruleForm: {
		urgeContent: null, // 催办内容
		acceptSms: false, // 发送短信
	},
	fileList: [], // 附件列表
	loading: false, // 提交按钮loading
});
const ruleFormRef = ref<RefType>();
// 打开弹窗
const openDialog = async (val: any) => {
	getInfo(val.id);
	state.dialogVisible = true;
};
// 获取回复信息
const getInfo = (id: string) => {
	getObservationsReplyDetail(id).then((response) => {
		state.ruleForm = response?.result ?? {};
	});
};
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>
