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

<script lang="ts" setup name="anonTaskCreate">
import {
  dataSourceTypeList,
  getAnonTaskDetail,
  getParamsList,
  chTransformEn,
  getAnonAnalyzeResult,
  getAnonAnalyzePageData,
  getDatabase,
  getDsTableByDs,
  getDsTableFieldColumn,
  getDsTableSampleData,
  saveAnonTask,
  updateAnonTask,
  exportAnonExecData,
} from '@/api/modules/dataAnonymization';
import {
  parseAndDecodeUrl,
  getDownFileSignByUrl,
  obsDownloadRequest
} from "@/api/modules/obsService";
import useUserStore from "@/store/modules/user";
import { useValidator } from '@/hooks/useValidator';
import { TableColumnWidth } from '@/utils/enum';
import { calcColumnWidth } from "@/utils/index";
import Moment from 'moment';
import anonTaskStepTwo from './anonTaskStepTwo.vue';
import * as XLSX from 'xlsx';
import { ElMessage } from 'element-plus';
import { isEqual, cloneDeep } from "lodash-es";
import { changeNum, download } from "@/utils/common";
import anonResultView from './anonResultView.vue';
import useDataAnonymizationStore from "@/store/modules/dataAnonymization";
import { RefreshRight, CircleCloseFilled, Right } from "@element-plus/icons-vue";
import { commonPageConfig } from '@/components/PageNav';

const anonymizationStore = useDataAnonymizationStore();
const { proxy } = getCurrentInstance() as any;
const userStore = useUserStore();
const route = useRoute();
const router = useRouter();
const fullPath = route.fullPath;
const taskGuid = ref(route.query.guid);
/** 提交保存和编辑后的执行guid */
const taskExecGuid = ref('');
/** 是否执行结束，用于第四步获取执行结果 */
const isExecEnd = ref(false);
const { required } = useValidator();
const fullscreenLoading = ref(false);

const step = ref(0);
const stepsInfo = ref({
  step: step.value,
  list: [
    { title: '数据输入', value: 1 },
    { title: '配置匿名化方案', value: 2 },
    { title: '匿名结果分析', value: 3 },
    { title: '结果输出', value: 4 }
  ]
})

/** 数据源列表 */
const dataSourceList: any = ref([]);

/** 数据源对应的数据表 */
const dsTableList: any = ref([]);

/** 数据共享类型字段列表 */
const dataSharingTypeList = ref([]);

const formRef = ref();

/** 数据选择的表单配置信息 */
const dataSelectInfoItems = ref([{
  label: '任务名称',
  type: 'input',
  placeholder: '请输入',
  field: 'taskName',
  maxlength: 15,
  default: '',
  required: true,
  filterable: true,
  clearable: true,
  visible: true,
}, {
  label: '数据共享类型',
  type: 'select',
  placeholder: '请选择',
  field: 'dataSharingTypeCode',
  default: '01',
  options: dataSharingTypeList.value,
  props: {
    label: "label",
    value: "value",
  },
  required: true,
  filterable: true,
  clearable: true,
  visible: true,
}, {
  label: '患者占总人口比',
  type: 'input',
  placeholder: '数值，支持小数点9位',
  field: 'patientPopulationRate',
  maxlength: 11,
  min: 0,
  max: 1,
  inputType: 'scoreNumber',
  decimalCnt: 9,
  default: '',
  required: true,
  filterable: true,
  clearable: true,
  visible: true,
}, {
  label: '数据来源',
  type: 'select',
  placeholder: '请选择',
  field: 'dataSource',
  default: 1,
  options: dataSourceTypeList,
  props: {
    label: "label",
    value: "value",
  },
  required: true,
  filterable: true,
  visible: true,
}, {
  label: '数据源',
  type: 'select',
  placeholder: '请选择',
  field: 'dataSourceGuid',
  default: '',
  options: dataSourceList.value,
  props: {
    label: 'databaseNameZh',
    value: 'guid'
  },
  filterable: true,
  visible: true,
  required: true
}, {
  label: "数据表",
  type: "select",
  placeholder: "请选择",
  field: "tableName",
  options: dsTableList.value,
  props: {
    label: 'tableComment',
    value: 'tableName'
  },
  default: '',
  filterable: true,
  clearable: true,
  required: true,
}, {
  label: '文件上传',
  tip: '支持扩展名：xlsx、xls、csv，文件大小不超过10MB',
  type: 'upload-file',
  accept: '.xlsx, .xls, .csv',
  limitSize: 10,
  limit: 1,
  isExcel: true,
  required: true,
  default: <any>[],
  block: false,
  col: 'wid60',
  visible: false,
  field: 'file',
}]);

const dataSelectInfoFormRules = ref({
  taskName: [required('请输入任务名称')],
  dataSharingTypeCode: [required('请选择数据共享类型')],
  patientPopulationRate: [required('请输入患者占总人口比')],
  dataSourceGuid: [required('请选择数据源')],
  tableName: [required('请选择数据表')],
  file: [{
    validator: (rule: any, value: any, callback: any) => {
      if (!value?.length) {
        callback(new Error('请上传文件'))
      } else {
        callback();
      }
    }, trigger: 'change'
  }]
});

/** 最新选中的 */
const currDatasourceSelect: any = ref({});

