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

<script lang="ts" setup name="anonTaskStepTwo">
import { TableColumnWidth } from '@/utils/enum';
import { CirclePlus, Delete } from '@element-plus/icons-vue';
import {
  getParamsList,
  getGeneralizeFileNameList,
  getLableByFieldName,
  validateAnonRule,
} from '@/api/modules/dataAnonymization';
import { useValidator } from '@/hooks/useValidator';
import { cloneDeep } from 'lodash-es';

const props = defineProps({
  fieldTypeList: {
    default: [],
    type: Array<any>
  },
  isFile: {
    default: false,
    type: Boolean
  },
  fieldNameList: {
    default: [],
    type: Array<any>
  },
  anonTaskRules: {
    default: [],
    type: Array<any>
  },
  anonPrivacyMode: {
    default: {},
    type: Object
  }
})

const { required } = useValidator();
const { proxy } = getCurrentInstance() as any;

const drawerRef = ref();

/** 泛化文件列表 */
const generalizeFileNameList: any = ref([]);

/** 脱敏规则字典列表 */
const desensitiveRuleTypeList: any = ref([]);

/** 标签类型字典列表 */
const labelTypeList: any = ref([]);

/** 加密算法字典列表 */
const hashMethodList = ref([]);

/** 当前正在编辑的表格索引 */
const currTableRowIndex: any = ref(null);

const ruleModelTableInfo = ref({
  id: 'rule-model-table',
  loading: false,
  minHeight: '200px',
  nodeKey: 'guid',
  height: '200px',
  fields: [
    { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center" },
    { label: "字段中文名称", field: "fieldChName", width: 150 },
    { label: "字段英文名称", field: "fieldName", width: 150 },
    { label: "字段类型", field: "fieldTypeName", width: 120 },
    { label: "数据类型", field: "dataTypeName", width: 120 },
    {
      label: "脱敏方式", field: "desensitiveRule", width: 120, getName: (scope) => {
        let rule = scope.row.desensitiveRule;
        return rule ? rule : (scope.row.generalizeFileGuid ? '泛化' : '--');
      }
    },
  ],
  data: <any>[],
  showPage: false,
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 100,
    fixed: 'right',
    btns: [
      {
        label: "编辑", value: "ruleEdit", click: (scope) => {
          currTableRowIndex.value = scope.$index;
          drawerInfo.value.visible = true;
          drawerInfo.value.type = 'edit';
          drawerInfo.value.header.title = '编辑字段脱敏规则';
          let row = scope.row;
          fieldRulesFormItems.value.forEach(item => {
            item.default = row[item.field];
            if (item.field == 'encryptionAlgorithmCode' || item.field == 'salted') {
              item.visible = row.desensitiveRuleCode == 'HASH';
            } else if (item.field == 'decimalPlaces') {
              item.visible = row.desensitiveRuleCode == 'ROUNDING';
            }
          });
          let fieldNameList = props.fieldNameList.map(f => {
            if (f.enName != row.fieldName && ruleModelTableInfo.value.data.some(d => d.fieldName == f.enName)) {
              f.disabled = true;
            } else {
              f.disabled = false;
            }
            return f;
          });
          fieldRulesFormItems.value[0].options = fieldNameList;
          fieldRulesFormInfo.value.formInfo.items = fieldRulesFormItems.value;
          drawerInfo.value.container.contents[0] = fieldRulesFormInfo.value;
          desensitiveRuleDetail.value = {
            dissembleType: 1, /** 1从左往右，2.从右往左 */
            ruleDetails: <any>[{
              digitType: 1,
            }]
          };
          charReplaceRuleDetail.value = {
            replaceType: 1, /** 1从左往右，2.从右往左 */
            ruleDetails: <any>[{
              digitType: 1,
              ruleType: 1
            }]
          };
          rangeReplaceRuleDetails.value = [{
            lowOperator: '≤',
            fieldChName: row.fieldChName,
            upperOperator: '≤'
          }];

          if (row.desensitiveRuleCode == 'DISSEMBLE') {
            desensitiveRuleDetail.value = row.desensitiveRuleDetail || {};
          } else if (row.desensitiveRuleCode == 'CHARREPLACE') {
            charReplaceRuleDetail.value = row.desensitiveRuleDetail || {};
          } else if (row.desensitiveRuleCode == 'RANGEREPLACE') {
            rangeReplaceRuleDetails.value = row.desensitiveRuleDetail?.ruleDetails?.map(rd => {
              rd.fieldChName = row.fieldChName;
              return rd;
            }) || [];
          }
          if (!row.desensitiveRuleCode) {
            drawerInfo.value.container.contents = [fieldRulesFormInfo.value];
          } else {
            drawerInfo.value.container.contents = [fieldRulesFormInfo.value, fieldRulesEndFormInfo.value];
          }
        }
      },
      {
        label: "删除", value: "delete", click: (scope) => {
          proxy.$openMessageBox("此操作将永久删除, 是否继续?", () => {
            let fieldName = scope.row.fieldName;
            ruleModelTableInfo.value.data.splice(scope.row.index, 1);
            updatePrivacyFormFieldsOptions(fieldName);
            // 同步去掉隐私模型设置中的字段。
            proxy.$ElMessage.success('删除成功');
          }, () => {
            proxy.$ElMessage.info("已取消");
          })
        }
      },
    ],
  }
})

