<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" :disabled="loading">
			<p class="border-title mb10 mt20">推送工单</p>
			<vxe-table
				border
				:loading="state.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="no" title="工单编码"></vxe-column>
				<vxe-column field="title" title="工单标题" min-width="200">
					<template #default="{ row }">
						<order-detail :order="row" @updateList="queryList">{{ row.title }}</order-detail>
					</template>
				</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="hotspotName" title="热点分类"></vxe-column>
				<vxe-column field="hotspotName" title="事发地址"></vxe-column>
				<vxe-column field="statusText" title="工单状态" width="160">
					<template #default="{ row }">
						<el-text type="danger" tag="b" v-if="[1, 2, 3, 9, 101, 102, 103, 104, 105, 200].includes(row.status)">{{ row.statusText }}</el-text>
						<span v-else>{{ row.statusText }}</span>
					</template>
				</vxe-column>
			</vxe-table>
			<p class="border-title mb10 mt20">报告文件</p>
		</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 { defineAsyncComponent, reactive, ref } from 'vue';
import { ElMessage, FormInstance } from 'element-plus';
import { throttle } from '@/utils/tools';
import { addEarlySetting, getEarlySettingBaseData } from '@/api/early/setting';
import { getEarlyManageDetail } from '@/api/early/manage';
import { formatDate } from '@/utils/formatTime';


const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList']);

// 定义变量内容
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) => {
			console.log(res);
			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>
