<template>
	<el-dialog v-model="state.dialogVisible" width="60%" draggable title="查看修改记录" append-to-body destroy-on-close>
		<vxe-table
			border
			:loading="state.loading"
			:data="state.tableData"
			:column-config="{ resizable: true }"
			:row-config="{ isCurrent: true, isHover: true, height: 30, useKey: true }"
			ref="tableRef"
			max-height="400px"
			show-overflow
			:scrollY="{ enabled: true, gt: 100 }"
		>
			<vxe-column field="updateOrderTypeText" title="修改类型" width="140"></vxe-column>
			<vxe-column field="oldValue" title="修改前" width="200"></vxe-column>
			<vxe-column field="newValue" title="修改后" width="200"></vxe-column>
			<vxe-column field="creatorName" title="修改人" width="120"></vxe-column>
			<vxe-column field="creationTime" title="修改时间" width="160">
				<template #default="{ row }">
					{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
				</template>
			</vxe-column>
			<vxe-column field="orderNo" title="工单编码" width="140"></vxe-column>
			<vxe-column field="provinceNo" title="省本地编码" width="240"></vxe-column>
		</vxe-table>
		<template #footer>
			<el-button @click="state.dialogVisible = false" class="default-button">关 闭</el-button>
		</template>
	</el-dialog>
</template>
<script setup lang="tsx">
import { formatDate } from '@/utils/formatTime';
import { reactive } from 'vue';
import { getEditRecord } from '@/api/dataShare';

const state = reactive({
	queryParams: {
		id: '',
	},
	tableData: [], //表格
	loading: false, // 加载
	total: 0, // 总数
	dialogVisible: false, // 弹窗
});
// 打开弹窗
const openDialog = (row?: any) => {
	if (row) {
		state.queryParams.id = row.id;
		queryList();
	}
};
// 查看修改记录
const queryList = async () => {
	state.dialogVisible = true;
	try {
		state.loading = true;
		const res = await getEditRecord(state.queryParams);
		state.tableData = res.result ?? [];
		state.loading = false;
	} catch (e) {
		console.log(e);
		state.loading = false;
	}
};
defineExpose({
	openDialog,
});
</script>