/** 字段脱敏规则表单配置 */
const fieldRulesFormItems = ref([{
  label: '选择字段',
  type: 'select',
  placeholder: '请选择',
  field: 'fieldName',
  default: '',
  options: props.fieldNameList,
  props: {
    label: 'chName',
    value: 'enName',
    disabled: 'disabled'
  },
  filterable: true,
  clearable: false,
  required: true
}, {
  label: '字段类型',
  type: 'select',
  placeholder: '请选择',
  field: 'fieldTypeCode',
  default: 'varchar',
  options: props.fieldTypeList,
  props: {
    label: 'label',
    value: 'value'
  },
  disabled: true,
  clearable: true,
  required: true
}, {
  label: '数据类型',
  type: 'select',
  placeholder: '请选择',
  field: 'dataTypeCode',
  default: '',
  options: labelTypeList.value,
  props: {
    label: 'label',
    value: 'value'
  },
  filterable: true,
  clearable: true,
  required: false
}, {
  label: 'K匿名泛化',
  type: 'select',
  placeholder: '请选择',
  field: 'generalizeFileGuid',
  default: '',
  options: generalizeFileNameList.value,
  props: {
    label: 'generalizeFileName',
    value: 'guid'
  },
  filterable: true,
  clearable: true,
  required: false
}, {
  label: '脱敏规则',
  type: 'select',
  placeholder: '请选择',
  field: 'desensitiveRuleCode',
  default: 'DISSEMBLE',
  options: desensitiveRuleTypeList.value,
  props: {
    label: 'label',
    value: 'value'
  },
  filterable: true,
  clearable: true,
  required: false
}, {
  label: '加密算法',
  type: 'select',
  placeholder: '请选择',
  field: 'encryptionAlgorithmCode',
  default: '',
  options: hashMethodList.value,
  props: {
    label: 'label',
    value: 'value'
  },
  filterable: true,
  clearable: true,
  visible: false,
  required: true
}, {
  label: '加盐值',
  type: 'input',
  placeholder: '请输入0~9',
  field: 'salted',
  maxlength: 1,
  min: 0,
  max: 9,
  inputType: 'integerNumber',
  default: 5,
  required: true,
  filterable: true,
  clearable: true,
  visible: false,
}, {
  label: '保留小数',
  type: 'input',
  placeholder: '请输入0~5',
  field: 'decimalPlaces',
  maxlength: 1,
  min: 0,
  max: 5,
  inputType: 'integerNumber',
  default: 2,
  required: true,
  filterable: true,
  clearable: true,
  visible: false,
}]);

const fieldRulesFormRules = ref({
  fieldName: [required('请选择字段')],
  // dataTypeCode: [required('请选择数据类型')], //不填标识非敏感标识。
  // desensitiveRuleCode: [required('请选择脱敏规则')], 脱敏规则和泛化文件选择一个即可。二者必选其一，可以两者共存。
  encryptionAlgorithmCode: [required('请选择加密算法')],
  salted: [required('请输入加盐值')],
  decimalPlaces: [required('请输入保留小数')]
});

const fieldRulesFormInfo = ref({
  type: "form",
  title: "",
  col: "span",
  formInfo: {
    id: "add-class-form",
    readonly: false,
    items: fieldRulesFormItems.value,
    rules: fieldRulesFormRules.value,
  },
});

const fieldRulesEndFormInfo = ref({
  type: "form",
  title: "",
  col: "mt8",
  showSlot: false,
  formInfo: {
    id: "add-rules-end-form",
    readonly: false,
    items: [{
      label: '样本数据',
      type: 'input',
      placeholder: '请输入样本',
      field: 'testData',
      default: '',
      required: false,
      clearable: true,
      block: true,
      col: 'mb8',
      validateBtn: {
        value: 'validate',
        label: '验证',
        click: () => {
          let formInline = drawerRef.value?.getDrawerConRef('drawerFormRef')?.formInline;
          let formInline1 = drawerRef.value?.getDrawerConRef('drawerFormRef', 1)?.formInline;
          if (!formInline1.testData) {
            proxy.$ElMessage.error('样本数据不能为空');
            return;
          }
          validateAnonRule({
            desensitiveRuleCode: formInline.desensitiveRuleCode,
            value: formInline1.testData,
            desensitiveRuleDetail: getDesensitiveRuleDetailInfo(formInline)
          }).then((res: any) => {
            if (res?.code == proxy.$passCode) {
              let result = res.data;
              fieldRulesEndFormInfo.value.formInfo.items[0].default = formInline1.testData;
              fieldRulesEndFormInfo.value.formInfo.items[1].default = formInline.desensitiveRuleCode == 'BLANK' ? ' ' : result;
            } else {
              proxy.$ElMessage.error(res.msg);
            }
          })
        }
      }
    }, {
      label: '脱敏效果',
      type: 'input',
      placeholder: '点击验证后展示脱敏效果',
      field: 'validateResult',
      default: '',
      block: true,
      required: false,
      disabled: true
    }],
    rules: {},
  },
});

/** 获取规则配置详情。 */
const getDesensitiveRuleDetailInfo = (formInline) => {
  let desensitiveRuleDetailInfo: any = {};
  if (formInline.desensitiveRuleCode == 'DISSEMBLE') {
    desensitiveRuleDetailInfo = desensitiveRuleDetail.value;
  } else if (formInline.desensitiveRuleCode == 'CHARREPLACE') {
    desensitiveRuleDetailInfo = charReplaceRuleDetail.value;
  } else if (formInline.desensitiveRuleCode == 'RANGEREPLACE') {
    desensitiveRuleDetailInfo = {
      ruleDetails: rangeReplaceRuleDetails.value
    };
  } else if (formInline.desensitiveRuleCode == 'ROUNDING') {
    desensitiveRuleDetailInfo = {
      decimalPlaces: formInline.decimalPlaces
    }
  } else if (formInline.desensitiveRuleCode == 'HASH') {
    desensitiveRuleDetailInfo = {
      encryptionAlgorithmCode: formInline.encryptionAlgorithmCode,
      salted: formInline.salted
    }
  }
  return desensitiveRuleDetailInfo;
}

