<template>
  <div class="comp-data-overview">
    <div class="content">
      <FileTree
        ref="FileTreeRef"
        :api="getSimulationNodeTreeApi"
        :templateId="currentDimension"
        :params="{
          dimensionTemplateId: currentDimension,
        }"
        :defaultExpandedKeys="defaultExpandedKeys"
        :hideTree="hideTree"
        @choseNode="choseNodeFun"
        @search="searchShow = true"
        @viewTypeChange="viewTypeChangeFun"
      >
        <template #options>
          <div class="top-options">
            <div class="text">显示维度：</div>
            <div class="select">
              <el-select placeholder="请选择" v-model="currentDimension">
                <el-option
                  v-for="item in templateList"
                  :key="item.id"
                  :label="item.templateName"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="text">
              <el-link type="primary" @click="configurationShow = true">维度管理</el-link>
            </div>
          </div>
        </template>
        <template #table>
          <div class="table-content">
            <div class="table">
              <BaseTable
                v-if="tableName"
                ref="BaseTableRef"
                :tableName="tableName"
                :api="dataOverViewListSimulationNodeFilesApi"
                :params="tableParams"
                showCheckbox
                @checkbox-all="checkboxChangeFun"
                @checkbox-change="checkboxChangeFun"
                @cell-click="cellClickFun"
                :actionList="actionList"
                :hidePagination="isSearching"
                fullHeight
                :row-config="{
                  isCurrent: true,
                }"
              >
                <template #leftOptions>
                  <div class="options">
                    <el-select
                      v-if="mergeDataList.length > 1"
                      v-model="mergeDataName"
                      value-key="relatedResourceUuid"
                      class="merge-data-list"
                      clearable
                      @change="changeMergeDataFun"
                    >
                      <el-option
                        v-for="(item, index) in mergeDataList"
                        :key="index"
                        :label="item.totalName"
                        :value="item"
                      />
                    </el-select>
                    <template v-if="!hideAddBtn && !hideOptions">
                      <el-dropdown trigger="click">
                        <el-button :icon="CirclePlus" type="primary" class="option-btn">
                          新增<el-icon class="el-icon--right"><arrow-down /></el-icon>
                        </el-button>
                        <template #dropdown>
                          <el-dropdown-menu>
                            <el-dropdown-item @click="addDiaFun(NODE_TYPE.PROJECT)">
                              新增项目
                            </el-dropdown-item>
                            <el-dropdown-item
                              v-if="currentData?.relatedResourceUuidOwnType === NODE_TYPE.PROJECT"
                              @click="addDiaFun(NODE_TYPE.PHASE)"
                            >
                              新增阶段
                            </el-dropdown-item>
                            <el-dropdown-item
                              v-if="
                                isCategoryNodeType(currentData?.relatedResourceUuidOwnType) ||
                                NODE_TYPE.PHASE === currentData?.relatedResourceUuidOwnType ||
                                (!currentData?.relatedResourceUuidOwnType && currentData?.id !== 0)
                              "
                              @click="addDiaFun(NODE_TYPE.CATEGORY)"
                            >
                              新增分类
                            </el-dropdown-item>
                            <el-dropdown-item
                              v-if="isCategoryNodeType(currentData?.relatedResourceUuidOwnType)"
                              @click="addDiaFun(NODE_TYPE.TASK)"
                            >
                              新增任务
                            </el-dropdown-item>
                          </el-dropdown-menu>
                        </template>
                      </el-dropdown>
                      <el-dropdown v-if="currentData && currentData?.id !== 0" trigger="click">
                        <el-button :icon="Upload" type="primary" class="option-btn">
                          上传<el-icon class="el-icon--right"><arrow-down /></el-icon>
                        </el-button>
                        <template #dropdown>
                          <el-dropdown-menu>
                            <el-dropdown-item @click="openAddDirFun">新建文件夹</el-dropdown-item>
                            <el-dropdown-item @click="addFileVisible = true">
                              上传文件
                            </el-dropdown-item>
                          </el-dropdown-menu>
                        </template>
                      </el-dropdown>
                      <el-button
                        v-if="!tableParams.jobMode"
                        :icon="Edit"
                        type="primary"
                        :disabled="chosenData.length !== 1"
                        @click="editFun('')"
                      >
                        编辑
                      </el-button>
                      <el-button
                        :icon="Delete"
                        type="danger"
                        :disabled="chosenData.length === 0"
                        @click="batchDelFun"
                      >
                        删除
                      </el-button>
                    </template>
                    <el-button :icon="Refresh" @click="reloadNodeFun">刷新</el-button>
                    <span class="info-switch">
                      <el-switch
                        v-model="infoShow"
                        inline-prompt
                        active-text="详细信息"
                        inactive-text="详细信息"
                      />
                    </span>
                    <span class="info-switch">
                      <el-switch
                        v-model="emptyShow"
                        inline-prompt
                        active-text="过滤空文件夹"
                        inactive-text="过滤空文件夹"
                      />
                    </span>
                  </div>
                </template>
                <template #originalName="{ row }">
                  <div class="file-name">
                    <template v-if="row.dataType === 1 && !tableParams.jobMode">
                      <el-icon :size="16">
                        <MessageBox v-if="row.relatedResourceUuidOwnType === NODE_TYPE.PROJECT" />
                        <Share v-else-if="row.relatedResourceUuidOwnType === NODE_TYPE.PHASE" />
                        <Document v-else-if="row.relatedResourceUuidOwnType === NODE_TYPE.TASK" />
                        <Folder v-else />
                      </el-icon>
                      <span class="name link" @dblclick="goDetailFun(row)">
                        {{ row.originalName }}
                      </span>
                    </template>
                    <template v-else>
                      <el-icon :size="16">
                        <Document />
                      </el-icon>
                      <span class="name">{{ row.originalName }}</span>
                    </template>
                  </div>
                </template>
                <template #achieveStatus="{ row }">
                  <StatusDot
                    :status="getTaskAchieveStyleClass(row.achieveStatus)"
                    :title="TASK_CALCULATE_STATUS_OBJ[row.achieveStatus] || '未分析'"
                  />
                </template>
                <template #status="{ row }">
                  {{ RUN_STATUS.O[row.status] }}
                </template>
                <template #dataType="{ row }">
                  {{ DATA_TYPE.O[row.dataType] }}
                </template>
                <template #fileType="{ row }">
                  {{ DATA_SEARCH_FILE_TYPE.O[row.fileType] || '--' }}
                </template>
                <template #fileSize="{ row }">
                  {{ formatFileSize(row.fileSize) || '--' }}
                </template>
              </BaseTable>
            </div>
            <div v-if="infoShow" class="info">
              <FileInfo :data="fileData" />
            </div>
          </div>
        </template>
      </FileTree>
    </div>
    <Configuration
      v-model="configurationShow"
      :dimensionId="currentDimension"
      @confirm="reloadNodeFun"
      @update="updateAllTemplateFun"
    />
    <FileSearch
      v-model="searchShow"
      :data="currentData"
      :fileIds="tableParams.fileIds"
      @search="searchFileFun"
      @reset="resetSearchFileFun"
    />
    <DirDetail
      v-model="dirDetailShow"
      :id="editId"
      :data="editId ? editData : currentData"
      @submit="reloadNodeFun"
    />
    <FileDetail v-model="fileDetailShow" :id="editId" :data="editData" @submit="reloadNodeFun" />
    <PhaseInfoDia
      v-if="showNodeInfoDialog"
      v-model:showNodeInfoDialog="showNodeInfoDialog"
      :nodeLevel1Uuid="editId"
      dialogType="edit"
      @completeFun="reloadNodeFun"
    />
    <ProjectInfoDialog
      v-model="showProjectInfoDialog"
      :projectId="editId"
      :nodeLevel1List="[]"
      @completeFun="reloadFun"
    />
    <NodeDetailDialog
      v-model="modalVisible"
      :operationType="editId ? 'edit' : 'add'"
      :nodeType="nodeType"
      :detail="editId ? editData : null"
      :itemNumList="[4, 26, 8]"
      @confirm="editNodeFun"
    />
    <FilePreview v-model="previewVisible" :fileId="previewFileId" />
    <AddFile v-model="addFileVisible" :data="currentData" />
    <RunDetail
      v-if="runDetailVisible"
      :run-info="runDetailData"
      @close="runDetailVisible = false"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue';