const handleDataSelectFormSelectChange = async (val, row, formInfo) => {
  if (row.field == 'dataSource') {
    dataSelectInfoItems.value[4].visible = val == 1;
    dataSelectInfoItems.value[5].visible = val == 1;
    dataSelectInfoItems.value[6].visible = val == 2;
    dataSelectInfoItems.value.forEach(d => {
      d.default = formInfo[d.field];
      if (d.field == 'file') {
        d.default = !d.default ? [] : d.default;
      }
    });
    sampleTableFields.value = [];
    parseFileDataSum.value = [];
    sampleTableData.value = [];
  } else if (row.field == 'dataSourceGuid') {
    if (!val) {
      currDatasourceSelect.value = [];
      sampleTableFields.value = [];
      parseFileDataSum.value = [];
      sampleTableData.value = [];
      dataSelectInfoItems.value.forEach(d => {
        d.default = formInfo[d.field];
        if (d.field == 'file') {
          d.default = !d.default ? [] : d.default;
        } else if (d.field == 'tableName') {
          d.options = dsTableList.value;
          d.default = '';
        }
      });
      return;
    }
    let dsInfo = currDatasourceSelect.value = dataSourceList.value.find(d => d.guid == val);
    //清除数据表得值，重新获取下拉列表
    const res: any = await getDsTableByDs({
      pageSize: -1,
      pageIndex: 1,
      dataSourceGuid: val,
      database: dsInfo.databaseNameEn,
      databaseType: dsInfo.databaseType,
      tableName: '',
      hadFlag: false
    });
    if (res.code == proxy.$passCode) {
      dsTableList.value = res.data?.records || [];
      dataSelectInfoItems.value.forEach(d => {
        d.default = formInfo[d.field];
        if (d.field == 'file') {
          d.default = !d.default ? [] : d.default;
        } else if (d.field == 'tableName') {
          d.options = dsTableList.value;
          d.default = '';
        }
      });
    } else {
      proxy.$ElMessage.error(res.msg);
    }
    sampleTableFields.value = [];
    parseFileDataSum.value = [];
    sampleTableData.value = [];
  } else if (row.field == 'tableName') {
    if (!val) {
      sampleTableFields.value = [];
      sampleTableData.value = [];
      return;
    }
    getDsTableFieldColumn({
      pageSize: 50,
      pageIndex: 1,
      dataSourceGuid: currDatasourceSelect.value.guid,
      database: currDatasourceSelect.value.databaseNameEn,
      databaseType: currDatasourceSelect.value.databaseType,
      tableName: val,
    }).then((res: any) => {
      if (res.code == proxy.$passCode) {
        sampleTableFields.value = res.data?.map(d => {
          d.fieldDataType = d.dataType;
          d.enName = d.columnName;
          d.chName = d.columnZhName;
          return d;
        }) || [];
        /** 判断有抽样数据，需要查询接口 */
        getSampleDataByDsTable();
      } else {
        ElMessage.error(res.msg);
      }
    });
  }
}

const dataSimpleFormRef = ref();

/** 抽样数据预览 */
const dataSimpleFormItems = ref([{
  label: '抽样开关',
  type: 'switch',
  field: 'enableSamplingRate',
  default: 'N',
  col: 'autoWidth',
  activeValue: 'Y',
  inactiveValue: 'N'
}, {
  label: '抽样比例(%)',
  type: 'input',
  placeholder: '请输入',
  field: 'samplingRate',
  maxlength: 3,
  min: 0, //可以是0条。万一只是想看下字段呢
  max: 100,
  inputType: 'integerNumber',
  default: 10,
  required: true,
  filterable: true,
  clearable: true,
  visible: false,
}]);

const dataSimpleFormRules = ref({
  samplingRate: [required('请填写抽样比例')],
});

const oldSamplingRate = ref('10');

const handleDataSimpleFormSwitchChange = (val, info) => {
  if (val == 'N') {
    oldSamplingRate.value = info.samplingRate;
  } else {
    dataSimpleFormItems.value[1].default = oldSamplingRate.value || 10;
  }
  dataSimpleFormItems.value[1].visible = val == 'Y';
  dataSimpleFormItems.value[0].default = info.enableSamplingRate || 'N';
  if (formRef.value?.formInline?.file?.length) {
    transferSampleData();
  } else {
    getSampleDataByDsTable();
  }
}

/** 输入抽样比例值改变 */
const handleDataSimpleFormChange = (val) => {
  if (formRef.value?.formInline?.file?.length) {
    transferSampleData();
  } else {
    getSampleDataByDsTable();
  }
}

/** 样本表格加载中 */
const sampleTableDataLoading = ref(false);

/** 样本表格的数据 */
const sampleTableData: any = ref([]);

/** 样本表格的字段 */
const sampleTableFields: any = ref([]);

