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

<script lang="ts" setup name="sensitiveIdentifyConfig">
import {
  getExecSensitiveTable,
  getExecSensitiveFieldTable,
  getExecSensitiveFieldLabel,
  getDataLabelList,
  getStatisticsNum,
  getParamsList,
  updateSensitiveDataTaskFieldLabel,
  batchUpdateSensitiveDataTaskFieldStatus,
} from '@/api/modules/dataAnonymization';
import PageNav from "@/components/PageNav/index.vue";
import { commonPageConfig } from '@/components/PageNav/index';
import { ElMessageBox } from 'element-plus';
import { changeNum } from "@/utils/common";
import BtnPopover from "@/components/Popover/index.vue";

const route = useRoute();
const { proxy } = getCurrentInstance() as any;
const isLook = ref(!!route.query.isLook);

const treeInfo = ref({
  id: "data-list-tree",
  filter: true,
  queryValue: "",
  queryPlaceholder: "请输入关键字搜索",
  props: {
    label: "label",
    value: "value",
    isLeaf: "isLeaf",
    children: 'tableList'
  },
  nodeKey: 'value',
  expandedKey: <any>[],
  currentNodeKey: '',
  data: [],
  expandOnNodeClick: false,
  loading: false,
  currentObj: <any>{}
});

const treeRef = ref();