import FileTree from '@/components/common/dataFileTree/index.vue';
import { getSimulationNodeTreeApi, getAllTemplateApi } from '@/api/data/dimensionTemplate';
import {
  addNodeForDataApi,
  addTaskForDataApi,
  editNodeForDataApi,
  getNodeDetailForDataApi,
  deleteNodeApi,
} from '@/api/project/node';
import { editTaskForDataApi } from '@/api/project/task';
import { getTaskDetailApi } from '@/api/project/task';
import { runDetailApi } from '@/api/project/run';
import {
  dataOverViewListSimulationNodeFilesApi,
  dataOverViewDeleteSimulationNodeFilesApi,
} from '@/api/data/dataOverView';
import BaseTable from '@/components/common/table/baseTable.vue';
import Configuration from './configuration.vue';
import FileSearch from './search.vue';
import FileInfo from './info.vue';
import DirDetail from './dirDetail.vue';
import FileDetail from './fileDetail.vue';
import PhaseInfoDia from '@/components/project/phaseInfoDialog.vue';
import NodeDetailDialog from '@/components/common/treeCaseTable/nodeDetailDialog.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import ProjectInfoDialog from '@/components/project/projectInfoDialog.vue';
import {
  CirclePlus,
  Upload,
  Edit,
  Refresh,
  Delete,
  Folder,
  Document,
  Share,
  MessageBox,
} from '@element-plus/icons-vue';
import { getTagMapList } from '@/utils/task';
import { NODE_TYPE } from '@/utils/enum/node';
import { useDict } from '@/utils/useDict';
import { formatFileSize } from '@/utils/file';
import { isCategoryNodeType } from '@/utils/node';
import FilePreview from '@/components/common/filePreview/index.vue';
import { downloadFileById } from '@/utils/file';
import { useRoute } from 'vue-router';
import AddFile from './addFile.vue';
import RunDetail from '@/components/task/runDetailPage.vue';
import StatusDot from '@/components/common/statusDot/index.vue';
import { TASK_CALCULATE_STATUS_OBJ } from '@/utils/enum/task';
import { getTaskAchieveStyleClass } from '@/components/common/statusDot/statusMap';
import emitter from '@/utils/eventBus';