/** 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
  );
};

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

const getTextAlign = (field) => {
  if (field.dataType === 'decimal' || field.dataType === 'int') {
    return 'right';
  }
  return 'left'
}

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

const formatterPreviewDate = (row, info) => {
  let enName = info.enName;
  let v = row[enName];
  if (v === 0) {
    return v;
  }
  if (!v || v == 'null') {
    return '--';
  }
  if (info.dataType === 'datetime') {
    return Moment(v).format('YYYY-MM-DD HH:mm:ss');
  }
  if (info.dataType === 'date') {
    if (isNaN(<any>(new Date(v)))) {
      return Moment(parseInt(v)).format('YYYY-MM-DD');
    } else {
      return Moment(v).format('YYYY-MM-DD');
    }
  }
  return v;
};

/** 解析的总的表格数据，方便后面修改抽样比例时使用 */
const parseFileDataSum: any = ref([]);
const currentSheet: any = ref();
const parseFileData = (fileRaw) => {
  sampleTableDataLoading.value = true;
  fileRaw.arrayBuffer().then(async (f) => {
    const wb = XLSX.read(f, {
      raw: false, cellDates: true
    });
    const sheet = wb.Sheets[wb.SheetNames[0]];
    currentSheet.value = sheet;
    const json: any[] = XLSX.utils.sheet_to_json(sheet, { header: 1 });
    if (json.length == 0) {
      sampleTableFields.value = [];
      sampleTableData.value = [];
    } else {
      try {
        const res: any = await chTransformEn(json[0]);
        if (res?.code != proxy.$passCode) {
          sampleTableDataLoading.value = false;
          proxy.$ElMessage.error(res.msg);
          return;
        }
        let fields = res.data || [];
        sampleTableFields.value = fields?.map((j, index) => {
          return {
            index: index,
            enName: j.enName + '',
            chName: j.chName + '',
            dataType: 'varchar'
          }
        }) || [];
        parseFileDataSum.value = json;
        /** 粗略算出字段类型 */
        json.slice(1, 10).forEach((info, row) => {
          json[0].forEach((name, col) => {
            if (info[col] === "" || info[col] == null || sampleTableFields.value[col].dataType != 'varchar') {
              return;
            } else {
              var cellRef = XLSX.utils.encode_cell({ r: row + 1, c: col });
              var cell = sheet[cellRef];
              let v = cell.w || info[col];
              let isNum = cell.t == 'n';
              if (isNum) {
                if (v.includes('.') && sampleTableFields.value[col].dataType != 'decimal') {
                  sampleTableFields.value[col].dataType = 'decimal';
                } else {
                  sampleTableFields.value[col].dataType = 'int';
                }
              }
            }
          });
        })
        transferSampleData();
        sampleTableDataLoading.value = false;
      } catch (error) {
        sampleTableDataLoading.value = false;
      }
    }
  });
}

/** 获取文件解析后根据抽样比例得出的表格数据，默认查看前500条数据 */
const transferSampleData = () => {
  let samplingRate = dataSimpleFormRef.value?.formInline?.samplingRate;
  if (parseFileDataSum.value.length > 1 && samplingRate) {
    let totalCnt = parseFileDataSum.value.length - 1;
    let cnt = Math.ceil(samplingRate * 0.01 * totalCnt) + 1;
    sampleTableData.value = parseFileDataSum.value.slice(1, cnt > 500 ? 501 : cnt).map((info, row) => {
      let object = {};
      parseFileDataSum.value[0].forEach((chName, col) => {
        let name = sampleTableFields.value[col].enName;
        var cellRef = XLSX.utils.encode_cell({ r: row + 1, c: col });
        var cell = currentSheet.value[cellRef];
        let v = cell.w || info[col];
        object[name] = v;
      });
      return object;
    });
  } else {
    sampleTableData.value = [];
  }
}

/** 获取选择的数据库表根据抽样比例得出的表格数据 */
const getSampleDataByDsTable = () => {
  const tableName = formRef.value?.formInline?.tableName;
  if (!currDatasourceSelect.value.guid || !tableName) {
    sampleTableFields.value = [];
    sampleTableData.value = [];
    return;
  }
  let samplingRate = dataSimpleFormRef.value?.formInline?.samplingRate;
  if (!samplingRate) {
    sampleTableData.value = [];
    return;
  }
  let totalCnt = dsTableList.value.find(t => t.tableName == tableName)?.tableRows || 0;
  let cnt = Math.ceil(samplingRate * 0.01 * totalCnt);
  if (!cnt) {
    sampleTableData.value = [];
    return;
  }
  sampleTableDataLoading.value = true;
  getDsTableSampleData({
    limitNum: cnt > 500 ? 500 : cnt,
    pageSize: cnt > 500 ? 500 : cnt,
    pageIndex: 1,
    dataSourceGuid: currDatasourceSelect.value.guid,
    database: currDatasourceSelect.value.databaseNameEn,
    databaseType: currDatasourceSelect.value.databaseType,
    tableName: tableName,
    hadFlag: false,
  }).then((res: any) => {
    sampleTableDataLoading.value = false;
    if (res.code == proxy.$passCode) {
      sampleTableData.value = res.data?.datas || [];
    } else {
      sampleTableData.value = [];
      ElMessage.error(res.msg);
    }
  });
}

const uploadFileChange = (file) => {
  sampleTableData.value = [];
  if (!file.length) {
    sampleTableFields.value = [];
    sampleTableData.value = [];
    return;
  }
  let fileRaw = file[0].file;
  parseFileData(fileRaw);
}

/** 第二步的配置组件引用。 */
const anonTaskStepTwoRef = ref();

