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

<script lang="ts" setup name="damAssessDetail">
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  getRecordRuleConfDetail,
  getExecPlanDetailTableData,
  getAssessTableRulesData,
  downloadDirtyData
} from '@/api/modules/dataAssetQuality';
import { ElMessage } from "element-plus";
import { changeNum, download } from '@/utils/common';
import tableRuleForm from "./tableRuleForm.vue";

const { proxy } = getCurrentInstance() as any;

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

const planExecGuid = route.query.planExecGuid;

const tableInfo = ref({
  id: "quality-table",
  loading: false,
  fields: [
    { label: "表名", field: "qualityModelName", width: 140 },
    { label: "执行结果", field: "execResult", type: "tag", width: 100, align: "center" },
    { label: "评估时间", field: "execTime", width: 180, },
    {
      label: "耗时(秒)", field: "execDuration", width: 100, align: "right", 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) + '%') : '--';
      }
    },
    { label: "评估范围", field: "dataRange", width: 180 },
  ],
  data: [],
  showPage: false,
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 200,
    fixed: 'right',
    btns: (scope) => {
      let unqualifiedNum = scope.row.unqualifiedNum ?? 0;
      return [
        { label: "查看规则", value: "rule" },
        { label: "脏数据下载", value: "download", disabled: unqualifiedNum == 0 || scope.row.isTable == 'Y' },
      ]
    },
  }
});

/** 获取方案详情列表数据。 */
const getAssessDetail = () => {
  tableInfo.value.loading = true;
  getExecPlanDetailTableData({ planExecGuid: planExecGuid }).then((res: any) => {
    tableInfo.value.loading = false;
    if (res.code == proxy.$passCode) {
      tableInfo.value.data = res.data || []
    } else {
      ElMessage.error(res.msg);
    }
  });
}

/** 获取每个表的规则详情。 */
const getModelRulesDetail = (qualityModelGuid: string) => {
  rulesDetailTableInfo.value.loading = true;
  getAssessTableRulesData({ planExecGuid: planExecGuid, qualityModelGuid: qualityModelGuid }).then((res: any) => {
    rulesDetailTableInfo.value.loading = false;
    if (res.code == proxy.$passCode) {
      rulesDetailTableInfo.value.data = res.data || [];
    } else {
      ElMessage.error(res.msg);
    }
  });
}

/** 下载脏数据。 */
const exportDirtyData = (row) => {
  downloadDirtyData({
    planExecGuid: row.planExecGuid,
    qualityModelGuid: row.qualityModelGuid
  }).then((res: any) => {
    if (res && !res.msg) {
      download(res, `脏数据-${row.qualityModelName}.xlsx`, 'excel');
    } else {
      res?.msg && ElMessage.error(res?.msg);
    }
  })
}

const tableBtnClick = (scope, btn) => {
  const type = btn.value;
  const row = scope.row;
  if (type == 'rule') {
    rulesDetailDialogVisible.value = true;
    getModelRulesDetail(row.qualityModelGuid);
  } else if (type == 'download') {
    exportDirtyData(row);
  }
};

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

/** 单个规则详情对话框 */
const oneRulesDetailDialogVisible = ref(false);

const toSubjectTables: any = ref([]);
const ruleType = ref('');
const detailInfo: any = ref({});
const detailLoading = ref(false);
const ruleTypeList: any = ref([]);
const smallCategoryList: any = ref([]);
const largeCategoryList: any = ref([]);
const detailJson: any = ref({});

/** 查看表规则详情的对话框显示隐藏。 */
const rulesDetailDialogVisible = ref(false);

