<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 { download } from "@/utils/common";
import anonResultView from './anonResultView.vue';

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;
        }) || [];
      } else {
        ElMessage.error(res.msg);
      }
    });
    /** 判断有抽样数据，需要查询接口 */
    getSampleDataByDsTable();
  }
}

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) {
    return v || '--';
  }
  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 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]];
    const json: any[] = XLSX.utils.sheet_to_json(sheet, { header: 1 });
    if (json.length == 0) {
      sampleTableFields.value = [];
      sampleTableData.value = [];
    } else {
      const res = await chTransformEn(json[0]);
      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;
  });
}

/** 获取文件解析后根据抽样比例得出的表格数据 */
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 > 1000 ? 1001 : cnt).map((info, row) => {
      let object = {};
      parseFileDataSum.value[0].forEach((chName, col) => {
        let name = sampleTableFields.value[col].enName;
        object[name] = info[col];
      });
      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,
    pageSize: 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) => {
  sampleTableFields.value = [];
  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 == 2) {
    formRef.value?.ruleFormRef?.validate((valid) => {
      if (valid) {
        dataSimpleFormRef.value?.ruleFormRef?.validate((valid) => {
          if (valid) {
            step.value = val - 1;
            stepsInfo.value.step = val - 1;
          }
        });
      }
    });
  } 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)) {
      step.value = val - 1;
      stepsInfo.value.step = val - 1;
      return;
    }
    if (!taskGuid.value) { //保存
      fullscreenLoading.value = true;
      saveAnonTask(saveParams).then((res: any) => {
        fullscreenLoading.value = false;
        if (res.code == proxy.$passCode) {
          taskGuid.value = res.data?.guid;
          isExecEnd.value = false;
          taskExecGuid.value = res.data?.lastExecGuid;
          step.value = val - 1;
          stepsInfo.value.step = val - 1;
          oldAnonTaskValueInfo.value = saveParams;
        } 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;
          oldAnonTaskValueInfo.value = saveParams;
        } else {
          ElMessage.error(res.msg);
        }
      })
    }
  } else if (val == 4) {
    //下一步之后，调用分析结果。

    getAnonAnalyzeResult(detailInfo.value.lastExecGuid).then((res: any) => {
      debugger
    });
    getAnonAnalyzePageData({
      pageSize: -1
    }).then((res: any) => {
      debugger
    });
    step.value = val - 1;
    stepsInfo.value.step = val - 1;
  } else if (val <= step.value) {
    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 || {};
        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;
        //文件解析
        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;
          }
          obsDownloadRequest(refSignInfo?.data).then((res: any) => {
            sampleTableDataLoading.value = false;
            if (res && !res.msg) {
              parseFileData(res);
            } else {
              res?.msg && 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;
              }) || [];
            } else {
              ElMessage.error(res.msg);
            }
          });
          /** 判断有抽样数据，需要查询接口 */
          getSampleDataByDsTable();
        }
        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("已取消");
  });
}

</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;">

        </ContentWrap>
      </div>
      <div class="operator_panel_wrap" v-show="step == 3">
        <ContentWrap id="analysis-result" title="匿名化数据结果" description="" style="margin-top: 8px;">
          <anonResultView :is-page="false" :execGuid="isExecEnd ? 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" @click="changeStep(4)">下一步</el-button>
      </template>
      <template v-else>
        <el-button type="primary" @click="changeStep(2)">上一步</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;
}

: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;


  .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>