const changeStep = async (val) => {
  if (val <= step.value) {
    step.value = val - 1;
    stepsInfo.value.step = val - 1;
  } else if (val == 2) {
    formRef.value?.ruleFormRef?.validate((valid) => {
      if (valid) {
        if (formRef.value?.formInline?.dataSource == 2 && !sampleTableFields.value?.length) {
          proxy.$ElMessage.error('上传文件的字段不能为空');
          return;
        }
        dataSimpleFormRef.value?.ruleFormRef?.validate((valid) => {
          if (valid) {
            // 第一步到第二步时，如果字段列表中与字段脱敏规则中的字段不匹配，应清空。
            step.value = val - 1;
            stepsInfo.value.step = val - 1;
            anonTaskStepTwoRef.value?.updateNextStepRules();
          }
        });
      }
    });
  } else if (val == 3) {
    // 保存并提交 TODO。需要加个 记录旧值的，用来判断新值和旧值，是否发生变化，若变化则需要调用保存接口之后，再进行下一步。
    let configInfo = await anonTaskStepTwoRef.value?.getStepTwoConfigInfo();
    if (!configInfo) {
      return;
    }
    let saveParams: any = { ...formRef.value.formInline };
    if (saveParams.file?.length) {
      saveParams.filePath = {
        name: saveParams.file[0].name,
        url: saveParams.file[0].url
      }
      delete saveParams.file;
      saveParams.dataSourceGuid = null;
      saveParams.tableName = null;
    } else {
      saveParams.filePath = null;
    }
    let simpleFormInline = dataSimpleFormRef.value.formInline;
    if (simpleFormInline.enableSamplingRate == 'Y') {
      saveParams.samplingRate = simpleFormInline.samplingRate && parseInt(simpleFormInline.samplingRate);
    } else {
      saveParams.samplingRate = null;
    }
    let privacy = configInfo.anonPrivacyMode; //值是克隆过的，可以删除
    delete privacy.isKaNumber;
    delete privacy.isRiskThreshold;
    delete privacy.isTcField;
    delete privacy.isLdField;
    // 为空时为了跟原始值保持一致
    privacy.kaNumber = (privacy.kaNumber && parseInt(privacy.kaNumber)) ?? null;
    privacy.riskThreshold = (privacy.riskThreshold && parseFloat(privacy.riskThreshold)) ?? null;
    privacy.tcFieldName = privacy.tcFieldName ?? null;
    privacy.tcThreshold = (privacy.tcThreshold && parseFloat(privacy.tcThreshold)) ?? null;
    privacy.ldFieldName = privacy.ldFieldName ?? null;
    privacy.ldNumber = (privacy.ldNumber && parseInt(privacy.ldNumber)) ?? null;
    Object.assign(saveParams, configInfo);
    if (taskGuid.value) {
      saveParams.guid = taskGuid.value;
    }
    if (isEqual(saveParams, oldAnonTaskValueInfo.value)) {
      isExecEnd.value = false;
      step.value = val - 1;
      stepsInfo.value.step = val - 1;
      if (!analysisResultInfo.value?.status) {
        processStepThreeResultView();
      } else {
        isExecEnd.value = analysisResultInfo.value?.status == 'E' || analysisResultInfo.value?.status == 'Y';
      }
      return;
    }
    if (!taskGuid.value) { //保存
      fullscreenLoading.value = true;
      saveAnonTask(saveParams).then((res: any) => {
        fullscreenLoading.value = false;
        if (res.code == proxy.$passCode) {
          taskGuid.value = res.data?.taskGuid;
          isExecEnd.value = false;
          taskExecGuid.value = res.data?.lastExecGuid;
          step.value = val - 1;
          stepsInfo.value.step = val - 1;
          analysisResultInfo.value = {};
          if (refreshTimer.value) {
            clearInterval(refreshTimer.value);
            refreshTimer.value = null;
          }
          processStepThreeResultView();
          oldAnonTaskValueInfo.value = saveParams;
          anonymizationStore.setIsAnonPageRefresh(true);
        } else {
          ElMessage.error(res.msg);
        }
      });
    } else { //更新
      fullscreenLoading.value = true;
      updateAnonTask(saveParams).then((res: any) => {
        fullscreenLoading.value = false;
        if (res.code == proxy.$passCode) {
          isExecEnd.value = false;
          taskExecGuid.value = res.data;
          step.value = val - 1;
          stepsInfo.value.step = val - 1;
          analysisResultInfo.value = {};
          if (refreshTimer.value) {
            clearInterval(refreshTimer.value);
            refreshTimer.value = null;
          }
          processStepThreeResultView();
          oldAnonTaskValueInfo.value = saveParams;
          anonymizationStore.setIsAnonPageRefresh(true);
        } else {
          ElMessage.error(res.msg);
        }
      })
    }
  } else if (val == 4) {
    //下一步之后，设置执行结束， 查看结果。
    step.value = val - 1;
    stepsInfo.value.step = val - 1;
  }
}

const promise: any = ref(null);
const exportResult = () => {
  promise.value = exportAnonExecData({
    taskGuid: route.query.guid,
    execGuid: route.query.execGuid
  }).then((res: any) => {
    promise.value = null;
    if (res && !res.msg) {
      download(res, route.query.taskName + '_匿名化数据.xlsx', 'excel')
    } else {
      res?.msg && ElMessage.error(res?.msg);
    }
  }).catch(() => {
    promise.value = null;
  })
}

/** 获取字段类型的数据字典 */
const fieldTypeList: any = ref([]);

/** 编辑时获取的匿名化任务的详情信息 */
const detailInfo: any = ref({});

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

