<template>
	<el-dialog v-model="state.dialogVisible" draggable title="审核历史" append-to-body destroy-on-close>
		<vxe-table
			border
			:loading="loading"
			:data="state.tableData"
			:column-config="{ resizable: true }"
			:row-config="{ isCurrent: true, isHover: true, height: 30, useKey: true }"
			ref="tableRef"
			show-overflow
			:scrollY="{ enabled: true, gt: 100 }"
			showHeaderOverflow
			max-height="400px"
		>
			<vxe-column field="knowledgeApproveTypeText" title="审核类型" width="100"></vxe-column>
			<vxe-column field="knowledgeApproveStatusText" title="审核结果" width="100"></vxe-column>
			<vxe-column field="approveOpinion" title="审核意见" min-width="200"></vxe-column>
			<vxe-column field="approver.name" title="审核人" width="120"></vxe-column>
			<vxe-column field="approveTime" title="审核时间" width="160">
				<template #default="{ row }">
					{{ formatDate(row.approveTime, 'YYYY-mm-dd HH:MM:SS') }}
				</template>
			</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-table>
	</el-dialog>
</template>

<script lang="tsx" setup name="roleUserList">
import { reactive, ref } from 'vue';
import { formatDate } from '@/utils/formatTime';
import { knowledgeAuditHistory } from '@/api/knowledge/audit';

// 定义接口来定义对象的类型
interface StateRoles {
	dialogVisible: boolean;
	currentRow: any;
	tableData: Array<any>;
}

// 定义子组件向父组件传值/事件
const loading = ref<boolean>(false); // 是否显示加载
// 定义变量内容
const state = reactive<StateRoles>({
	dialogVisible: false, // 弹窗显示隐藏
	currentRow: {}, // 当前行数据
	tableData: [], // 表格数据
});
// 打开弹窗
const openDialog = (row: any) => {
	state.dialogVisible = true;
	getList(row.knowledgeId);
};
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
const getList = (id: string) => {
	loading.value = true;
	knowledgeAuditHistory(id)
		.then((res: any) => {
			state.tableData = res?.result ?? [];
			loading.value = false;
		})
		.catch(() => {
			loading.value = false;
		});
};
//暴漏变量和方法
defineExpose({ closeDialog, openDialog });
</script>