const drawerInfo = ref({
  visible: false,
  direction: 'rtl',
  size: 540,
  header: {
    title: '添加字段脱敏规则',
  },
  type: '',
  container: {
    contents: [fieldRulesFormInfo.value, fieldRulesEndFormInfo.value],
  },
  footer: {
    visible: true,
    btns: [
      { type: 'default', label: '取消', value: 'cancel' },
      { type: 'primary', label: '确定', value: 'save', loading: false },
    ]
  }
});

const addRowRules = () => {
  drawerInfo.value.visible = true;
  drawerInfo.value.type = 'add';
  drawerInfo.value.header.title = '添加字段脱敏规则';
  fieldRulesFormItems.value.forEach(item => {
    if (item.field == 'fieldTypeCode') {
      item.default = 'varchar';
    } else if (item.field == 'desensitiveRuleCode') {
      item.default = 'DISSEMBLE';
    } else if (item.field == 'encryptionAlgorithmCode' || item.field == 'salted') {
      item.visible = false;
      item.default = '';
      item.field == 'salted' && (item.default = 5);
    } else if (item.field == 'decimalPlaces') {
      item.visible = false;
      item.default = 2;
    } else {
      item.default = '';
    }
  });
  let fieldNameList = props.fieldNameList.map(f => {
    if (ruleModelTableInfo.value.data.some(d => d.fieldName == f.enName)) {
      f.disabled = true;
    } else {
      f.disabled = false;
    }
    return f
  });
  fieldRulesFormItems.value[0].options = fieldNameList;
  fieldRulesFormInfo.value.formInfo.items = fieldRulesFormItems.value;
  desensitiveRuleDetail.value = {
    dissembleType: 1, /** 1从左往右，2.从右往左 */
    ruleDetails: <any>[{
      digitType: 1,
    }]
  };
  charReplaceRuleDetail.value = {
    replaceType: 1, /** 1从左往右，2.从右往左 */
    ruleDetails: <any>[{
      digitType: 1,
      ruleType: 1
    }]
  };
  rangeReplaceRuleDetails.value = [{
    lowOperator: '≤',
    fieldChName: '',
    upperOperator: '≤'
  }];
  drawerInfo.value.container.contents = [fieldRulesFormInfo.value, fieldRulesEndFormInfo.value];
}

const drawerBtnClick = async (btn, info) => {
  if (btn.value == 'cancel') {
    drawerInfo.value.visible = false
  } else {
    if (!info.generalizeFileGuid && !info.desensitiveRuleCode) {
      proxy.$ElMessage.error('K匿名泛化与脱敏规则不能同时为空');
      return;
    }
    if (!(info.fieldTypeCode == 'int' || info.fieldTypeCode == 'decimal' || info.fieldTypeCode == 'tinyint')) {
      if (info.desensitiveRuleCode == 'ROUNDING') {
        proxy.$ElMessage.error('数值类型字段的脱敏规则不能设置取整');
        return;
      }
      if (info.desensitiveRuleCode == 'RANGEREPLACE') {
        proxy.$ElMessage.error('数值类型字段的脱敏规则不能设置区间替换');
        return;
      }
    }
    drawerInfo.value.footer.btns[1].loading = true;
    let desensitiveRuleDetailInfo = getDesensitiveRuleDetailInfo(info);
    // 脱敏规则为掩盖，字符，区间替换存在时需要调用接口检验
    if (info.desensitiveRuleCode == 'DISSEMBLE' || info.desensitiveRuleCode == 'CHARREPLACE' || info.desensitiveRuleCode == 'RANGEREPLACE') {
      let res: any = await validateAnonRule({
        desensitiveRuleCode: info.desensitiveRuleCode,
        value: '',
        desensitiveRuleDetail: desensitiveRuleDetailInfo
      })
      if (res?.code != proxy.$passCode) {
        proxy.$ElMessage.error(res.msg);
      }
    }
    drawerInfo.value.footer.btns[1].loading = false;
    let saveData: any = { ...info };
    saveData.desensitiveRuleDetail = desensitiveRuleDetailInfo;
    saveData.fieldChName = props.fieldNameList?.find(f => f.enName == saveData.fieldName)?.chName;
    saveData.dataTypeName = saveData.dataTypeCode && labelTypeList.value.find(l => l.value == saveData.dataTypeCode)?.label;
    saveData.fieldTypeName = saveData.fieldTypeCode && props.fieldTypeList?.find(f => f.value == saveData.fieldTypeCode)?.label;
    saveData.desensitiveRule = info.desensitiveRuleCode && desensitiveRuleTypeList.value.find(d => d.value == info.desensitiveRuleCode)?.label;
    let changeFields = '';
    if (drawerInfo.value.type == 'add') {
      ruleModelTableInfo.value.data.push(saveData);
    } else if (drawerInfo.value.type == 'edit') {
      if (!currTableRowIndex.value != null) {
        let originFieldName = ruleModelTableInfo.value.data[currTableRowIndex.value]?.fieldName;
        changeFields = originFieldName == saveData.fieldName ? '' : originFieldName;
        ruleModelTableInfo.value.data[currTableRowIndex.value] = saveData;
      }
    }
    drawerInfo.value.visible = false;
    updatePrivacyFormFieldsOptions(changeFields);
  }
}