onBeforeMount(() => {
  if (taskGuid.value) {
    fullscreenLoading.value = true;
    getAnonTaskDetail(taskGuid.value).then(async (res: any) => {
      if (res?.code == proxy.$passCode) {
        detailInfo.value = res.data || {};
        taskExecGuid.value = detailInfo.value.lastExecGuid;
        oldAnonTaskValueInfo.value = {
          guid: detailInfo.value.guid,
          taskName: detailInfo.value.taskName,
          dataSource: detailInfo.value.dataSource,
          filePath: detailInfo.value.filePath && cloneDeep(detailInfo.value.filePath),
          dataSourceGuid: detailInfo.value.dataSourceGuid,
          tableName: detailInfo.value.tableName,
          samplingRate: detailInfo.value.samplingRate,
          patientPopulationRate: detailInfo.value.patientPopulationRate && typeof detailInfo.value.patientPopulationRate == 'number' ? detailInfo.value.patientPopulationRate?.toFixed(9) : detailInfo.value.patientPopulationRate,
          dataSharingTypeCode: detailInfo.value.dataSharingTypeCode,
          anonTaskRules: cloneDeep(detailInfo.value.anonTaskRules),
          anonPrivacyMode: {
            kaNumber: detailInfo.value.anonPrivacyMode?.kaNumber,
            ldFieldName: detailInfo.value.anonPrivacyMode?.ldFieldName,
            ldNumber: detailInfo.value.anonPrivacyMode?.ldNumber,
            riskThreshold: detailInfo.value.anonPrivacyMode?.riskThreshold,
            tcFieldName: detailInfo.value.anonPrivacyMode?.tcFieldName,
            tcThreshold: detailInfo.value.anonPrivacyMode?.tcThreshold,
          }
        }
        dataSelectInfoItems.value.forEach(d => {
          d.default = detailInfo.value[d.field];
          if (d.field == 'file') {
            d.default = detailInfo.value.filePath ? [detailInfo.value.filePath] : [];
          } else if (d.field == 'patientPopulationRate') {
            if (d.default && typeof d.default == 'number') {
              d.default = d.default.toFixed(d.decimalCnt);
            }
          }
        });
        if (detailInfo.value.samplingRate != null) {
          dataSimpleFormItems.value[0].default = 'Y';
          dataSimpleFormItems.value[1].visible = true;
          dataSimpleFormItems.value[1].default = detailInfo.value.samplingRate;
        } else {
          dataSimpleFormItems.value[0].default = 'N';
          dataSimpleFormItems.value[1].visible = false;
        }
        let dataSource = detailInfo.value.dataSource;
        dataSelectInfoItems.value[4].visible = dataSource == 1;
        dataSelectInfoItems.value[5].visible = dataSource == 1;
        dataSelectInfoItems.value[6].visible = dataSource == 2;
        try {
          //文件解析
          if (dataSource == 2) {
            let url = detailInfo.value.filePath?.url;
            sampleTableDataLoading.value = true;
            const refSignInfo: any = await getDownFileSignByUrl(parseAndDecodeUrl(url).fileName);
            if (!refSignInfo?.data) {
              fullscreenLoading.value = false;
              refSignInfo?.msg && ElMessage.error(refSignInfo?.msg);
              return;
            }
            const fileRes: any = await obsDownloadRequest(refSignInfo?.data);
            sampleTableDataLoading.value = false;
            if (fileRes && !fileRes.msg) {
              parseFileData(fileRes);
            } else {
              fileRes?.msg && ElMessage.error(fileRes?.msg);
            }
            // 会出现从文件切换到数据库时没有数据库列表的问题。
            const res: any = await getDatabase({ connectStatus: 1 });
            if (res?.code == proxy.$passCode) {
              dataSourceList.value = res.data || [];
              let item = dataSelectInfoItems.value.find(item => item.field == 'dataSourceGuid');
              item && (item.options = dataSourceList.value);
            } else {
              proxy.$ElMessage.error(res.msg);
            }
          } else {
            const res: any = await getDatabase({ connectStatus: 1 });
            if (res?.code == proxy.$passCode) {
              dataSourceList.value = res.data || [];
              let item = dataSelectInfoItems.value.find(item => item.field == 'dataSourceGuid');
              item && (item.options = dataSourceList.value);
            } else {
              proxy.$ElMessage.error(res.msg);
            }
            currDatasourceSelect.value = dataSourceList.value.find(d => d.guid == detailInfo.value.dataSourceGuid);
            const tableRes: any = await getDsTableByDs({
              pageSize: -1,
              pageIndex: 1,
              dataSourceGuid: detailInfo.value.dataSourceGuid,
              database: currDatasourceSelect.value.databaseNameEn,
              databaseType: currDatasourceSelect.value.databaseType,
              tableName: '',
              hadFlag: false
            });
            if (tableRes?.code == proxy.$passCode) {
              dsTableList.value = tableRes.data?.records || [];
              let item = dataSelectInfoItems.value.find(item => item.field == 'tableName');
              item && (item.options = dsTableList.value);
            } else {
              proxy.$ElMessage.error(tableRes.msg);
            }
            getDsTableFieldColumn({
              pageSize: 50,
              pageIndex: 1,
              dataSourceGuid: currDatasourceSelect.value.guid,
              database: currDatasourceSelect.value.databaseNameEn,
              databaseType: currDatasourceSelect.value.databaseType,
              tableName: detailInfo.value.tableName,
            }).then((res: any) => {
              if (res.code == proxy.$passCode) {
                sampleTableFields.value = res.data?.map(d => {
                  d.fieldDataType = d.dataType;
                  d.enName = d.columnName;
                  d.chName = d.columnZhName;
                  return d;
                }) || [];
                /** 判断有抽样数据，需要查询接口 */
                getSampleDataByDsTable();
              } else {
                ElMessage.error(res.msg);
              }
            });
          }
          fullscreenLoading.value = false;
        } catch (error) {
          fullscreenLoading.value = false;
        }
      } else {
        fullscreenLoading.value = false;
        proxy.$ElMessage.error(res.msg);
      }
    });
  } else {
    getDatabase({ connectStatus: 1 }).then((res: any) => {
      if (res.code == proxy.$passCode) {
        dataSourceList.value = res.data || [];
        let item = dataSelectInfoItems.value.find(item => item.field == 'dataSourceGuid');
        item && (item.options = dataSourceList.value);
      } else {
        proxy.$ElMessage.error(res.msg);
      }
    })
  }
  getParamsList({
    dictType: "数据共享类型",
  }).then((res: any) => {
    if (res?.code == proxy.$passCode) {
      dataSharingTypeList.value = res.data || [];
      let item = dataSelectInfoItems.value.find(item => item.field == 'dataSharingTypeCode');
      item && (item.options = dataSharingTypeList.value);
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  });
  getParamsList({
    dictType: "字段类型",
  }).then((res: any) => {
    if (res?.code == proxy.$passCode) {
      fieldTypeList.value = res.data || [];
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  });
})

const cancelTask = () => {
  proxy.$openMessageBox("当前页面尚未保存，确定放弃修改吗？", () => {
    userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
    router.push({
      name: 'resultProcess'
    });
  }, () => {
    proxy.$ElMessage.info("已取消");
  });
}

const refreshTimer = ref()

/** 执行结果信息 */
const analysisResultInfo: any = ref({});

const getResultPromise: any = ref(null);

/** 第三步处理，定时刷新查看结果 */
const processStepThreeResultView = (isRefresh = false) => {
  let process = (isRefresh) => {
    getResultPromise.value = getAnonAnalyzeResult(taskExecGuid.value).then((res: any) => {
      getResultPromise.value = null;
      if (res?.code == proxy.$passCode) {
        analysisResultInfo.value = res.data || {};
        if (analysisResultInfo.value.status == 'R') { //正在运行中
          if (isRefresh) {
            proxy.$ElMessage.success('刷新成功，正在执行中...');
          }
          //添加定时器。
          if (refreshTimer.value) {
            return;
          }
          refreshTimer.value = setInterval(async () => {
            process(false);
          }, 20000);
        } else if (analysisResultInfo.value.status == 'Y') {
          //去获取结果。
          isExecEnd.value = true;
          refreshTimer.value && clearInterval(refreshTimer.value);
          refreshTimer.value = null;
          analysisResultTableFields.value = res.data?.column || [];
          pageInfo.value.curr = 1;
          getAnalysisResultPageData();
        } else if (analysisResultInfo.value.status == 'E') {
          isExecEnd.value = true
          refreshTimer.value && clearInterval(refreshTimer.value);
          refreshTimer.value = null;
        }
      } else {
        proxy.$ElMessage.error(res.msg);
      }
    });
  }
  process(isRefresh);
}

/** 随时点击刷新查看结果。 */
const refreshQueryData = () => {
  if (getResultPromise.value) {
    return;
  }
  if (refreshTimer.value) {
    clearInterval(refreshTimer.value);
    refreshTimer.value = null;
  }
  processStepThreeResultView(true);
}

/** ------------------------- 匿名化分析结果页面数据展示 ---------------- */
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);

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);
    }
  })
}

