<route lang="yaml">
  name: executionLog
</route>

<script lang="ts" setup name="excutionLog">
import { ref } from "vue";
import { ElMessage } from "element-plus";
import Table from "@/components/Table/index.vue";
import Drawer from '@/components/Drawer/index.vue'

import {
  getMetaDataTaskLog,getMetacompareList,getMetaChangeRecord
} from "@/api/modules/dataMetaService"
import { useRouter, useRoute } from "vue-router";
import Moment from 'moment';
import { changeNum } from '@/utils/common'
import { TableColumnWidth } from "@/utils/enum";

const { proxy } = getCurrentInstance() as any;

const router = useRouter();
const route = useRoute();

const collectTaskGuid: any = ref(route.query.guid);
const collectTaskType: any = ref(route.query.type);
const page = ref({
  limit: 50,
  curr: 1,
  sizes: [
    { label: "10", value: 10 },
    { label: "50", value: 50 },
    { label: "100", value: 100 },
    { label: "150", value: 150 },
    { label: "200", value: 200 },
  ],
});

const originFields: any = ref([
  { label: "采集任务名称", field: "collectTaskName", width: 140 },
  { label: "数据源名称", field: "datasourceName", width: 160 },
  { label: "执行计划", field: "collectType", type: 'filter', width: 90 },
  { label: "执行状态", field: "execResult", width: 100, type: "tag", align: 'center' },
  {
    label: "执行时间", field: "execTime", width: TableColumnWidth.DATETIME, getName: (scope) => {
      let row = scope.row;
      return row.execTime && Moment(row.execTime).format('YYYY-MM-DD HH:mm:ss');
    }
  },
  {
    label: "耗时(秒)", field: "execDuration", width: TableColumnWidth.EXECDURATION, align: "right", getName: (scope) => {
      return scope.row.execDuration != null ? changeNum(scope.row.execDuration ?? 0) : '--';
    }
  },
]);

const tableInfo = ref({
  id: "user-authority-table",
  fields: [],
  data: [],
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 150,
    fixed: 'right',
    btns: (scope)=>{

    return [
      { label: "元数据变更记录", value: "log_detail",disabled:scope.row['execResult']==='N' || scope.row['execResult']==='R'},
    ]
    }
  },
  loading: false
});
const metaChangePage: any = ref({
  limit: 50,
  curr: 1,
  sizes: [
    { label: "10", value: 10 },
    { label: "50", value: 50 },
    { label: "100", value: 100 },
    { label: "150", value: 150 },
    { label: "200", value: 200 },
  ],
  metaTaskName: '',
  changeState: null,
  changeType: ''
});
const formTable = ref({
  type: "table",
  title: "",
  col: 'no-margin',
  
  tableInfo: {
    id: "task-detail-table",
    minHeight: 'unset',
    fields: [
    { label: "序号", type: "index", width: 56, align: "center", fixed: "left" },
   { label: "表中文名称", field: "tableChName", width: 180, },
   { label: "表英文名称", field: "tableName", width: 180, },
   { label: "元数据名称", field: "metaName", width: 180, },
      {
        label: "元数据类型", field: "metaType", width: 100, getName: (scope) => {
          if (!scope.row.metaType) {
            return '--';
          }
          return scope.row.metaType == 'TABLE' ? '表' : (scope.row.metaType == 'INDEX' ? '索引' : (scope.row.metaType == 'PRI' ? '主键' : '字段'));
        }
      },
      {
        label: "变更类型", field: "metaChangeType", width: 100, getName: (scope) => {
          if (!scope.row.metaChangeType) {
            return '--';
          }
          return scope.row.metaChangeType == 'ADD' ? '新增' : (scope.row.metaChangeType == 'DELETE' ? '删除' : '修改');
        }
      },
      { label: "变化", field: "metaChangeType", width: 100,type: 'popover',value:'metaCurrValue',column:[{field:"item",label:"变化信息",width:"150"},{field:"oldValue",label:"原值",width:"150"},{field:"newValue",label:"现值",width:"150"}] },
      // { label: "原值", field: "metaOldValue", width: 120 },
      { label: "元数据采集时间", field: "changeTime", width: 180, },
      // { label: "状态", field: "changeTime", width: 180, },
      // { label: "操作时间", field: "changeTime", width: 180, },
    ],
    data: [],
    loading: false,
    page:{
      rows:0,
      ...metaChangePage.value
    },
    popoverData:[],
    popoverloading:false,
    showPage: true,
    actionInfo: {
      show: false
    },
  },
})