/** 更新下拉选择字段的下拉列表，若是字段被删除，需要同步去掉下拉选择值。 */
const updatePrivacyFormFieldsOptions = (changeFields) => {
  let optionsList = ruleModelTableInfo.value.data?.map(v => {
    return {
      fieldName: v.fieldName,
      fieldChName: v.fieldChName
    }
  }) || [];
  privacyFormItems.value[2].children[0].options = optionsList;
  privacyFormItems.value[3].children[0].options = optionsList;
  let formInline = privacyFormRef.value?.formInline;
  privacyFormItems.value.forEach((item, index) => {
    item.default = formInline[item.field];
    if (item.default == 'Y') {
      item.children?.forEach(child => {
        child.default = formInline[child.field];
        if (changeFields && (child.field == 'tcFieldName' || child.field == 'ldFieldName') && child.default == changeFields) {
          child.default = ''
        }
      });
    }
  })
}

/** 当前选择的字段对应的标签信息。 */
const currLabelInfo: any = ref({});

const drawerSelectChange = (val, row, info) => {
  if (row.field === 'desensitiveRuleCode') {
    let methodItem = fieldRulesFormItems.value.find(item => item.field == 'encryptionAlgorithmCode');
    let saltedItem = fieldRulesFormItems.value.find(item => item.field == 'salted');
    let decimalPlaceItem = fieldRulesFormItems.value.find(item => item.field == 'decimalPlaces');
    methodItem && (methodItem.visible = val == 'HASH');
    saltedItem && (saltedItem.visible = val == 'HASH');
    decimalPlaceItem && (decimalPlaceItem.visible = val == 'ROUNDING');
    fieldRulesFormItems.value.forEach(item => {
      item.default = info[item.field];
      if (item.field == 'decimalPlaces') {
        if (item.default == null) {
          item.default = 2;
        }
      } else if (item.field == 'salted') {
        if (item.default == null) {
          item.default = 5;
        }
      }
    });
    if (!val) {
      drawerInfo.value.container.contents = [fieldRulesFormInfo.value];
    } else {
      drawerInfo.value.container.contents = [fieldRulesFormInfo.value, fieldRulesEndFormInfo.value];
    }
  }
  // else if (row.field == 'fieldTypeCode') {
  //   fieldRulesFormItems.value.forEach(item => {
  //     item.default = info[item.field];
  //     if (item.field == 'desensitiveRuleCode') {
  //       if (!(val == 'int' || val == 'decimal' || val == 'tinyint')) {
  //         item.options = desensitiveRuleTypeList.value.filter(d => d.value != 'ROUNDING' && d.value != 'RANGEREPLACE');
  //         if (item.default == 'ROUNDING' || item.default == 'RANGEREPLACE') {
  //           item.default = 'DISSEMBLE';
  //         }
  //       } else {
  //         item.options = desensitiveRuleTypeList.value;
  //       }
  //     }
  //   });
  // } 
  else if (row.field == 'fieldName') { //选择字段改变之后，调用接口。
    let tableField = props.fieldNameList.find(f => f.enName == val);
    let dataType = tableField?.dataType || 'varchar';
    fieldRulesFormItems.value.forEach(item => {
      item.default = info[item.field];
      if (item.field == 'fieldTypeCode') {
        item.default = dataType;
      }
    });
    getLableByFieldName(val).then((res: any) => {
      if (res?.code == proxy.$passCode) {
        let labelInfo = currLabelInfo.value = res.data || {};
        fieldRulesFormItems.value.forEach(item => {
          item.default = info[item.field];
          if (item.field == 'dataTypeCode') {
            item.default = labelInfo.labelTypeCode;
          }
        });
      } else {
        proxy.$ElMessage.error(res.msg);
      }
    })
    if (info.desensitiveRuleCode == 'RANGEREPLACE') {
      rangeReplaceRuleDetails.value.forEach(r => {
        r.fieldChName = tableField?.chName || val;
      });
    }
  }
}

const drawerInputChange = (val, row, info) => {
  if (row.field == 'testData') { //样本数据修改后，清空脱敏结果
    fieldRulesEndFormInfo.value.formInfo.items[0].default = val;
    fieldRulesEndFormInfo.value.formInfo.items[1].default = '';
  }
}

/** 掩盖规则中的位数和剩余位数 */
const digitTypeList = ref([{
  value: 1,
  label: '位数'
}, {
  value: 2,
  label: '剩余位数'
}]);

const dissembleRuleTypeList = ref([{
  value: 1,
  label: '脱敏'
}, {
  value: 2,
  label: '不脱敏'
}]);

/** 掩盖类型的脱敏规则 分段规则配置 */
const desensitiveRuleDetail = ref({
  dissembleType: 1, /** 1从左往右，2.从右往左 */
  ruleDetails: <any>[{
    digitType: 1,
  }]
});

const addSegmentRule = () => {
  desensitiveRuleDetail.value.ruleDetails.push({
    digitType: 1,
  });
};

const deleteSegmentRule = (item, index) => {
  desensitiveRuleDetail.value.ruleDetails.splice(index, 1);
}

const inputEventDigitChange = (val, item, prop = 'digit') => {
  item[prop] = item[prop].toString().replace(/\./g, "")
  item[prop] = item[prop].toString().replace(/^\D*(\d{0,7}(?:\.\d{0})?).*$/g, "$1")
  if (prop == 'digit' && val != "" && item.digit < 1) {
    item.digit = 1;
  }
}