onUnmounted(() => {
  refreshTimer.value && clearInterval(refreshTimer.value);
  refreshTimer.value = null;
})

</script>

<template>
  <div class="container_wrap full" v-loading="fullscreenLoading">
    <div class="content_main">
      <div class="top_tool_wrap">
        <StepBar :steps-info="stepsInfo" />
      </div>
      <div class="operator_panel_wrap" v-show="step == 0">
        <ContentWrap id="id-baseInfo" title="数据选择" description="" style="margin-top: 8px;">
          <Form ref="formRef" :itemList="dataSelectInfoItems" :rules="dataSelectInfoFormRules"
            formId="model-select-edit" col="col3 custom-form" @select-change="handleDataSelectFormSelectChange"
            @uploadFileChange="uploadFileChange" />
        </ContentWrap>
        <ContentWrap id="id-previewData" title="数据抽样预览" description="" style="margin-top: 16px;">
          <Form ref="dataSimpleFormRef" :itemList="dataSimpleFormItems" :rules="dataSimpleFormRules"
            formId="data-simple-edit" col="col3 fixwidth-form" @switch-change="handleDataSimpleFormSwitchChange"
            @input-change="handleDataSimpleFormChange" />
          <div class="table-v2-main" v-show="dataSimpleFormRef?.formInline?.enableSamplingRate == 'Y'"
            v-loading="sampleTableDataLoading">
            <el-table ref="tableRef" v-show="sampleTableFields.length" :data="sampleTableData"
              :highlight-current-row="true" stripe border tooltip-effect="light" height="100%" row-key="guid"
              :style="{ width: '100%', height: '240px' }">
              <el-table-column label="序号" type="index" width="56px" align="center"
                show-overflow-tooltip></el-table-column>
              <template v-for="(item, index) in (sampleTableFields || [])">
                <el-table-column :label="item.chName" :width="item.dataType === 'datetime'
                  ? TableColumnWidth.DATETIME
                  : item.dataType === 'date'
                    ? TableColumnWidth.DATE
                    : originTableFieldColumn[item.enName]
                  " :align="getTextAlign(item)" :header-align="getTextAlign(item)"
                  :formatter="(row) => formatterPreviewDate(row, item)" :show-overflow-tooltip="true">
                </el-table-column>
              </template>
            </el-table>
            <div v-show="!sampleTableFields.length" class="main-placeholder">
              <img src="../../assets/images/no-data.png" :style="{ width: '96px', height: '96px' }" />
              <div class="empty-text">暂无抽样数据</div>
            </div>
          </div>
        </ContentWrap>
      </div>
      <anonTaskStepTwo ref="anonTaskStepTwoRef" v-show="step == 1" :anonTaskRules="detailInfo.anonTaskRules"
        :isFile="formRef?.formInline?.file?.length > 0" :anonPrivacyMode="detailInfo.anonPrivacyMode"
        :fieldTypeList="fieldTypeList" :fieldNameList="sampleTableFields">
      </anonTaskStepTwo>
      <div class="operator_panel_wrap" v-show="step == 2">
        <ContentWrap id="analysis-result" title="匿名结果分析" description="" style="margin-top: 8px;">
          <div class="wait-result-div" v-show="!isExecEnd">
            <img class="loading-img" src="../../assets/images/loading.gif" />
            <div class="desc">正在进行匿名化处理，请稍候...</div>
            <el-button :icon="RefreshRight" link @click="refreshQueryData" v-preReClick>刷新查看结果</el-button>
          </div>
          <div class="wait-result-div" v-show="isExecEnd && analysisResultInfo.status == 'E'">
            <el-icon class="failed">
              <CircleCloseFilled />
            </el-icon>
            <div class="error-desc">{{ '执行失败，请返回上一步修改配置或联系管理员' }}</div>
            <div v-show="analysisResultInfo.errorMsg" class="error-desc">{{ '【' + analysisResultInfo.errorMsg + '】' }}
            </div>
          </div>
          <div class="analysis-result-main" v-show="isExecEnd && analysisResultInfo.status == 'Y'">
            <el-table ref="tableRef" v-show="analysisResultTableFields.length" :data="resultData"
              v-loading="analysisResultLoading" :highlight-current-row="true" stripe border tooltip-effect="light"
              height="100%" row-key="guid" :style="{ width: '100%', height: '280px' }">
              <el-table-column label="等价类" type="index" width="68px" align="center" show-overflow-tooltip>
                <template #default="scope">
                  <span>{{
                    pageInfo.curr !== undefined
                      ? (pageInfo.curr - 1) * pageInfo.limit + scope.$index + 1
                      : scope.$index + 1
                  }}</span>
                </template>
              </el-table-column>
              <template v-for="(item, index) in (analysisResultTableFields || [])">
                <el-table-column :label="item.chName" :width="item.dataType === 'datetime'
                  ? TableColumnWidth.DATETIME
                  : item.dataType === 'date'
                    ? TableColumnWidth.DATE
                    : originResultTableFieldColumn[item.enName]
                  " :align="getTextAlign(item)" :header-align="getTextAlign(item)"
                  :formatter="(row) => formatterPreviewDate(row, item)" :show-overflow-tooltip="true">
                </el-table-column>
              </template>
              <el-table-column label="等价类大小" prop="equivalenceClassNum" width="98" align="right" fixed="right"
                show-overflow-tooltip></el-table-column>
              <el-table-column label="重标识风险" prop="reIdentifyRisk" width="96" align="right" fixed="right"
                show-overflow-tooltip></el-table-column>
              <el-table-column label="判断重风险是否大于门限阈值" prop="isGtThreshold" width="130" align="left" fixed="right"
                show-overflow-tooltip></el-table-column>
            </el-table>
            <div v-show="!analysisResultTableFields.length" class="empty-content">
              <img src="../../assets/images/empty-data.png" :style="{ width: '168px', height: '96px' }" />
              <div class="empty-text">暂无数据</div>
            </div>
            <PageNav :class="[pageInfo.type]" :pageInfo="pageInfo" @pageChange="pageChange" />
            <div v-show="Object.keys(analysisResultInfo).length > 0">
              <div class="value-desc"><span style="font-weight: 600;margin-right: 8px;">重标识风险指标</span>{{ 'Rb=' +
                changeNum(analysisResultInfo.reIdentifyRiskRb || 0, 2) + ' Rc='
                +
                changeNum(analysisResultInfo.reIdentifyRiskRc || 0, 2) }}</div>
              <div class="value-desc"><span style="font-weight: 600;margin-right: 8px;">环境重标识攻击概率</span>{{
                'pr(context)=' +
                changeNum(analysisResultInfo.envReAttackPr || 0, 2)
                }}
              </div>
              <div class="value-desc"><span style="font-weight: 600;margin-right: 8px;">重标识总体风险</span>{{
                'R=Rc*pr(context)=' +
                analysisResultInfo.reIdentifyOverallRisk || 0 }}</div>
              <div class="value-desc" style="font-weight: 600;">{{ '重标识总体风险值' + ((analysisResultInfo.reIdentifyOverallRisk || 0) > (oldAnonTaskValueInfo.anonPrivacyMode?.riskThreshol || 0.05) ? '大于' : ((analysisResultInfo.reIdentifyOverallRisk || 0) == (oldAnonTaskValueInfo.anonPrivacyMode?.riskThreshol || 0.05) ? 
              '等于' :  '小于')) + '可接受风险阈值' +
                (oldAnonTaskValueInfo.anonPrivacyMode?.riskThreshold ==
                  null ?
                  0.05 : (changeNum(oldAnonTaskValueInfo.anonPrivacyMode?.riskThreshold || 0, 2))) + '，评为' +
                analysisResultInfo.rating + '级' }}</div>
            </div>
          </div>
        </ContentWrap>
      </div>
      <div class="operator_panel_wrap step-result" v-show="step == 3" style="height: calc(100% - 88px);">
        <ContentWrap id="analysis-result" title="匿名化数据结果" description="" style="margin-top: 8px;height: 100%;">
          <anonResultView :is-page="false"
            :execGuid="analysisResultInfo.status == 'Y' && step == 3 ? taskExecGuid : ''">
          </anonResultView>
        </ContentWrap>
      </div>
    </div>
    <div class="bottom_tool_wrap">
      <template v-if="step == 0">
        <el-button @click="cancelTask">取消</el-button>
        <el-button type="primary" @click="changeStep(2)">下一步</el-button>
      </template>
      <template v-else-if="step == 1">
        <el-button @click="changeStep(1)">上一步</el-button>
        <el-button type="primary" @click="changeStep(3)">下一步</el-button>
      </template>
      <template v-else-if="step == 2">
        <el-button @click="changeStep(2)">上一步</el-button>
        <el-button type="primary"
          :disabled="analysisResultInfo.status == 'R' || (isExecEnd && analysisResultInfo.status == 'E')"
          @click="changeStep(4)">下一步</el-button>
      </template>
      <template v-else>
        <el-button @click="changeStep(3)">上一步</el-button>
        <el-button type="primary" v-preReClick @click="exportResult">导出</el-button>
      </template>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.top_tool_wrap {
  width: 100%;
  height: 72px;
  margin: 8px 0 0px;
  display: flex;
  justify-content: center;
  align-items: center;

  :deep(.el-steps) {
    width: 60%;
  }
}