interface Props {
  hideAddBtn?: boolean;
  hideTree?: boolean;
  defaultExpandedKeys?: any;
}

withDefaults(defineProps<Props>(), {
  hideAddBtn: false,
  hideTree: false,
  defaultExpandedKeys: [],
});

const route = useRoute();
const { DATA_TYPE, DATA_SEARCH_FILE_TYPE, RUN_STATUS } = useDict(
  'DATA_TYPE',
  'DATA_SEARCH_FILE_TYPE',
  'RUN_STATUS'
);
const currentDimension = ref('');
const templateList = ref<any>([]);
const configurationShow = ref(false);
const searchShow = ref(false);
const infoShow = ref(false);
const emptyShow = ref(false);
const showProjectInfoDialog = ref(false);
const showNodeInfoDialog = ref(false);
const dirDetailShow = ref(false);
const fileDetailShow = ref(false);
const modalVisible = ref(false);
const currentData = ref<any>('');
const FileTreeRef = ref();
const editId = ref('');
const editData = ref<any>({});
const chosenData = ref<any>([]);
const BaseTableRef = ref();
const fileData = ref<any>({});
const nodeType = ref<any>('');
const previewVisible = ref(false);
const previewFileId = ref<any>('');
const isSearching = ref(false);
const hideOptions = ref(route.path.indexOf('/yian') > -1); // TODO 兼容宜安不展示操作按钮，后续需要可配
const mergeDataList = ref<any>([]);
const mergeDataName = ref<any>('');
const addFileVisible = ref(false);
const runDetailVisible = ref(false);
const runDetailData = ref<any>({});
const tableName = ref('DATA_OVERVIEW');
const tableParams = ref<any>({
  dimensionTemplateId: currentDimension.value,
  filterEmptyData: false,
  fileId: '',
  fileIds: [],
  jobMode: false,
});

watch(
  () => currentDimension.value,
  (val: any) => {
    tableParams.value.dimensionTemplateId = val;
    reloadFun();
  }
);

watch(
  () => emptyShow.value,
  (val: any) => {
    tableParams.value.filterEmptyData = val;
  }
);