const rulesDetailTableInfo: any = ref({
  id: "rules-detail-table",
  loading: false,
  fields: [
    { label: "序号", type: "index", width: 56, align: "center" },
    { label: "表名", field: "qualityModelName", width: 140 },
    { label: "规则类型", field: "ruleName", width: 140 },
    { label: "规则名称", field: "ruleConfName", width: 140 },
    { label: "规则大类", field: "largeCategory", width: 100 },
    { label: "规则小类", field: "smallCategory", width: 140 },
    { label: "规则字段", field: "ruleField", width: 140 },
    { label: "执行结果", field: "execResult", type: "tag", width: 100, align: "center" },
    // { label: "规则权重", field: "weight", width: 100, align: 'right' },
    {
      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) + '%') : '--';
      }
    },
    { label: "失败原因", field: "errorLog", width: 140 },
  ],
  data: [],
  showPage: false,
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 90,
    fixed: 'right',
    btns: [
      {
        label: "规则详情 ", value: "ruleDetail", click: (scope) => {
          let row = scope.row;
          detailLoading.value = true;
          if (detailJson.value[row.ruleConfGuid]) {
            ruleType.value = detailInfo.value.ruleCode;
            toSubjectTables.value = [{
              guid: detailInfo.value.subjectGuid,
              enName: detailInfo.value.subjectName,
              chName: detailInfo.value.subjectZhName,
              label: `${detailInfo.value.subjectName}(${detailInfo.value.subjectZhName})`
            }]
            ruleTypeList.value = [{
              value: detailInfo.value.ruleCode,
              label: row.ruleName
            }];
            smallCategoryList.value = [{
              paramValue: detailInfo.value.smallCategory,
              paramName: row.smallCategory
            }];
            largeCategoryList.value = [{
              paramValue: detailInfo.value.largeCategory,
              paramName: row.largeCategory
            }];
            oneRulesDetailDialogVisible.value = true;
          } else {
            detailJson.value[row.ruleConfGuid] = { isRequest: true };
            getRecordRuleConfDetail({ruleConfGuid: row.ruleConfGuid, planExecGuid: planExecGuid }).then((res: any) => {
              detailLoading.value = false;
              oneRulesDetailDialogVisible.value = true;
              if (res.code == proxy.$passCode) {
                let data = res.data || {};
                detailInfo.value = data;
                detailJson.value[row.ruleConfGuid] = detailInfo.value;
                detailJson.value[row.ruleConfGuid].isRequest = false;
                ruleType.value = detailInfo.value.ruleCode;
                toSubjectTables.value = [{
                  guid: detailInfo.value.subjectGuid,
                  tableName: detailInfo.value.subjectName,
                  tableChName: detailInfo.value.subjectZhName,
                  label: `${detailInfo.value.subjectName}(${detailInfo.value.subjectZhName})`
                }]
                ruleTypeList.value = [{
                  value: detailInfo.value.ruleCode,
                  label: row.ruleName
                }];
                smallCategoryList.value = [{
                  paramValue: detailInfo.value.smallCategory,
                  paramName: row.smallCategory
                }];
                largeCategoryList.value = [{
                  paramValue: detailInfo.value.largeCategory,
                  paramName: row.largeCategory
                }];
              } else {
                ElMessage.error(res.msg);
                delete detailJson.value[row.ruleConfGuid];
              }
            })
          }
        }
      },
    ],
  }
});

</script>

<template>
  <div class="container_wrap">
    <div class="table_panel_wrap">
      <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" />
    </div>
    <el-dialog v-model="rulesDetailDialogVisible" title="查看规则" width="800" :modal="true" :close-on-click-modal="false"
      destroy-on-close align-center>
      <div class="rules-detail-dialog-content">
        <Table class="long-tooltip-table" :tableInfo="rulesDetailTableInfo" />
      </div>
    </el-dialog>
    <el-dialog v-model="oneRulesDetailDialogVisible" title="规则详情" width="800" :modal="true"
      :close-on-click-modal="false" destroy-on-close align-center>
      <tableRuleForm ref="ruleFormRef" :readonly="true" :toSubjectTables="toSubjectTables" :ruleTypeValue="ruleType"
        :value="detailInfo" :ruleTypeList="ruleTypeList" :largeCategoryList="largeCategoryList"
        :smallCategoryList="smallCategoryList">
      </tableRuleForm>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.container_wrap {
  padding: 16px;
}

.table_panel_wrap {
  height: 100%;
}

.rules-detail-dialog-content {
  height: 450px;
}

.long-tooltip-table {
  :deep(.el-table) {
    .table_cell_tooltip {
      max-width: 500px;
      // max-height: 100px;
      // overflow: auto;
    }
  }
}
</style>