<template>
	<el-dialog v-model="state.dialogVisible" draggable title="市场明细" ref="dialogRef" append-to-body destroy-on-close>
		<el-row class="mb10">
			<el-col :span="12"> 工单编码：{{ state.ruleForm.no }} </el-col>
			<el-col :span="12"> 工单标题：{{ state.ruleForm.title }} </el-col>
		</el-row>
		<vxe-table
			border
			:loading="state.loading"
			:data="state.tableData"
			:sort-config="{ remote: true }"
			:column-config="{ resizable: true }"
			:row-config="{ isHover: true, height: 30, useKey: true }"
			ref="tableRef"
			max-height="500px"
			show-overflow
			:scrollY="{ enabled: true, gt: 100 }"
		>
			>
			<vxe-column field="activityGuid" title="步骤"></vxe-column>
			<vxe-column field="operatorouName" title="处理部门"></vxe-column>
			<vxe-column field="operateUserName" title="处理人员"></vxe-column>
			<vxe-column field="operateStatus" title="操作"></vxe-column>
			<vxe-column field="operateDate" title="收到时间" width="160">
				<template #default="{ row }">
					<span>{{ formatDate(row.operateDate, 'YYYY-mm-dd HH:MM:SS') }}</span>
				</template>
			</vxe-column>
			<vxe-column field="handleTime" title="处理时间" width="160">
				<template #default="{ row }">
					<span>{{ formatDate(row.handleTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
				</template>
			</vxe-column>
		</vxe-table>
	</el-dialog>
</template>

<script setup lang="tsx">
import { reactive, ref } from 'vue';
import { formatDate } from '@/utils/formatTime';
import { getMarketDetail } from '@/api/dataShare';

// 定义变量内容
const state = reactive<any>({
	dialogVisible: false, // 弹窗显示隐藏
	tableData: [], // 表格数据
	loading: false, // 加载状态
	ruleForm: {}, // 表单数据
});
// 打开弹窗
const openDialog = (row: any) => {
	state.dialogVisible = true;
	state.ruleForm = row;
	queryList();
};
const dialogRef = ref<RefType>();
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
/** 获取历史工单 */
const queryList = () => {
	state.loading = true;
	// {caseSerial: 'RGDH9951030024110450888'}
	getMarketDetail({ caseSerial: state.ruleForm.provinceNo })
		.then((response: any) => {
			state.tableData = response?.result ?? [];
			state.loading = false;
		})
		.catch(() => {
			state.loading = false;
		});
};
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>