/** 字符规则中的替换方式 */
const charReplaceRuleTypeList = ref([{
  value: 1,
  label: '随机替换'
}, {
  value: 2,
  label: '固定值替换'
}]);

/** 字符替换的脱敏规则 分段规则配置 */
const charReplaceRuleDetail = ref({
  replaceType: 1, /** 1从左往右，2.从右往左 */
  ruleDetails: <any>[{
    digitType: 1,
    ruleType: 1
  }]
});

const addCharReplaceSegmentRule = () => {
  charReplaceRuleDetail.value.ruleDetails.push({
    digitType: 1,
    ruleType: 1
  });
};

const deleteCharReplaceSegmentRule = (item, index) => {
  charReplaceRuleDetail.value.ruleDetails.splice(index, 1);
}

/** ----- 区间替换规则 --- */
/** 区间替换的小于或小于等于字符列表 */
const lowerOperatorList: any = ref([{
  value: '≤',
  label: '≤'
}, {
  value: '<',
  label: '<'
}]);

/** 
 * 字符替换的脱敏规则 分段规则配置。
 * { lowValue: , lowOperator: , upperValue: , upperOperator: , replaceValue: ''  }
 */
const rangeReplaceRuleDetails: any = ref([{
  lowOperator: '≤',
  fieldChName: '',
  upperOperator: '≤'
}]);

const addRangeReplaceSegmentRule = () => {
  let fieldChName = '';
  if (rangeReplaceRuleDetails.value?.length) {
    fieldChName = rangeReplaceRuleDetails.value[0].fieldChName;
  } else {
    let fieldName = drawerRef.value?.getDrawerConRef('drawerFormRef')?.formInline?.fieldName;
    let tableField = fieldName && props.fieldNameList?.find(f => f.enName == fieldName);
    fieldChName = tableField?.chName;
  }
  rangeReplaceRuleDetails.value.push({
    lowOperator: '≤',
    fieldChName: fieldChName,
    upperOperator: '≤'
  });
};

const deleteRangeReplaceSegmentRule = (item, index) => {
  rangeReplaceRuleDetails.value.splice(index, 1);
}

/** 隐私模型设置 */
const privacyFormItems: any = ref([{
  label: '选择准标识符等价类隐私模型',
  type: 'checkbox-input-item',
  field: 'isKaNumber',
  default: 'N',
  placeholder: 'K匿名',
  trueValue: 'Y',
  falseValue: 'N',
  children: [
    {
      label: '',
      type: 'input',
      placeholder: '请输入',
      field: 'kaNumber',
      inputType: 'integerNumber',
      default: '',
      min: 1,
      maxlength: 6,
      disabled: false,
      clearable: true,
      visible: false,
      col: 'ka-checkbox-input',
      style: { width: '100px', margin: 0 }
    }
  ],
  required: true,
  col: 'checkbox-input'
}, {
  label: '设置重标识可接受风险阈值',
  type: 'checkbox-input-item',
  field: 'isRiskThreshold',
  default: 'N',
  placeholder: '阈值',
  trueValue: 'Y',
  falseValue: 'N',
  children: [
    {
      label: '',
      type: 'input',
      placeholder: '请输入',
      field: 'riskThreshold',
      default: '',
      maxlength: 6,
      min: 0,
      max: 1,
      inputType: 'scoreNumber',
      disabled: false,
      clearable: true,
      visible: false,
      col: 'ka-checkbox-input',
      style: { width: '100px', margin: 0 }
    }
  ],
  required: true,
  col: 'checkbox-input'
}, {
  label: '设置L多样性及T接近',
  type: 'checkbox-input-item',
  field: 'isLdField',
  default: 'N',
  placeholder: 'L多样性',
  trueValue: 'Y',
  falseValue: 'N',
  children: [
    {
      label: '',
      type: 'select',
      placeholder: '请选择字段',
      field: 'ldFieldName',
      options: [],
      props: {
        label: 'fieldChName',
        value: 'fieldName'
      },
      default: '',
      filterable: true,
      clearable: true,
      visible: false,
      col: 'ka-checkbox-input',
      style: { width: '120px', margin: 0 }
    },
    {
      label: '',
      type: 'input',
      placeholder: '请输入',
      field: 'ldNumber',
      inputType: 'integerNumber',
      default: '',
      maxlength: 6,
      min: 1,
      disabled: false,
      clearable: true,
      visible: false,
      col: 'ka-checkbox-input',
      style: { width: '100px', margin: 0 }
    }
  ],
  block: false,
  required: true,
  col: 'checkbox-input'
}, {
  label: '',
  type: 'checkbox-input-item',
  field: 'isTcField',
  default: 'N',
  placeholder: 'T接近',
  trueValue: 'Y',
  falseValue: 'N',
  children: [
    {
      label: '',
      type: 'select',
      placeholder: '请选择字段',
      field: 'tcFieldName',
      default: '',
      options: [],
      props: {
        label: 'fieldChName',
        value: 'fieldName'
      },
      filterable: true,
      clearable: true,
      visible: false,
      col: 'ka-checkbox-input',
      style: { width: '120px', margin: 0 }
    },
    {
      label: '',
      type: 'input',
      placeholder: '请输入',
      field: 'tcThreshold',
      default: '',
      maxlength: 6,
      min: 0,
      max: 1,
      inputType: 'scoreNumber',
      disabled: false,
      clearable: true,
      visible: false,
      col: 'ka-checkbox-input',
      style: { width: '100px', margin: 0 }
    }
  ],
  required: false,
  block: true,
  col: 'checkbox-input lmt12'
}]);