.bottom_tool_wrap {
  height: 40px;
  padding: 0 16px;
  border-top: 1px solid #d9d9d9;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content_main {
  height: calc(100% - 40px);
  padding: 0 16px;
  overflow: hidden auto;
}

.operator_panel_wrap {
  padding-bottom: 12px;
}

.wait-result-div {
  height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .loading-img {
    width: 40px;
    height: 40px;
    margin-bottom: 18px;
  }

  .desc {
    color: #999;
    margin-bottom: 18px;
    margin-left: 26px;
  }

  :deep(.el-icon.failed) {
    color: #E63E33;
    width: 32px;
    height: 32px;
    margin-bottom: 8px;

    svg {
      width: 32px;
      height: 32px;
    }
  }

  .error-desc {
    color: #E63E33;
    font-size: 14px;
    line-height: 21px;
    margin-bottom: 8px;
    font-weight: 600;
  }
}

.analysis-result-main {
  min-height: 250px;

  .value-desc {
    font-size: 14px;
    color: #212121;
    line-height: 21px;
  }
}

.step-result {
  :deep(.v-content-wrap) {
    height: 100%;

    .el-card__body {
      height: calc(100% - 50px) !important;

      .card-body-content {
        height: 100%;
      }
    }

    .table_tool_wrap {
      padding: 0px;
    }
  }

}