const actionList = ref([
  {
    title: '预览',
    type: 'primary',
    click: (row: any) => {
      previewFileId.value = row.id;
      previewVisible.value = true;
    },
    hide: (row: any) => {
      return row.dataType === 1;
    },
  },
  {
    title: '详情',
    type: 'primary',
    click: (row: any) => {
      const params = {
        runId: row.relatedResourceUuid,
      };
      runDetailApi(params).then((res: any) => {
        if (res.code === 200) {
          runDetailData.value = res.data;
          runDetailData.value.nodeType = NODE_TYPE.RUN;
          runDetailVisible.value = true;
        }
      });
    },
    hide: () => {
      return !tableParams.value.jobMode;
    },
  },
  {
    title: '编辑',
    type: 'primary',
    click: (row: any) => {
      editFun(row);
    },
    hide: () => {
      return tableParams.value.jobMode;
    },
  },
  {
    title: '下载',
    type: 'primary',
    click: (row: any) => {
      downloadFileById(row.id);
    },
    hide: (row: any) => {
      return row.dataType === 1;
    },
  },
  {
    title: '删除',
    type: 'danger',
    needConfirm: true,
    confirmTip: '删除后不可恢复，确认删除吗？',
    click: (row: any) => {
      delFun(row);
    },
    hide: (row: any) => {
      return row.relatedResourceUuidOwnType === NODE_TYPE.PHASE || hideOptions.value;
    },
  },
]);

onMounted(() => {
  emitter.on('UPLOAD_FINISHED', uploadFinishedFun);
  getAllTemplateFun();
});

onBeforeUnmount(() => {
  emitter.off('UPLOAD_FINISHED', uploadFinishedFun);
});

const uploadFinishedFun = (data: any) => {
  if (data.callbackFlag === '/data/overview') {
    reloadNodeFun();
  }
};

const getAllTemplateFun = () => {
  getAllTemplateApi({}).then((res: any) => {
    if (res.code === 200) {
      const listData = res.data.allDimensionTemplates || [];
      templateList.value = listData;
      currentDimension.value = listData[0]?.id || '';
    }
  });
};
// 配置的名称新增、修改、删除的时候，都要重新获取维度列表。active的维度id要保存下来
const updateAllTemplateFun = () => {
  const activeDimensionId = currentDimension.value;
  getAllTemplateApi({}).then((res: any) => {
    if (res.code === 200) {
      const listData = res.data.allDimensionTemplates || [];
      templateList.value = listData;
      // 如果当前维度还存在，则保持不变；如果不存在了，则切换到第一个维度
      const isExist = listData.find((item: any) => item.id === activeDimensionId);
      currentDimension.value = isExist ? activeDimensionId : listData[0]?.id || '';
    }
  });
};
const addDiaFun = (type: string) => {
  nodeType.value = type;
  editId.value = '';
  // 项目
  if (type === NODE_TYPE.PROJECT) {
    showProjectInfoDialog.value = true;
  }
  // 节点
  if (type === NODE_TYPE.PHASE) {
    if (!currentData.value || currentData.value.relatedResourceUuidOwnType !== NODE_TYPE.PROJECT) {
      ElMessage.warning('请在项目下创建阶段');
      return;
    }
    editId.value = currentData.value.relatedResourceUuid;
    showNodeInfoDialog.value = true;
  }
  // 分类（机台，工位，学科等）
  if (type === NODE_TYPE.CATEGORY) {
    if (
      !currentData.value ||
      !(
        isCategoryNodeType(currentData.value.relatedResourceUuidOwnType) ||
        NODE_TYPE.PHASE === currentData.value.relatedResourceUuidOwnType
      )
    ) {
      ElMessage.warning('请在节点或分类下创建分类');
      return;
    }
    modalVisible.value = true;
  }
  // 任务
  if (type === NODE_TYPE.TASK) {
    if (!currentData.value) {
      ElMessage.warning('请选择一个目录');
      return;
    }
    modalVisible.value = true;
  }
};

