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

<script lang="ts" setup name="sensitiveIdentifyConfig">
import {
  getExecSensitiveTable,
  getExecSensitiveFieldTable,
  getExecSensitiveFieldColumnListByCondition,
  getDataLabelList,
  getStatisticsNum,
  getParamsList,
  updateSensitiveDataTaskFieldLabel,
  batchUpdateSensitiveDataTaskFieldStatus,
  confirmTaskStatus,
} 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";
import useUserStore from "@/store/modules/user";

const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance() as any;
const userStore = useUserStore();
const fullPath = route.fullPath;
const isLook = ref(route.query.isLook == '1');

const fullScreenLoading = ref(false);

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 = '';
    }
    pageInfo.value.curr = 1;
    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;
  }
  if (checkTableSave()) {
    ElMessageBox.confirm(
      '存在未保存的数据，确定放弃修改吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(() => {
      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);
        }
      })
    })
  } else {
    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 dataSource = ref(null);

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, index) => {
        d.value = `${d.databaseName}-ds`; //解决文件名称和文件的sheet名称一样的树形选中问题
        d.label = d.databaseChName;
        if (index == 0) {
          dataSource.value = d.dataSource;
        }
        d.tableList = d.tableList?.map(t => {
          t.value = `${d.databaseName}-${t.tableName}`;
          t.label = dataSource.value == 1 ? (t.tableChName || t.tableName) : 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 labelTypeDataList: 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 = pageInfo.value.confirmStatus || [];
  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 = (info?: {
  filterLabel?: Boolean,
  filterType?: Boolean,
  filterStatus?: Boolean,
  setLable?: Boolean,
  setType?: Boolean,
  setStatus?: Boolean
}) => {
  getExecSensitiveFieldColumnListByCondition({
    pageSize: -1,
    taskExecGuid: pageInfo.value.taskExecGuid,
    databaseName: pageInfo.value.databaseName,
    tableName: pageInfo.value.tableName,
    labelGuids: !info?.filterLabel ? [] : pageInfo.value.labelGuids,
    labelTypeCodes: !info?.filterType ? [] : pageInfo.value.labelTypeCodes,
    confirmStatus: !info?.filterStatus ? [] : pageInfo.value.confirmStatus
  }).then((res: any) => {
    if (res?.code == proxy.$passCode) {
      let data = res.data || {};
      (info?.setLable !== false || !pageInfo.value.labelGuids?.length) && (labelList.value = data['标签']?.map(d => {
        d.guid = d.labelGuid;
        if (!d.labelGuid && !d.labelName) {
          d.guid = `${d.labelGuid}`;
          d.labelName = '--';
        }
        return d;
      }) || []);
      (info?.setType !== false || !pageInfo.value.labelTypeCodes?.length) && (labelTypeDataList.value = data['标签类型']?.map(d => {
        d.guid = d.labelTypeCode;
        if (!d.labelTypeCode) {
          d.guid = `${d.labelTypeCode}`;
          d.labelTypeName = '--';
        }
        return d;
      }) || [])
      (info?.setStatus !== false || !pageInfo.value.confirmStatus?.length) && (confirmStatusList.value = data['确认状态']?.map(d => {
        d.guid = d.confirmStatus;
        d.label = d.confirmStatus == 'Y' ? '已确认' : '未确认';
        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();
      getSensitiveFieldLabelData({
        filterLabel: true,
        filterStatus: true,
        filterType: true,
        setLable: false,
        setStatus: true,
        setType: true
      });
    })
  } else {
    pageInfo.value.labelGuids = scope.row.selectedData || [];
    pageInfo.value.curr = 1;
    getSensitiveTableFieldData();
    getSensitiveFieldLabelData({
      filterLabel: true,
      filterStatus: true,
      filterType: true,
      setLable: false,
      setStatus: true,
      setType: true
    });
  }
}

const popoverLabelTypeListInfo = computed(() => {
  return {
    type: 'checkbox-list-btns',
    data: labelTypeDataList.value,
    placeholder: '请输入关键字搜索',
    scope: {
      row: {}
    },
    placement: 'right-start',
    props: {
      value: 'guid',
      label: 'labelTypeName'
    },
    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();
      getSensitiveFieldLabelData({
        filterLabel: true,
        filterStatus: true,
        filterType: true,
        setLable: true,
        setStatus: true,
        setType: false
      });
    })
  } else {
    pageInfo.value.labelTypeCodes = scope.row.selectedData || [];
    pageInfo.value.curr = 1;
    getSensitiveTableFieldData();
    getSensitiveFieldLabelData({
      filterLabel: true,
      filterStatus: true,
      filterType: true,
      setLable: true,
      setStatus: true,
      setType: false
    });
  }
}

const confirmStatusList: any = ref([]);

const popoverStatusListInfo = computed(() => {
  return {
    type: 'checkbox-list-btns',
    data: confirmStatusList.value || [{
      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();
      getSensitiveFieldLabelData({
        filterLabel: true,
        filterStatus: true,
        filterType: true,
        setLable: true,
        setStatus: false,
        setType: true
      });
    })
  } else {
    pageInfo.value.confirmStatus = scope.row.selectedData || [];
    pageInfo.value.curr = 1;
    getSensitiveTableFieldData();
    getSensitiveFieldLabelData({
      filterLabel: true,
      filterStatus: true,
      filterType: true,
      setLable: true,
      setStatus: false,
      setType: true
    });
  }
}

/** 标签选择的值改变，标签类型跟着变化。 */
const handleSelectChange = (val, scope) => {
  //暂时不处理，因为未保存会出现清空的场景，需要先存下之前的值。
  let label = allDataLabelList.value.find(label => label.guid == val);
  if (label) {
    scope.row.labelTypeCode = label.labelTypeCode;
    scope.row.labelTypeName = label.labelTypeName;
    scope.row.labelName = label.labelName;
  } else {
    scope.row.labelTypeCode = null;
    scope.row.labelTypeName = null;
    scope.row.labelName = null;
  }
}

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

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({
        filterLabel: true,
        filterStatus: true,
        filterType: true
      });
      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();
  }
}

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

const pageConfirm = () => {
  fullScreenLoading.value = true;
  confirmTaskStatus(route.query.execGuid).then((res: any) => {
    fullScreenLoading.value = false;
    if (res?.code == proxy.$passCode) {
      proxy.$ElMessage.success('确认成功');
      userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
      router.push({
        name: 'sensitiveIdentify'
      });
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
}

const cntLabelMap = ref({
  '01': 'directIdentifierNum',
  '02': 'standardIdentifierNum',
  '03': 'sensitiveNum',
  '04': 'nonSensitiveNum'
})

</script>

<template>
  <div class="container_wrap full flex" v-loading="fullScreenLoading">
    <div class="aside_wrap" :style="{ height: isLook ? '100%' : 'calc(100% - 40px)' }">
      <div class="aside_title">数据表列表</div>
      <Tree ref="treeRef" :treeInfo="treeInfo" @nodeClick="nodeClick" />
    </div>
    <div class="main_wrap" :style="{ height: isLook ? '100%' : 'calc(100% - 40px)' }">
      <div class="table_tool_wrap">
        <div class="cnt-desc">{{'表总数：' + changeNum(cntSumInfo.tableNum || 0, 0) +
          '张 字段总数：'
          + changeNum(cntSumInfo.fieldNum || 0, 0) + '个 敏感表总数：' +
          changeNum(cntSumInfo.sensitiveTableNum || 0, 0) + '张 敏感字段总数：' + changeNum(cntSumInfo.sensitiveFieldNum || 0,
            0) +
          '个，其中' + labelTypeList?.map(l => `${l.label}${changeNum(cntSumInfo[cntLabelMap[l.value]] || 0,
            0)}个`).join('，') + '，非敏感' + changeNum(cntSumInfo['nonSensitiveNum'] || 0, 0) + '个'
        }}</div>
        <div class="tools_btns" v-if="!isLook">
          <el-button type="primary" @click="batchConfirm">批量确认</el-button>
        </div>
      </div>
      <div class="table_panel_wrap" :style="{ height: isLook ? 'calc(100% - 54px)' : 'calc(100% - 91px)' }">
        <!-- 右侧表字段标签匹配管理表格 -->
        <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>
            <template #default="scope">
              <span>{{
                pageInfo.curr !== undefined
                  ? (pageInfo.curr - 1) * pageInfo.limit + scope.$index + 1
                  : scope.$index + 1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="字段中文名" prop="fieldChName" width="160" align="left" show-overflow-tooltip>
            <template #default="scope">
              <span>{{ scope.row.fieldChName || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="字段英文名" prop="fieldName" width="150" 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-show="labelList.length" :popoverInfo="popoverLabelListInfo"
                @popverBtnClick="handleLabelPopoverClick" />
            </template>
            <template #default="scope">
              <el-select-v2 v-if="scope.row['isEdit']" v-model="scope.row['labelGuid']" filterable
                popper-class="el-select-v2-popper" :options="allDataLabelList" placeholder="请选择" clearable
                :props="{ value: 'guid', label: 'labelName' }" @change="(val) => handleSelectChange(val, scope)">
                <template #default="{ item }">
                  <ellipsis-tooltip :content="item.labelName ?? ''" class-name="w100f"
                    :refName="'tooltipOver' + item.guid"></ellipsis-tooltip>
                </template>
              </el-select-v2>
              <span v-else>{{ scope.row["labelName"] || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="标签类型" prop="labelTypeName" class-name="filter-cell" width="130" align="left"
            show-overflow-tooltip>
            <template #header>
              <span>标签类型</span>
              <BtnPopover v-show="labelTypeDataList.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>
             <template #default="scope">
              <span>{{ scope.row.tableChName || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="dataSource == 1" label="所属表英文名" prop="tableName" width="160" 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 v-show="confirmStatusList.length" :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="90px" 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 class="bottom_tool_wrap">
      <el-button @click="cancel" v-preReClick>取消</el-button>
      <el-button type="primary" @click="pageConfirm" v-preReClick>确认</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container_wrap {
  flex-wrap: wrap;

  .aside_wrap {
    width: 200px;
    height: calc(100% - 40px);
  }

  .table_tool_wrap {
    display: flex;
    flex-direction: column;
    min-height: 25px;

    .cnt-desc {
      line-height: 24px;
      white-space: break-spaces;
      margin-top: 4px;
    }
  }

  .tools_btns {
    padding-top: 0px;
  }

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

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

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

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