const nodeClick = (data, node) => {
  let exec = () => {
    pageInfo.value.labelGuids = [];
    pageInfo.value.labelTypeCodes = [];
    pageInfo.value.confirmStatus = '';
    treeInfo.value.currentNodeKey = data.value;
    treeInfo.value.currentObj = data;
    if (data.parent) {
      pageInfo.value.databaseName = data.parent;
      pageInfo.value.tableName = data.tableName;
    } else {
      pageInfo.value.databaseName = data.databaseName;
      pageInfo.value.tableName = '';
    }
    getSensitiveTableFieldData();
    getCntSumInfo();
    getSensitiveFieldLabelData();
  }
  if (checkTableSave()) {
    ElMessageBox.confirm(
      '存在未保存的数据，切换后会丢失，是否确定切换',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(() => {
      exec();
    }).catch(() => {
      treeRef.value.setCurrentKey(treeInfo.value.currentObj.value);
    })
  } else {
    exec();
  }
}

const batchConfirm = () => {
  if (!selectTableFieldRows.value.length) {
    proxy.$ElMessage.error('请先勾选待确认的字段');
    return;
  }
  batchUpdateSensitiveDataTaskFieldStatus(selectTableFieldRows.value.map(s => s.guid)).then((res: any) => {
    if (res?.code == proxy.$passCode) {
      proxy.$ElMessage.success('批量确认字段成功');
      getSensitiveTableFieldData();
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
}

/** 数量统计信息 */
const cntSumInfo: any = ref({});

const getCntSumInfo = () => {
  getStatisticsNum({
    execGuid: route.query.execGuid,
    databaseName: pageInfo.value.databaseName,
    tableName: pageInfo.value.tableName
  }).then((res: any) => {
    if (res?.code == proxy.$passCode) {
      cntSumInfo.value = res.data || {};
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
}

const getExecSensitiveTableData = () => {
  treeInfo.value.loading = true;
  getExecSensitiveTable(route.query.execGuid).then((res: any) => {
    treeInfo.value.loading = false;
    if (res?.code == proxy.$passCode) {
      treeInfo.value.data = res.data?.map(d => {
        d.value = d.databaseName;
        d.label = d.databaseChName;
        d.tableList = d.tableList?.map(t => {
          t.value = t.tableName;
          t.label = t.tableChName;
          t.parent = d.databaseName;
          return t;
        }) || []
        return d;
      }) || [];
      let treeData: any = treeInfo.value.data || [];
      if (treeData.length) {
        treeInfo.value.expandedKey = [treeData[0].value];
        treeInfo.value.currentNodeKey = treeData[0]?.value;
        treeInfo.value.currentObj = treeData[0];
        treeData[0].tableList?.[0] && nodeClick(treeData[0], {});
      }
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
}

/** 所有的标签列表供编辑下拉显示 */
const allDataLabelList: any = ref([]);

onBeforeMount(() => {
  getExecSensitiveTableData();
  getDataLabelList({
    pageSize: -1,
    bizState: 'Y'
  }).then((res: any) => {
    if (res?.code == proxy.$passCode) {
      allDataLabelList.value = res.data?.records || [];
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
  getParamsList({
    dictType: "标签类型",
  }).then((res: any) => {
    if (res?.code == proxy.$passCode) {
      labelTypeList.value = res.data?.map(d => {
        d.guid = d.value;
        return d;
      }) || [];
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  });
})

/** ------------------------- 敏感数据识别字段列表操作 --------------------------------- */

const labelList = ref([]);

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

/** 分页设置 */
const pageInfo = ref({
  ...commonPageConfig,
  taskExecGuid: route.query.execGuid,
  databaseName: '',
  tableName: '',
  rows: 0,
  labelGuids: [], //列头筛选
  labelTypeCodes: [],
  confirmStatus: ''
});

/** 敏感数据 */
const sensitiveTableData: any = ref([]);

const sensitiveTableDataLoading = ref(false);

const getSensitiveTableFieldData = () => {
  sensitiveTableDataLoading.value = true;
  let confirmStatus: any = [];
  getExecSensitiveFieldTable({
    pageIndex: pageInfo.value.curr,
    pageSize: pageInfo.value.limit,
    taskExecGuid: pageInfo.value.taskExecGuid,
    databaseName: pageInfo.value.databaseName,
    tableName: pageInfo.value.tableName,
    labelGuids: pageInfo.value.labelGuids,
    labelTypeCodes: pageInfo.value.labelTypeCodes,
    confirmStatus: confirmStatus?.length > 1 ? null : confirmStatus[0]
  }).then((res: any) => {
    sensitiveTableDataLoading.value = false;
    if (res?.code == proxy.$passCode) {
      const data = res.data || {};
      sensitiveTableData.value = data.records || [];
      pageInfo.value.limit = data.pageSize
      pageInfo.value.curr = data.pageIndex
      pageInfo.value.rows = data.totalRows
    } else {
      proxy.$ElMessage({
        type: 'error',
        message: res.msg,
      })
    }
  })
}

/** 获取当前选中的左侧库表下对应的数据标签数组，做列头筛选时使用。 */
const getSensitiveFieldLabelData = () => {
  getExecSensitiveFieldLabel({
    pageSize: -1,
    taskExecGuid: pageInfo.value.taskExecGuid,
    databaseName: pageInfo.value.databaseName,
    tableName: pageInfo.value.tableName
  }).then((res: any) => {
    if (res?.code == proxy.$passCode) {
      labelList.value = res.data?.map(d => {
        d.guid = d.labelGuid;
        return d;
      }) || [];
    } else {
      proxy.$ElMessage({
        type: 'error',
        message: res.msg,
      })
    }
  })
}

const popoverLabelListInfo = computed(() => {
  return {
    type: 'checkbox-list-btns',
    data: labelList.value,
    placeholder: '请输入关键字搜索',
    scope: {
      row: {}
    },
    placement: 'right-start',
    props: {
      value: 'guid',
      label: 'labelName'
    },
    checked: pageInfo.value.labelGuids,
    btn: {
      value: 'filter'
    }
  }
});

const handleLabelPopoverClick = (scope) => {
  if (checkTableSave()) {
    ElMessageBox.confirm(
      '存在未保存的数据，切换后会丢失，是否确定切换',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(() => {
      pageInfo.value.labelGuids = scope.row.selectedData || [];
      pageInfo.value.curr = 1;
      getSensitiveTableFieldData();
    })
  } else {
    pageInfo.value.labelGuids = scope.row.selectedData || [];
    pageInfo.value.curr = 1;
    getSensitiveTableFieldData();
  }
}

const popoverLabelTypeListInfo = computed(() => {
  return {
    type: 'checkbox-list-btns',
    data: labelTypeList.value,
    placeholder: '请输入关键字搜索',
    scope: {
      row: {}
    },
    placement: 'right-start',
    props: {
      value: 'guid',
      label: 'label'
    },
    checked: pageInfo.value.labelTypeCodes,
    btn: {
      value: 'filter'
    }
  }
});

const handleLabelTypePopoverClick = (scope) => {
  if (checkTableSave()) {
    ElMessageBox.confirm(
      '存在未保存的数据，切换后会丢失，是否确定切换',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(() => {
      pageInfo.value.labelTypeCodes = scope.row.selectedData || [];
      pageInfo.value.curr = 1;
      getSensitiveTableFieldData();
    })
  } else {
    pageInfo.value.labelTypeCodes = scope.row.selectedData || [];
    pageInfo.value.curr = 1;
    getSensitiveTableFieldData();
  }
}

const popoverStatusListInfo = computed(() => {
  return {
    type: 'checkbox-list-btns',
    data: [{
      guid: 'N',
      label: '待确认'
    }, {
      guid: 'Y',
      label: '已确认'
    }],
    placeholder: '请输入关键字搜索',
    scope: {
      row: {}
    },
    placement: 'right-start',
    props: {
      value: 'guid',
      label: 'label'
    },
    checked: pageInfo.value.confirmStatus,
    btn: {
      value: 'filter'
    }
  }
});

const handleStatusPopoverClick = (scope) => {
  if (checkTableSave()) {
    ElMessageBox.confirm(
      '存在未保存的数据，切换后会丢失，是否确定切换',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(() => {
      pageInfo.value.confirmStatus = scope.row.selectedData || [];
      pageInfo.value.curr = 1;
      getSensitiveTableFieldData();
    })
  } else {
    pageInfo.value.confirmStatus = scope.row.selectedData || [];
    pageInfo.value.curr = 1;
    getSensitiveTableFieldData();
  }
}

/** 标签选择的值改变，标签类型跟着变化。 */
const handleSelectChange = (val) => {
  //暂时不处理，因为未保存会出现清空的场景，需要先存下之前的值。
}

const sensitiveTableSelectable = (row, index) => {
  return row.confirmStatus == 'N';
}

const selectTableFieldRows: any = ref([]);

/** 勾选字段标准选中变化。 */
const selectionDataChange = (val) => {
  selectTableFieldRows.value = val;
};

const handleFieldClickEdit = (scope) => {
  scope.row.isEdit = true;
}

const handleFieldClickSave = (scope) => {
  let labelName = '';
  let labelTypeCode = '';
  if (scope.row.labelGuid) {
    let label = allDataLabelList.value.find(label => label.guid == scope.row.labelGuid);
    if (label) {
      labelName = label.labelName;
      labelTypeCode = label.labelTypeCode;
    }
  }
  sensitiveTableDataLoading.value = true;
  updateSensitiveDataTaskFieldLabel([{
    guid: scope.row.guid,
    labelGuid: scope.row.labelGuid,
    labelName: labelName,
    labelTypeCode: labelTypeCode
  }]).then((res: any) => {
    sensitiveTableDataLoading.value = false;
    if (res?.code == proxy.$passCode) {
      getSensitiveTableFieldData();
      getSensitiveFieldLabelData();
      getCntSumInfo();
      proxy.$ElMessage.success('标签修改成功');
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  });
}

const checkTableSave = () => {
  return sensitiveTableData.value.some(s => s.isEdit == true);
}

const pageChange = (info) => {
  const toChange = checkTableSave()
  const changeCont = () => {
    pageInfo.value.curr = Number(info.curr)
    pageInfo.value.limit = Number(info.limit)
    getSensitiveTableFieldData();
  }
  if (toChange) {
    ElMessageBox.confirm(
      '存在未保存的数据，切换后会丢失，是否确定切换',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(() => {
      changeCont();
    })
  } else {
    changeCont();
  }
}

</script>

<template>
  <div class="container_wrap full flex">
    <div class="aside_wrap">
      <div class="aside_title">数据表列表</div>
      <Tree ref="treeRef" :treeInfo="treeInfo" @nodeClick="nodeClick" />
    </div>
    <div class="main_wrap">
      <div class="table_tool_wrap">
        <div class="tools_btns">
          <el-button v-if="!isLook" type="primary" @click="batchConfirm">批量确认</el-button>
          <div class="cnt-desc">{{ '表总数：' + changeNum(cntSumInfo.tableNum || 0, 0) + '张 敏感表总数：' +
            changeNum(cntSumInfo.sensitiveTableNum || 0, 0) + '张 字段总数：'
            + changeNum(cntSumInfo.fieldNum || 0, 0) + '个 敏感字段总数：' + changeNum(cntSumInfo.sensitiveFieldNum || 0, 0) +
            '个，其中直接标识：' +
            changeNum(cntSumInfo.directIdentifierNum || 0, 0) + '个 准标识：' + changeNum(cntSumInfo.standardIdentifierNum ||
              0, 0) + '个 敏感：' +
            changeNum(cntSumInfo.sensitiveNum || 0, 0) + '个 非敏感：' + changeNum(cntSumInfo.nonSensitiveNum || 0, 0) + '个'
          }}</div>
        </div>
      </div>
      <div class="table_panel_wrap">
        <!-- 右侧表字段标签匹配管理表格 -->
        <el-table ref="sensitiveTableRef" :data="sensitiveTableData" v-loading="sensitiveTableDataLoading"
          :highlight-current-row="true" stripe border height="100%" row-key="guid"
          @selection-change="selectionDataChange" tooltip-effect="light" :style="{
            width: '100%',
            'max-height': 'calc(100% - 16px)',
            display: 'inline-block',
          }">
          <el-table-column type="selection" v-if="!isLook" :selectable="sensitiveTableSelectable" :width="32" align="center" />
          <el-table-column label="序号" type="index" width="56px" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="字段中文名" prop="fieldChName" width="140" align="left" show-overflow-tooltip>
            <template #default="scope">
              <span>{{ scope.row.fieldChName || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="字段英文名" prop="fieldName" width="140" align="left" show-overflow-tooltip>
            <template #default="scope">
              <span>{{ scope.row.fieldName || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="标签" prop="labelGuid" class-name="filter-cell" width="140" align="left"
            show-overflow-tooltip>
            <template #header>
              <span>标签</span>
              <BtnPopover v-if="labelList.length" :popoverInfo="popoverLabelListInfo"
                @popverBtnClick="handleLabelPopoverClick" />
            </template>
            <template #default="scope">
              <el-select-v2 v-if="scope.row['isEdit']" v-model="scope.row['labelGuid']" filterable
                :options="allDataLabelList" placeholder="请选择" clearable :props="{ value: 'guid', label: 'labelName' }"
                @change="handleSelectChange" />
              <span v-else>{{ scope.row["labelName"] || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="标签类型" prop="labelTypeName" class-name="filter-cell" width="120" align="left"
            show-overflow-tooltip>
            <template #header>
              <span>标签类型</span>
              <BtnPopover v-if="labelTypeList.length" :popoverInfo="popoverLabelTypeListInfo"
                @popverBtnClick="handleLabelTypePopoverClick" />
            </template>
            <template #default="scope">
              <span>{{ scope.row.labelTypeName || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="所属表名" prop="tableChName" width="140" align="left" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="确认状态" prop="confirmStatus" class-name="filter-cell" width="120" align="center"
            show-overflow-tooltip>
            <template #header>
              <span>确认状态</span>
              <BtnPopover :popoverInfo="popoverStatusListInfo" @popverBtnClick="handleStatusPopoverClick" />
            </template>
            <template #default="scope">
              <el-tag v-if="scope.row.confirmStatus != null"
                :type="scope.row.confirmStatus == 'Y' ? 'success' : 'warning'">{{
                  scope.row.confirmStatus == 'Y' ? '已确认' : '未确认'
                }}</el-tag>
              <span v-else>{{ '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="!isLook" label="操作" width="100px" align="left" fixed="right" show-overflow-tooltip>
            <template #default="scope">
              <span class="text_btn" v-if="!scope.row['isEdit']" @click="handleFieldClickEdit(scope)"
                v-preReClick>编辑</span>
              <span class="text_btn" v-else @click="handleFieldClickSave(scope)" v-preReClick>保存</span>
            </template>
          </el-table-column>
        </el-table>
        <PageNav :pageInfo="pageInfo" @pageChange="pageChange" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container_wrap {
  .aside_wrap {
    width: 200px;
  }

  .table_tool_wrap {
    display: flex;
  }

  .table_panel_wrap {
    height: calc(100% - 70px);
  }
}

.tree_panel {
  height: 100%;
  padding-top: 0;

  :deep(.el-tree) {
    margin: 0;
    height: calc(100% - 68px);
    overflow: hidden auto;
  }
}

:deep(.el-table) {
  & td.el-table__cell {
    .cell {
      padding: 0px 10px;
    }

    padding: 2px 0px;
    height: 36px;
  }
}

.tools_btns {
  display: flex;
  align-items: center;

  .el-button {
    margin-right: 8px;
  }
}

:deep(.filter-cell) {
  .cell {
    position: relative;

    .el-icon.filter-icon {
      position: absolute;
      right: 6px;
      top: 2px;
      width: 18px;
      height: 18px;

      svg {
        width: 18px;
        height: 18px;
      }
    }
  }
}
</style>