const editFun = (rowData?: any) => {
  const data = rowData || chosenData.value[0];
  if (!data) {
    return;
  }
  nodeType.value = data.relatedResourceUuidOwnType;
  // 项目
  if (data.relatedResourceUuidOwnType === NODE_TYPE.PROJECT) {
    editId.value = data.relatedResourceUuid;
    showProjectInfoDialog.value = true;
  }
  // 节点
  if (data.relatedResourceUuidOwnType === NODE_TYPE.PHASE) {
    editId.value = currentData.value.relatedResourceUuid;
    showNodeInfoDialog.value = true;
  }
  // 分类（机台，工位，学科等）
  if (isCategoryNodeType(data.relatedResourceUuidOwnType)) {
    editId.value = data.relatedResourceUuid;
    const params = {
      relatedResourceUuid: data.relatedResourceUuid,
    };
    getNodeDetailForDataApi(params).then((res: any) => {
      if (res.code === 200) {
        editData.value = res.data;
      }
      modalVisible.value = true;
    });
  }
  // 任务
  if ([NODE_TYPE.TASK].includes(data.relatedResourceUuidOwnType)) {
    editId.value = data.relatedResourceUuid;
    const params = {
      relatedResourceUuid: data.relatedResourceUuid,
    };
    getTaskDetailApi(params).then((res: any) => {
      if (res.code === 200) {
        if (res.data.beginTime && res.data.endTime) {
          res.data.planTime = [res.data.beginTime, res.data.endTime];
        }
        editData.value = res.data;
      }
      modalVisible.value = true;
    });
  }
  if (!data.relatedResourceUuidOwnType && data.dataType === 1) {
    editId.value = data.id;
    editData.value = data;
    dirDetailShow.value = true;
  }
  if (!data.relatedResourceUuidOwnType && data.dataType === 2) {
    editId.value = data.id;
    editData.value = data;
    fileDetailShow.value = true;
  }
};

const delFun = (data: any) => {
  const { id, relatedResourceUuid, relatedResourceUuidOwnType, dataType } = data;
  let api: any = dataOverViewDeleteSimulationNodeFilesApi;
  let params: any = { deleteId: id, dataType: dataType };
  if (relatedResourceUuidOwnType === NODE_TYPE.PROJECT) {
    // 项目单独删除接口
    api = deleteNodeApi;
    params = {
      deleteNodeIdList: [relatedResourceUuid],
    };
  }
  api(params).then((res: any) => {
    if (res.code === 200) {
      ElMessage.success('操作成功');
      if (relatedResourceUuidOwnType === NODE_TYPE.PROJECT) {
        reloadFun();
      } else {
        reloadNodeFun();
      }
    }
  });
};

const batchDelFun = () => {
  ElMessageBox.confirm('删除后不可恢复，确认删除吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      const proList: any[] = [];
      let isProject = false;
      chosenData.value.forEach((item: any) => {
        if (item.relatedResourceUuidOwnType === NODE_TYPE.PROJECT) {
          isProject = true;
          proList.push(deleteNodeApi({ deleteNodeIdList: [item.relatedResourceUuid] }));
        } else {
          proList.push(
            dataOverViewDeleteSimulationNodeFilesApi({ deleteId: item.id, dataType: item.dataType })
          );
        }
      });
      Promise.all(proList).then(() => {
        ElMessage.success('操作成功');
        if (isProject) {
          reloadFun();
        } else {
          reloadNodeFun();
        }
      });
    })
    .catch(() => {});
};

const cellClickFun = (data: any) => {
  const { row } = data;
  fileData.value = row;
};

const searchFileFun = (data: any) => {
  BaseTableRef.value?.setDataFun(data.data);
  isSearching.value = true;
};

const resetSearchFileFun = () => {
  BaseTableRef.value?.setDataFun([]);
  isSearching.value = false;
  reloadNodeFun();
};

const editNodeFun = (data: any) => {
  if (isCategoryNodeType(data.nodeType)) {
    editClassFun(data);
  }
  if (nodeType.value === NODE_TYPE.TASK) {
    editTaskFun(data);
  }
};

const editClassFun = (data: any) => {
  let params: any = {};
  let api: any = null;
  if (data.uuid) {
    api = editNodeForDataApi;
    params = {
      ...data,
      relatedResourceUuid: data.uuid,
    };
  } else {
    api = addNodeForDataApi;
    params = {
      addNodeList: [
        {
          ...data,
          pid: currentData.value.relatedResourceUuid,
        },
      ],
      tagMap: getTagMapList(),
    };
  }
  api(params).then((res: any) => {
    if (res.code === 200) {
      ElMessage.success('操作成功');
      modalVisible.value = false;
      reloadNodeFun();
    }
  });
};

