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

<script lang="ts" setup name="assessLog">
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import Table from "@/components/Table/index.vue";
import Drawer from "@/components/Drawer/index.vue";
import {
  getAssessDetailTableData,
} from '@/api/modules/dataQualityAssess';
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 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: "execResult", type: "tag", width: 120, align: "center" },
    { label: "评估时间", field: "execTime", width: 180, },
    {
      label: "耗时(秒)", field: "execDuration", align: "right", width: 100, getName: (scope) => {
        return scope.row.execDuration != null ? changeNum(scope.row.execDuration ?? 0) : '--';
      }
    },
    {
      label: "规则数", field: "ruleNum", width: 100, align: "right", getName: (scope) => {
        return scope.row.ruleNum != null ? changeNum(scope.row.ruleNum ?? 0) : '--';
      }
    },
    {
      label: "评估总数", field: "totalNum", width: 100, align: "right", getName: (scope) => {
        return scope.row.totalNum != null ? changeNum(scope.row.totalNum ?? 0) : '--';
      }
    },
    {
      label: "合格条数", field: "qualifiedNum", width: 100, align: "right", getName: (scope) => {
        return scope.row.qualifiedNum != null ? changeNum(scope.row.qualifiedNum ?? 0) : '--';
      }
    },
    {
      label: "不合格条数", field: "unqualifiedNum", width: 100, align: "right", getName: (scope) => {
        return scope.row.unqualifiedNum != null ? changeNum(scope.row.unqualifiedNum ?? 0) : '--';
      }
    },
    {
      label: "合格率", field: "qualifiedRate", width: 100, align: "right", getName: (scope) => {
        return scope.row.qualifiedRate != null ? ((scope.row.qualifiedRate ?? 0).toFixed(2) + '%') : '--';
      }
    },
  ],
  loading: false,
  data: [],
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 100,
    fixed: 'right',
    btns: [
      { label: "查看结果", value: "resultView" },
    ],
  }
});

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, planGuid: planGuid }).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>