const privacyFormRules = ref({
  kaNumber: [required('请输入K匿名值')],
  riskThreshold: [required('请输入阈值')],
  ldFieldName: [required('请选择L多样性字段')],
  ldNumber: [required('请输入L多样性值')],
  tcFieldName: [required('请选择T接近字段')],
  tcThreshold: [required('请输入T接近阈值')]
});

/** 记录下旧的隐私模型设置 */
const oldPrivacyModelValue: any = ref({
  isKaNumber: 'N',
  isRiskThreshold: 'N',
  isLdField: 'N',
  isTcField: 'N'
});

const handleCheckboxChange = (val, value, row) => {
  oldPrivacyModelValue.value = Object.assign({}, oldPrivacyModelValue.value, value);
  privacyFormItems.value.forEach(item => {
    item.default = oldPrivacyModelValue.value[item.field];
    item.children?.forEach(child => {
      child.default = oldPrivacyModelValue.value[child.field];
    });
  })
  if (row.field == 'isKaNumber') {
    let kaItem = privacyFormItems.value[0]?.children?.[0];
    kaItem && (kaItem.visible = val == 'Y');
  } else if (row.field == 'isRiskThreshold') {
    let riskItem = privacyFormItems.value[1]?.children?.[0];
    riskItem && (riskItem.visible = val == 'Y');
  } else if (row.field == 'isLdField') {
    let childrenItem = privacyFormItems.value[2]?.children;
    childrenItem?.[0] && (childrenItem[0].visible = val == "Y");
    childrenItem?.[1] && (childrenItem[1].visible = val == "Y");
  } else if (row.field == 'isTcField') {
    let childrenItem = privacyFormItems.value[3]?.children;
    childrenItem?.[0] && (childrenItem[0].visible = val == "Y");
    childrenItem?.[1] && (childrenItem[1].visible = val == "Y");
  }
}

watch(() => props.fieldNameList, (val) => {
  fieldRulesFormItems.value[0].options = val || [];
  if (props.isFile) {
    fieldRulesFormItems.value[1].disabled = false
  } else {
    fieldRulesFormItems.value[1].disabled = true;
  }
}, {
  immediate: true
})

watch(() => props.fieldTypeList, (val) => {
  fieldRulesFormItems.value[1].options = val || [];
}, {
  immediate: true
})

watch(() => props.anonPrivacyMode, (val) => {
  if (!val) {
    return;
  }
  let hasKaNumber = val.kaNumber != null;
  privacyFormItems.value[0].default = hasKaNumber ? 'Y' : 'N';
  privacyFormItems.value[0].children[0].visible = hasKaNumber;
  privacyFormItems.value[0].children[0].default = val.kaNumber;
  oldPrivacyModelValue.value.isKaNumber = hasKaNumber ? 'Y' : 'N';
  oldPrivacyModelValue.value.kaNumber = val.kaNumber;
  let hasRiskThreshold = val.riskThreshold != null;
  privacyFormItems.value[1].default = hasRiskThreshold ? 'Y' : 'N';
  privacyFormItems.value[1].children[0].visible = hasRiskThreshold;
  privacyFormItems.value[1].children[0].default = val.riskThreshold;
  oldPrivacyModelValue.value.isRiskThreshold = hasRiskThreshold ? 'Y' : 'N';
  oldPrivacyModelValue.value.riskThreshold = val.riskThreshold;
  let hasldFieldName = !!val.ldFieldName;
  privacyFormItems.value[2].default = hasldFieldName ? 'Y' : 'N';
  privacyFormItems.value[2].children[0].visible = hasldFieldName;
  privacyFormItems.value[2].children[1].visible = hasldFieldName;
  privacyFormItems.value[2].children[0].default = val.ldFieldName;
  privacyFormItems.value[2].children[1].default = val.ldNumber;
  oldPrivacyModelValue.value.isLdField = hasldFieldName ? 'Y' : 'N';
  oldPrivacyModelValue.value.ldFieldName = val.ldFieldName;
  oldPrivacyModelValue.value.ldNumber = val.ldNumber;
  let hasTcField = !!val.tcFieldName;
  privacyFormItems.value[3].default = hasTcField ? 'Y' : 'N';
  privacyFormItems.value[3].children[0].visible = hasTcField;
  privacyFormItems.value[3].children[1].visible = hasTcField;
  privacyFormItems.value[3].children[0].default = val.tcFieldName;
  privacyFormItems.value[3].children[1].default = val.tcThreshold;
  oldPrivacyModelValue.value.isTcField = hasTcField ? 'Y' : 'N';
  oldPrivacyModelValue.value.tcFieldName = val.tcFieldName;
  oldPrivacyModelValue.value.tcThreshold = val.tcThreshold;
}, {
  deep: true
})

watch(() => props.anonTaskRules, (val) => {
  ruleModelTableInfo.value.data = val || [];
  let optionsList = val?.map(v => {
    return {
      fieldName: v.fieldName,
      fieldChName: v.fieldChName
    }
  }) || [];
  privacyFormItems.value[2].children[0].options = optionsList;
  privacyFormItems.value[3].children[0].options = optionsList;
})

