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

<script lang="ts" setup name="damQualityAssessLog">
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  getAssessDetailTableData,
} from '@/api/modules/dataAssetQuality';
import { ElMessage } from "element-plus";
import { changeNum } from '@/utils/common';
import { TableColumnWidth } from "@/utils/enum"
const { proxy } = getCurrentInstance() as any;

const router = useRouter();
const route = useRoute();
/** 方案guid */
const planGuid = route.query.guid;
const reportGuid = route.query.reportGuid;
const planName = route.query.name;
const execType = 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 tableInfo = ref({
  id: "user-authority-table",
  fields: [
    { type: "index", width: TableColumnWidth.INDEX, align: "center", label: "序号" },
    { label: "数据资产名称", field: "damName", width: 160 },
    { label: "所属企业", field: "tenantName", width: 240 },
    { label: "质量评分", field: "qualityScore", width: 120, align: 'right' },
    { label: "执行状态", field: "execResult", width: TableColumnWidth.STATE, align: 'center', type: "tag" },
    { label: "执行时间", field: "lastExecTime", width: TableColumnWidth.DATETIME, },
    { label: "执行人", field: "updateUserName", width: TableColumnWidth.USERNAME },
  ],
  loading: false,
  data: [],
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 160,
    fixed: 'right',
    btns: (scope) => {
      return [
        { label: "查看报告", disabled: scope.row.execResult != 'Y', value: "reportView", click: (scope) => {
          let row = scope.row;
          router.push({
            name: 'damAnalysisReport',
            query: {
              planGuid: row.planGuid,
              name: row.damName,
              reportExecGuid: row.reportExecGuid
            }
          });
        } },
        {
          label: "查看结果", value: "resultView", click: (scope) => {
            let row = scope.row;
            router.push({
              name: 'damAssessDetail',
              query: {
                name: row.damName,
                planExecGuid: row.planExecGuid
              }
            });
          }
        },
      ]
    }
  }
});

const formTable = ref({
  type: "table",
  title: "",
  col: 'no-margin',
  tableInfo: {
    id: "log-detail-table",
    loading: false,
    fields: [
      { label: "执行时间", field: "changeTime", width: 140, },
      { label: "日志类型", field: "metaCurrValue", width: 120 },
      { label: "日志级别", field: "collectTaskName", width: 110 },
      { label: "执行步骤", field: "updateType", width: 240 },
    ],
    data: [],
    showPage: false,
    actionInfo: {
      show: false
    },
  },
})

const drawerInfo: any = ref({
  visible: false,
  direction: "rtl",
  modalClass: "wrap_width_auto",
  size: 650,
  header: {
    title: "日志详情",
  },
  type: '',
  container: {
    contents: [
      formTable.value,
    ],
  },
  footer: {
    visible: false,
  },
})

const tablePageChange = (info) => {
  page.value.curr = Number(info.curr);
  page.value.limit = Number(info.limit);
  getTableData();
};

const getTableData = () => {
  tableInfo.value.loading = true;
  getAssessDetailTableData({ pageSize: page.value.limit, pageIndex: page.value.curr, damGuid: planGuid, reportGuid: reportGuid }).then((res: any) => {
    tableInfo.value.loading = false;
    if (res.code == proxy.$passCode) {
      const data = res.data || {}
      tableInfo.value.data = data.records || []
      tableInfo.value.page.limit = data.pageSize ?? 50;
      tableInfo.value.page.curr = data.pageIndex
      tableInfo.value.page.rows = data.totalRows ?? 0;
    } else {
      ElMessage.error(res.msg);
    }
  });
};

const tableBtnClick = (scope, btn) => {
  const type = btn.value;
  const row = scope.row;
  if (type == 'resultView') {
    if (!!execType) {
      router.push({
        name: 'syncAssessDetail',
        query: {
          name: planName,
          planGuid: row.planGuid,
          planExecGuid: row.planExecGuid
        }
      });
    } else {
      router.push({
        name: 'assessDetail',
        query: {
          name: planName,
          planGuid: row.planGuid,
          planExecGuid: row.planExecGuid
        }
      });
    }

  } else if (type == 'log') {
    const params = {
      logGuid: row.guid
    }
    drawerInfo.value.visible = true
    // formTable.value.tableInfo.loading = true;
    // getLogDetail(params).then((res: any) => {
    //  formTable.value.tableInfo.loading = false;
    //   if (res.code == proxy.$passCode && res.data) {
    //     const data = res.data
    //     formTable.value.tableInfo.data = data
    //     drawerInfo.value.container.contents[0].listInfo.data = data
    //     drawerInfo.value.visible = true
    //   } else {
    //     ElMessage({
    //       type: "info",
    //       message: res.msg,
    //     });
    //   }
    // })
  }
};

const drawerBtnClick = (btn) => {
  drawerInfo.value.visible = false;
};

onBeforeMount(() => {
  getTableData();
});

</script>

<template>
  <div class="container_wrap">
    <div class="table_panel_wrap">
      <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" @tablePageChange="tablePageChange" />
    </div>

    <Drawer :drawerInfo="drawerInfo" @drawerBtnClick="drawerBtnClick" />
  </div>
</template>

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

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

:deep(.el-drawer) {
  .drawer_panel {
    height: 100%;

    .table_panel_wrap {
      height: 100%;
    }
  }
}
</style>