:deep(.custom-form) {
  align-items: flex-start;

  .wid60.el-form-item {
    width: calc(66.66% - 12px);
  }
}

:deep(.fixwidth-form) {
  width: 500px;

  .autoWidth.el-form-item {
    width: 80px;
  }
}

.table-v2-main {
  width: 100%;
  height: 240px;
  margin-top: 2px;

  .main-placeholder {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .empty-text {
      font-size: 14px;
      color: #b2b2b2;
    }
  }
}

:deep(.el-table-v2) {

  .el-table-v2__main {
    border: 1px solid #d9d9d9;
    background: #fff;
  }

  .el-table-v2__body tr.hover-row.el-table-v2__row--striped.current-row>td.el-table-v2__cell {
    background-color: var(--el-table-row-hover-bg-color);
  }

  .el-table-v2__body tr.current-row>td.el-table-v2__cell {
    background-color: var(--el-table-current-row-bg-color);
  }

  .el-table-v2__header {
    width: 100% !important;
  }

  .el-table-v2__header-cell,
  .el-table-v2__row-cell {
    border-right: 1px #d9d9d9 solid;
  }

  .el-table-v2__header-cell-text {
    color: #000;
    font-weight: normal;
  }

  .el-table-v2__empty {
    display: none !important;
  }

  .el-table-v2__header-row {
    border-bottom: 1px solid #d9d9d9;
  }
}
</style>