<!--流程的流转记录-->
<template>
  <div class="tels-restApply-precess-record">
    <el-dialog :title="state.dialogTitle" v-model="state.dialogVisible" width="80%" draggable destroy-on-close>
      <div v-loading="state.loading">
        <slot name="header"></slot>
        <slot>
          <process-time-line :data="state.traces" defaultExpandAll />
        </slot>
        <slot name="footer"></slot>
      </div>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="state.dialogVisible = false" class="default-button">关 闭</el-button>
				</span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="auditRecord">
import { reactive, defineAsyncComponent } from 'vue';
import { workflowTraces } from '/@/api/system/workflow';

// 引入组件
const ProcessTimeLine = defineAsyncComponent(() => import('/@/components/ProcessTimeLine/index.vue'));

// 定义变量内容
const state = reactive<any>({
  dialogVisible: false,
  traces: [],
  loading: false,
  dialogTitle: '',
});
// 打开弹窗
const openDialog = async (row: any) => {
  try {
    state.loading = true;
    // 查询审核记录
    const res = await workflowTraces(row.workflowId);
    state.traces = res.result?.traces ?? [];
    state.traces = formatTraces(state.traces);
    state.dialogTitle = row.dialogTitle ?? '';
    state.dialogVisible = true;
    state.loading = false;
  } catch (error) {
    state.loading = false;
  }
};
const formatTraces = (val: any) => {
  if (!val || !val.length) return [];
  val.forEach((item: any) => {
    switch (item.expiredStatus) {
      case 0:
        item.type = 'success';
        break;
      case 1:
        item.type = 'primary';
        break;
      case 2:
        item.type = 'danger';
        break;

      default:
        break;
    }
    if (item.traces?.length) {
      formatTraces(item.traces);
    }
  });
  return val;
};
// 关闭弹窗
const closeDialog = () => {
  state.dialogVisible = false;
};
// 暴露变量
defineExpose({
  openDialog,
  closeDialog,
});
</script>
