<template>
	<el-dialog v-model="state.dialogVisible" width="60%" draggable title="预警管理详情" @close="close" append-to-body destroy-on-close>
		<el-form :model="state.ruleForm" label-width="100px" ref="ruleFormRef" v-loading="loading">
			<p class="border-title mb10">预警信息</p>
			<el-row :gutter="10">
				<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
					<el-form-item label="预警名称"> {{ state.ruleForm?.earlyWarningSetting?.earlyWarningName }} </el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
					<el-form-item label="预警类型"> {{ state.ruleForm?.earlyWarningSetting?.earlyWarningTypeName }} </el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
					<el-form-item label="预警级别"> {{ state.ruleForm?.earlyWarningSetting?.earlyWarningLevelName }} </el-form-item>
				</el-col>
				<el-col>
					<el-form-item label="预警地点"> {{ state.ruleForm?.fullAddress }} </el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<p class="border-title mb20 mt20">预警工单</p>
		<vxe-table
			border
			:loading="loading"
			:data="state.tableData"
			:column-config="{ resizable: true }"
			:row-config="{ isCurrent: true, isHover: true, height: 30, useKey: true, keyField: 'id' }"
			ref="tableRef"
			show-overflow
			:scrollY="{ enabled: true, gt: 100 }"
			showHeaderOverflow
			max-height="500"
		>
			<vxe-column field="order.no" title="工单编码"></vxe-column>
			<vxe-column field="title" title="工单标题" min-width="200">
				<template #default="{ row }">
					<order-detail :order="row.order">{{ row.order?.title }}</order-detail>
				</template>
			</vxe-column>
			<vxe-column field="order.acceptType" title="受理类型"></vxe-column>
			<vxe-column field="order.creationTime" title="受理时间" width="160">
				<template #default="{ row }">
					{{ formatDate(row.order?.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
				</template>
			</vxe-column>
			<vxe-column field="order.hotspotName" title="热点分类"></vxe-column>
			<vxe-column field="order.fullAddress" title="事发地址"></vxe-column>
		</vxe-table>
		<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 { defineAsyncComponent, reactive, ref } from 'vue';
import { getEarlyManageDetail } from '@/api/early/manage';
import { formatDate } from '@/utils/formatTime';

const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情

// 定义变量内容
const state = reactive<any>({
	dialogVisible: false,
	ruleForm: {},
	tableData: [],
});
// 获取详情
let loading = ref<boolean>(false); // 加载状态
const getDetail = (id: string) => {
	loading.value = true;
	getEarlyManageDetail(id)
		.then((res: any) => {
			state.ruleForm = res.result;
			state.tableData = res.result.earlyWarningOrderDetails;
			loading.value = false;
		})
		.catch((err) => {
			console.log(err);
			loading.value = false;
		});
};
// 打开弹窗
const ruleFormRef = ref<RefType>();
const openDialog = async (id: string) => {
	ruleFormRef.value?.resetFields();
	try {
		state.dialogVisible = true;
		getDetail(id);
	} catch (error) {
		console.log(error);
	}
};
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
const close = () => {
	ruleFormRef.value?.resetFields();
	ruleFormRef.value?.resetFields();
};
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>