onBeforeMount(() => {
  getParamsList({
    dictType: "标签类型",
  }).then((res: any) => {
    if (res?.code == proxy.$passCode) {
      labelTypeList.value = res.data || [];
      let item = fieldRulesFormItems.value.find(item => item.field == 'dataTypeCode');
      item && (item.options = labelTypeList.value);
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  });
  getParamsList({
    dictType: "脱敏规则",
  }).then((res: any) => {
    if (res?.code == proxy.$passCode) {
      desensitiveRuleTypeList.value = res.data || [];
      let item = fieldRulesFormItems.value.find(item => item.field == 'desensitiveRuleCode');
      item && (item.options = desensitiveRuleTypeList.value);
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  });
  getParamsList({
    dictType: "加密算法",
  }).then((res: any) => {
    if (res?.code == proxy.$passCode) {
      hashMethodList.value = res.data || [];
      let item = fieldRulesFormItems.value.find(item => item.field == 'encryptionAlgorithmCode');
      item && (item.options = hashMethodList.value);
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  });
  getGeneralizeFileNameList().then((res: any) => {
    if (res?.code == proxy.$passCode) {
      generalizeFileNameList.value = res.data || [];
      let item = fieldRulesFormItems.value.find(item => item.field == 'generalizeFileGuid');
      item && (item.options = generalizeFileNameList.value);
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  });
})

/** 隐私模型设置表单 */
const privacyFormRef = ref();

const getStepTwoConfigInfo = async () => {
  if (!ruleModelTableInfo.value.data?.length) {
    proxy.$ElMessage.error('字段脱敏规则不能为空');
    return false;
  }
  try {
    await privacyFormRef.value?.ruleFormRef?.validate();
    // 验证通过
    return {
      anonPrivacyMode: cloneDeep(privacyFormRef.value?.formInline),
      anonTaskRules: ruleModelTableInfo.value.data
    };
  } catch (error) {
    // 验证失败
    return false;
  }
}

/** 字段改变，可能是切换了表，需要清空规则配置。判断 第一步到第二步时，如果字段列表中与字段脱敏规则中的字段不匹配，应清空，并同时清空T接近字段。 */
const updateNextStepRules = () => {
  let deleteFieldNames: string[] = [];
  ruleModelTableInfo.value.data = ruleModelTableInfo.value.data.filter(rule => {
    if (!props.fieldNameList?.some(v => v.enName == rule.fieldName)) {
      deleteFieldNames.push(rule.fieldName);
      return false;
    }
    return true;
  });
  if (deleteFieldNames?.length) {
    let optionsList = ruleModelTableInfo.value.data?.map(v => {
      return {
        fieldName: v.fieldName,
        fieldChName: v.fieldChName
      }
    }) || [];
    privacyFormItems.value[2].children[0].options = optionsList;
    privacyFormItems.value[3].children[0].options = optionsList;
    let formInline = privacyFormRef.value?.formInline;
    privacyFormItems.value.forEach((item, index) => {
      item.default = formInline[item.field];
      if (item.default == 'Y') {
        item.children?.forEach(child => {
          child.default = formInline[child.field];
          if ((child.field == 'tcFieldName' || child.field == 'ldFieldName') && deleteFieldNames.includes(child.default)) {
            child.default = ''
          }
        });
      }
    })
  }
}

defineExpose({
  getStepTwoConfigInfo,
  updateNextStepRules
})

</script>

<template>
  <div class="operator_panel_wrap">
    <ContentWrap id="id-rules" title="设置匿名化规则" description="" style="margin-top: 8px;">
      <Table :tableInfo="ruleModelTableInfo" />
      <div class="row-add-btn">
        <el-button link @click="addRowRules" :icon="CirclePlus" v-preReClick>添加字段脱敏规则</el-button>
      </div>
    </ContentWrap>
    <ContentWrap id="id-screctModel" title="隐私模型设置" description="" style="margin-top: 16px;">
      <Form style="width: 80%;max-width: 500px;" ref="privacyFormRef" :itemList="privacyFormItems"
        :rules="privacyFormRules" formId="model-select-edit" @checkboxChange="handleCheckboxChange" />
    </ContentWrap>

    <Drawer ref="drawerRef" :drawerInfo="drawerInfo" @drawerBtnClick="drawerBtnClick"
      @drawerInputChange="drawerInputChange" @drawerSelectChange="drawerSelectChange">
      <template v-slot:default>
        <div v-show="drawerRef?.getDrawerConRef('drawerFormRef')?.formInline?.desensitiveRuleCode == 'DISSEMBLE'">
          <div>{{ '请配置分段是否脱敏' + `(${desensitiveRuleDetail.ruleDetails?.length}/10)` }}</div>
          <el-radio-group v-model="desensitiveRuleDetail.dissembleType">
            <el-radio :value="1">从左往右</el-radio>
            <el-radio :value="2">从右往左</el-radio>
          </el-radio-group>
          <div class="seg-main">
            <div class="row-per" v-for="(item, index) in desensitiveRuleDetail.ruleDetails">
              <el-select v-model="item.digitType" :style="{ width: item.digitType == 2 ? '322px' : '170px' }">
                <el-option v-for="item in digitTypeList" :label="item.label" :value="item.value"
                  :key="item.value"></el-option>
              </el-select>
              <el-input v-show="item.digitType != 2" style="width:137px;margin-left: 4px;" v-model="item.digit"
                :maxlength="6" :min="1" @input="(val) => inputEventDigitChange(val, item)" placeholder="请输入"></el-input>
              <el-select v-model="item.ruleType" style="width:170px;margin-left: 4px;">
                <el-option v-for="item in dissembleRuleTypeList" :label="item.label" :value="item.value"
                  :key="item.value"></el-option>
              </el-select>
              <div class="title_tool" @click="deleteSegmentRule(item, index)">
                <el-icon :size="20" color="#b2b2b2">
                  <Delete />
                </el-icon>
              </div>
            </div>
            <div class="row-add-btn">
              <el-button :disabled="desensitiveRuleDetail.ruleDetails?.length > 9" link @click="addSegmentRule"
                :icon="CirclePlus" v-preReClick>添加分段规则</el-button>
            </div>
          </div>
        </div>
        <div v-show="drawerRef?.getDrawerConRef('drawerFormRef')?.formInline?.desensitiveRuleCode == 'CHARREPLACE'">
          <div>{{ '请配置分段的替换方式' + `(${charReplaceRuleDetail.ruleDetails?.length}/10)` }}</div>
          <el-radio-group v-model="charReplaceRuleDetail.replaceType">
            <el-radio :value="1">从左往右</el-radio>
            <el-radio :value="2">从右往左</el-radio>
          </el-radio-group>
          <div class="seg-main">
            <div class="row-per" v-for="(item, index) in charReplaceRuleDetail.ruleDetails">
              <el-select v-model="item.digitType" :style="{ width: item.digitType == 2 ? '220px' : '130px' }">
                <el-option v-for="item in digitTypeList" :label="item.label" :value="item.value"
                  :key="item.value"></el-option>
              </el-select>
              <el-input v-show="item.digitType != 2" style="width:86px;margin-left: 4px;" v-model="item.digit"
                :maxlength="6" :min="1" @input="(val) => inputEventDigitChange(val, item)" placeholder="请输入"></el-input>
              <el-select v-model="item.ruleType"
                :style="{ width: item.ruleType == 1 ? '244px' : '130px', 'margin-left': '4px' }">
                <el-option v-for="item in charReplaceRuleTypeList" :label="item.label" :value="item.value"
                  :key="item.value"></el-option>
              </el-select>
              <el-input v-model="item.fixedValue" v-show="item.ruleType == 2" style="width:110px;margin-left: 4px;"
                :maxlength="50" placeholder="请输入"></el-input>
              <div class="title_tool" @click="deleteCharReplaceSegmentRule(item, index)">
                <el-icon :size="20" color="#b2b2b2">
                  <Delete />
                </el-icon>
              </div>
            </div>
            <div class="row-add-btn">
              <el-button :disabled="charReplaceRuleDetail.ruleDetails?.length > 9" link
                @click="addCharReplaceSegmentRule" :icon="CirclePlus" v-preReClick>添加分段规则</el-button>
            </div>
          </div>
        </div>
        <div v-show="drawerRef?.getDrawerConRef('drawerFormRef')?.formInline?.desensitiveRuleCode == 'RANGEREPLACE'">
          <div class="mb8">{{ '请配置区间替换规则' + `(${rangeReplaceRuleDetails?.length}/10)` }}</div>
          <div class="seg-main">
            <div class="row-per" v-for="(item, index) in rangeReplaceRuleDetails">
              <el-input style="width:16.5%" v-model="item.lowValue" :maxlength="6"
                @input="(val) => inputEventDigitChange(val, item, 'lowValue')" placeholder="请输入"></el-input>
              <el-select v-model="item.lowOperator" style="width: 16.5%;margin-left: 4px;">
                <el-option v-for="item in lowerOperatorList" :label="item.label" :value="item.value"
                  :key="item.value"></el-option>
              </el-select>
              <el-input style="width: 16.5%;margin-left: 4px;" :disabled="true" v-model="item.fieldChName"></el-input>
              <el-select v-model="item.upperOperator" style="width: 16.5%;margin-left: 4px;">
                <el-option v-for="item in lowerOperatorList" :label="item.label" :value="item.value"
                  :key="item.value"></el-option>
              </el-select>
              <el-input style="width:16.5%;margin-left: 4px;" v-model="item.upperValue" :maxlength="6"
                @input="(val) => inputEventDigitChange(val, item, 'upperValue')" placeholder="请输入"></el-input>
              <el-input v-model="item.replaceValue" style="width:16.5%;margin-left: 4px;" :maxlength="50"
                placeholder="替换值"></el-input>
              <div class="title_tool" @click="deleteRangeReplaceSegmentRule(item, index)">
                <el-icon :size="20" color="#b2b2b2">
                  <Delete />
                </el-icon>
              </div>
            </div>
            <div class="row-add-btn">
              <el-button :disabled="charReplaceRuleDetail.ruleDetails?.length > 9" link
                @click="addRangeReplaceSegmentRule" :icon="CirclePlus" v-preReClick>添加分段规则</el-button>
            </div>
          </div>
        </div>
      </template>
    </Drawer>

  </div>
</template>

<style lang="scss" scoped>
.row-add-btn {
  .el-button--default {
    padding: 4px 0px;
  }

  :deep(.el-icon) {
    width: 16px;
    height: 16px;

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

.seg-main {
  .row-add-btn {
    margin-top: -6px;
  }
}

.row-per {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  position: relative;

  .title_tool {
    margin-left: 4px;
    // position: absolute;
    // right: 4px;
    cursor: pointer;

    :deep(.el-icon) {
      --color: #FB2323 !important;

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

:deep(.mt8.drawer_panel) {
  margin-top: 8px;
}

.mb8 {
  margin-bottom: 8px;
}

:deep(.el-form-item.ka-checkbox-input) {
  .el-input {
    min-width: 50px !important;
  }
}

:deep(.el-form) {
  .lmt12 {
    // margin-top: -4px; 验证信息会被遮挡

    .input_panel {
      flex: 0 !important;
    }
  }
}
</style>