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

<script lang="ts" setup name="anonResultReportView">
import {
  exportAnonReport,
  getAnonAnalyzePageData,
  getAnonAnalyzeResult,
  getAnonTaskDetail,
} from '@/api/modules/dataAnonymization';
import { changeNum, download } from '@/utils/common';
import { ElMessage } from 'element-plus';
import anonResultAnalysis from './components/anonResultAnalysis.vue';
import { commonPageConfig } from '@/utils/enum';
import { calcColumnWidth } from '@/utils';

const route = useRoute();
const router = useRouter();
const fullPath = route.fullPath;
const taskGuid = ref(route.query.guid);
const { proxy } = getCurrentInstance() as any;
const resultDataLoading = ref(false);

const downPromise: any = ref()

/** 提交保存和编辑后的执行guid */
const taskExecGuid = ref(route.query.execGuid);

/** 记录原始的值信息，防止上一步之后未修改数据时不调用接口 */
const oldAnonTaskValueInfo: any = ref({});
/** 执行结果信息 */
const analysisResultInfo: any = ref({});

const containerRef = ref();

const containerWidth = ref(containerRef.value?.offsetWidth || 0)

/** ------------------------- 匿名化分析结果页面数据展示 ---------------- */
const pageInfo: any = ref({
  ...commonPageConfig,
})

const pageChange = (info) => {
  pageInfo.value.curr = Number(info.curr);
  pageInfo.value.limit = Number(info.limit);
  getAnalysisResultPageData();
}

/** 每列字段对应的列宽计算结果。 */
const originResultTableFieldColumn = ref({});

/** 结果分析中的字段表格数据 */
const resultData: any = ref([]);

/** 结果分析中的字段信息 */
const analysisResultTableFields: any = ref([]);

const analysisResultLoading = ref(false);

/** otherWidth表示使用标题宽度时添加标题排序图标等宽度 */
const calcTableColumnWidth = (data: any[], prop, title, otherWidth = 0) => {
  let d: any[] = [];
  data.forEach((dt) => d.push(dt[prop]));
  //样式使用默认值。
  return calcColumnWidth(
    d,
    title,
    {
      fontSize: 14,
      fontFamily: "SimSun",
    },
    {
      fontSize: 14,
      fontFamily: "SimSun",
    },
    otherWidth
  );
};

watch(
  resultData,
  (val: any[], oldVal) => {
    if (!analysisResultTableFields.value?.length) {
      originResultTableFieldColumn.value = {};
      return;
    }
    originResultTableFieldColumn.value = {};
    analysisResultTableFields.value.forEach((field, index) => {
      originResultTableFieldColumn.value[field.enName] = calcTableColumnWidth(
        val?.slice(0, 20) || [],
        field.enName,
        field.chName,
        24
      );
    });
  },
  {
    deep: true,
  }
);

const getAnalysisResultPageData = () => {
  analysisResultLoading.value = true;
  getAnonAnalyzePageData({
    pageIndex: pageInfo.value.curr,
    pageSize: pageInfo.value.limit,
    taskExecGuid: taskExecGuid.value,
  }).then((res: any) => {
    analysisResultLoading.value = false;
    if (res?.code == proxy.$passCode) {
      pageInfo.value.rows =
        resultData.value = [];
      res.data?.records?.forEach(d => {
        let obj = {};
        analysisResultTableFields.value.forEach(t => {
          obj[t.enName] = d.fieldValue?.[t.enName];
        });
        obj['equivalenceClassNum'] = changeNum(d.equivalenceClassNum || 0, 0);
        obj['reIdentifyRisk'] = changeNum(d.reIdentifyRisk || 0, 2);
        obj['isGtThreshold'] = d.isGtThreshold;
        resultData.value.push(obj);
      });
      pageInfo.value.rows = res.data?.totalRows ?? 0;
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
}

/** 下载评估报告 */
const transfer = () => {
  if (downPromise.value) {
    return;
  }
  downPromise.value = exportAnonReport({
    taskGuid: route.query.guid,
    execGuid: taskExecGuid.value
  }).then((res: any) => {
    downPromise.value = null;
    if (res && !res.msg) {
      download(res, (route.query.taskName || oldAnonTaskValueInfo.value.taskName) + '_匿名化评估报告.docx', 'word')
    } else {
      res?.msg && ElMessage.error(res?.msg);
    }
  }).catch(() => {
    downPromise.value = null;
  })
}

onMounted(() => {
  nextTick(() => {
    containerWidth.value = containerRef.value?.offsetWidth || 0;
  })
  window.onresize = () => {
    containerWidth.value = containerRef.value?.offsetWidth || 0;
  }
})

onBeforeMount(() => {
  resultDataLoading.value = true;
  getAnonAnalyzeResult(taskExecGuid.value).then((res: any) => {
     resultDataLoading.value = false;
    if (res?.code == proxy.$passCode) {
      analysisResultInfo.value = res.data || {};
      analysisResultTableFields.value = res.data?.column || [];
      pageInfo.value.curr = 1;
      getAnalysisResultPageData();
    } else {
      res?.msg && proxy.$ElMessage.error(res.msg);
    }
  });
  getAnonTaskDetail(taskGuid.value).then((res: any) => {
    if (res?.code == proxy.$passCode) {
      oldAnonTaskValueInfo.value = res.data || {};
    } else {
      res?.msg && proxy.$ElMessage.error(res.msg);
    }
  });
})

</script>

<template>
  <div class="table_tool_wrap" v-loading="resultDataLoading" ref="containerRef">
    <el-button style="margin-bottom: 8px;" type="primary" @click="transfer" v-preReClick>下载评估报告</el-button>
    <anonResultAnalysis :show-title="true" :analysis-result-info="analysisResultInfo"
      :analysis-result-loading="analysisResultLoading" :analysis-result-table-fields="analysisResultTableFields"
      :old-anon-task-value-info="oldAnonTaskValueInfo" :container-width="containerWidth"
      :origin-result-table-field-column="originResultTableFieldColumn" :page-info="pageInfo" :result-data="resultData"
      @page-change="pageChange"></anonResultAnalysis>
  </div>
</template>

<style lang="scss" scoped>
.table_tool_wrap {
  width: 100%;
  height: 100%;
  padding: 8px 16px 16px;
  overflow-y: auto;
}
</style>