const editTaskFun = (data: any) => {
  let params: any = {};
  let api: any = null;
  if (data.uuid) {
    api = editTaskForDataApi;
    params = {
      ...data,
      relatedResourceUuid: data.uuid,
    };
  } else {
    api = addTaskForDataApi;
    params = {
      addTaskList: [
        {
          ...data,
          pid: currentData.value.relatedResourceUuid,
        },
      ],
      tagMap: getTagMapList(),
    };
  }
  api(params).then((res: any) => {
    if (res.code === 200) {
      ElMessage.success('操作成功');
      modalVisible.value = false;
      reloadNodeFun();
    }
  });
};

const openAddDirFun = () => {
  if (!currentData.value) {
    ElMessage.warning('请选择一个目录');
    return;
  }
  editId.value = '';
  dirDetailShow.value = true;
};

const goDetailFun = (data: any) => {
  if (FileTreeRef.value) {
    FileTreeRef.value.openDirFun(data.id);
  }
};

const mergeCurrentData = ref<any>({});
const choseNodeFun = (mergeData: any) => {
  mergeCurrentData.value = mergeData;
  chosenData.value = [];
  let data: any = {};
  if (mergeData.mergeSameNameChildren) {
    mergeDataList.value = mergeData.mergeSameNameChildren;
    // mergeDataName.value = mergeDataList.value[0].totalName;
    data = mergeDataList.value[0];
  } else {
    data = mergeData;
  }
  setCurrentDataFun(data, mergeData.fileIds);
};

const changeMergeDataFun = (data: any) => {
  if (!data) {
    setCurrentDataFun(mergeDataList.value[0], mergeCurrentData.value.fileIds);
  } else {
    setCurrentDataFun(data, [data.id]);
  }
};

const setCurrentDataFun = (data: any, fileIds?: any) => {
  currentData.value = data;
  tableParams.value.fileId = data.id;
  tableParams.value.fileIds = fileIds || tableParams.value.fileIds;
  fileData.value = data;
};

const checkboxChangeFun = (data: any) => {
  chosenData.value = data.records;
};

const viewTypeChangeFun = (type: string) => {
  tableName.value = '';
  nextTick(() => {
    if (type === '1') {
      tableName.value = 'DATA_OVERVIEW';
    } else {
      tableName.value = 'DATA_OVERVIEW_JOB';
    }
    tableParams.value.jobMode = type === '2';
  });
};

const reloadFun = () => {
  chosenData.value = [];
  currentData.value = '';
  fileData.value = {};
  mergeDataList.value = [];
  mergeCurrentData.value = {};
  mergeDataName.value = '';
  tableParams.value = {
    dimensionTemplateId: currentDimension.value,
    filterEmptyData: false,
    fileId: '',
    fileIds: [],
    jobMode: false,
  };
  FileTreeRef.value?.reloadFun();
};

const reloadNodeFun = () => {
  FileTreeRef.value?.reloadNodeFun(currentData.value.id);
  BaseTableRef.value?.resetFun();
};
</script>

<style lang="scss" scoped>
.comp-data-overview {
  width: 100%;
  height: 100%;
}
.content {
  width: 100%;
  height: 100%;
  .top-options {
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    .text {
      font-size: 14px;
      width: 70px;
      text-align: center;
    }
    .select {
      flex: 1;
      padding: 0 10px;
    }
  }
  .option-btn {
    margin-right: 12px;
  }
  .file-name {
    display: flex;
    align-items: center;
    .name {
      padding-left: 4px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      &.link {
        color: var(--el-color-primary);
        &:hover {
          text-decoration: underline;
          cursor: pointer;
        }
      }
    }
    .el-icon {
      color: var(--el-color-primary);
    }
  }
  .info-switch {
    margin-left: 12px;
  }
  .table-content {
    display: flex;
    height: 100%;
    .table {
      flex: 1;
      width: 0;
      .options {
        display: flex;
        .merge-data-list {
          width: 170px;
          margin-right: 12px;
        }
      }
    }
    .info {
      width: 250px;
      height: 100%;
    }
  }
}
</style>