const drawerInfo: any = ref({
  visible: false,
  direction: "rtl",
  modalClass: "wrap_width_auto",
  size: 700,
  modalClose:true,
  header: {
    title: "",
  },
  type: '',
  container: {
    contents: [
      formTable.value,
    ],
  },
  footer: {
    visible: false,
    btns: [
      { type: 'default', label: '取消', value: 'cancel' },
      { type: 'primary', label: '确认 ', value: 'save' },
    ]
  },
})
const currRow:any = ref({})
const getFirstPageData = () => {
  page.value.curr = 1
  toSearch({})
}

const toSearch = (val: any, clear: boolean = false) => {
  let params: any = Object.keys(val).length ? { ...val } : {}
  params.pageIndex = page.value.curr;
  params.pageSize = page.value.limit;
  params.collectTaskGuid = collectTaskGuid.value
  getTableData(params);
};

const getTableData = (params) => {
  tableInfo.value.loading = true
  getMetaDataTaskLog(params).then((res: any) => {
    if (res.code == proxy.$passCode) {
      const data = res.data || {}
      tableInfo.value.data = data.records || []
      tableInfo.value.page.limit = data.pageSize
      tableInfo.value.page.curr = data.pageIndex
      tableInfo.value.page.rows = data.totalRows
    } else {
      ElMessage({
        type: 'error',
        message: res.msg,
      })
    }
    tableInfo.value.loading = false
  }).catch(xhr => {
    tableInfo.value.loading = false
  })
};

const tablePageChange = (info) => {
  page.value.curr = Number(info.curr);
  page.value.limit = Number(info.limit);
  toSearch({})
};
const getMetaChangeTableData = ()=>{
  formTable.value.tableInfo.loading = true
  getMetaChangeRecord(Object.assign({execGuid:currRow.value.guid},{pageIndex:metaChangePage.value.curr,pageSize:metaChangePage.value.limit})).then((res: any) => {
      formTable.value.tableInfo.loading = false
      if (res.code == proxy.$passCode && res.data) {
        let data = res.data || {}
        formTable.value.tableInfo.data = data.records || []
        formTable.value.tableInfo.page.rows = data.totalRows
        const contents = [formTable.value]
        drawerInfo.value.container.contents = contents
        drawerInfo.value.footer.visible = false
        drawerInfo.value.visible = true
      } else {
        ElMessage({
          type: "error",
          message: '未获取到对应人员信息',
        });
      }
    })
}
const drawerTableClick = (scope,btn)=>{
  drawerInfo.value.container.contents[0].tableInfo.popoverloading = true
  getMetacompareList(scope.row.guid).then((res:any)=>{
    drawerInfo.value.container.contents[0].tableInfo.popoverloading = false
    drawerInfo.value.container.contents[0].tableInfo.popoverData = res.data
   
  })
}
const tableBtnClick = (scope, btn) => {
  const type = btn.value;
  const row = scope.row;
  currRow.value = row
  if (type == 'log_detail') {
    drawerInfo.value.header.title = row.collectTaskName;
    drawerInfo.value.type = type
    formTable.value.tableInfo.data = []
    const contents = [formTable.value]
    drawerInfo.value.container.contents = contents
    drawerInfo.value.footer.visible = false
    drawerInfo.value.visible = true
    getMetaChangeTableData()
  }
};

const drawerBtnClick = (btn, info) => {
  if (btn.value == 'cancel') {
    drawerInfo.value.visible = false
  }
}
const metaChangeTablePageChange = (info) => {
  
  metaChangePage.value.curr = Number(info.curr);
  metaChangePage.value.limit = Number(info.limit);
  formTable.value.tableInfo.page.limit = metaChangePage.value.limit;
  formTable.value.tableInfo.page.curr = metaChangePage.value.curr;
  getMetaChangeTableData();
};
onBeforeMount(() => {
  if (collectTaskType.value == '1') {
    originFields.value.splice(2, 0, { label: "同步策略", field: "collectMode", type: 'filter', width: 90 },)
  }
  tableInfo.value.fields = originFields.value;
  getFirstPageData();
});
</script>

<template>
  <div class="container_wrap">
    <div class="table_panel_wrap">
      <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" @tablePageChange="tablePageChange" />
    </div>
    <Drawer :drawerInfo="drawerInfo" @drawerBtnClick="drawerBtnClick" @drawerTableBtnClick="drawerTableClick" @drawerTablePageChange="metaChangeTablePageChange" />
  </div>
</template>

<style lang="scss" scoped>
.container_wrap {
  padding: 0;

  .table_panel_wrap {
    height: 100%;
    padding: 16px 16px 0;
  }
}

:deep(.el-drawer) {

.el-drawer__body {
  padding: 10px 10px 0px 10px;
}

.drawer_panel {
  height: 100%;

  .table_panel_wrap {
    height: 100%;
  }
}


}
</style>