<template>
	<el-drawer v-model="drawer" title="公开信息" destroy-on-close>
		<el-form :model="state.ruleForm" ref="ruleFormRef" @submit.native.prevent label-width="80px" v-loading="loading" class="show-info-form">
			<el-form-item label="答复部门"> {{ state.ruleForm.answerOu }}</el-form-item>
			<el-form-item label="答复时间">{{ state.ruleForm.auditFirstTime }} </el-form-item>
			<el-form-item label="答复内容" class="formatted-text">{{ state.ruleForm.answerContent }} </el-form-item>
			<el-form-item label="初审人">{{ state.ruleForm.auditFirstName }} </el-form-item>
			<el-form-item label="初审时间">{{ state.ruleForm.auditFirstTime }} </el-form-item>
			<el-form-item label="二审人">{{ state.ruleForm.auditSecondName }} </el-form-item>
			<el-form-item label="公开时间">{{ state.ruleForm.publishDate }} </el-form-item>
			<el-form-item label="公开意见" class="formatted-text">{{ state.ruleForm.publicOpinion }} </el-form-item>
		</el-form>
    <template #footer>
			<span class="dialog-footer">
				<el-button @click="closeDrawer" class="default-button">关 闭</el-button>
			</span>
    </template>
	</el-drawer>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { provinceZmhdDetail } from '@/api/province';

// 定义变量内容
const state = reactive<any>({
	ruleForm: {
		answerOu: '',
		answerContent: '',
		auditFirstName: '',
		auditFirstTime: '',
		auditSecondName: '',
		publishDate: '',
		publicOpinion: '',
	},
});

const drawer = ref(false);
const openDrawer = (row: any) => {
	drawer.value = true;
	getData(row);
};
const loading = ref(false);
const getData = async (data: any) => {
	loading.value = true;
	try {
		const { result } = await provinceZmhdDetail({ Id: data.orderProvinceZmhdId });
		state.ruleForm = result;
		loading.value = false;
	} catch (e) {
		console.log(e);
		loading.value = false;
	}
};
const closeDrawer = () => {
	drawer.value = false;
};
defineExpose({
	openDrawer,
	closeDrawer,
});
</script>
