<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <LeftTree v-if="!pathDivShow" ref="childRef" class="w-1/5 xl:w-1/6" @select="handleSelect" />
    <div v-if="!pathDivShow" class="w-4/5 xl:w-5/6">
      <BasicTable @register="registerTable" :searchInfo="searchInfo">
        <template #toolbar>
          <span v-for="(f, index) in floders" :key="f.id" class="floderTitle">
            <span v-if="f.name != '全部文件'" style="margin-right: 10px"> / </span>
            <a-tooltip placement="top">
              <template #title>
                <span>{{ f.name }}</span>
              </template>
              <span class="flodersname" @click="getChildrenByProp(f, index)"> {{ f.name }}</span>
            </a-tooltip>
          </span>
          <div class="floderOtherButton">
            <a-button :icon="h(BorderHorizontalOutlined)" @click="openComparisonModal">
              变化检测
            </a-button>
            <a-button :icon="h(PlusOutlined)" type="primary" @click="addFolder">
              新建文件夹
            </a-button>
            <a-button :icon="h(ColumnHeightOutlined)" @click="moveFolderOrFile">移动</a-button>
            <a-button :icon="h(DeleteOutlined)" @click="deleteFolderOrFile">删除 </a-button>
            <!-- <a-button :icon="h(DownloadOutlined)" @click="compressFolderOrFile">压缩</a-button> -->
            <a-radio-group v-model:value="tableType">
              <a-radio-button value="table"><BarsOutlined /></a-radio-button>
              <a-radio-button value="store"><AppstoreOutlined /></a-radio-button>
            </a-radio-group>
          </div>
        </template>
        <template #bodyCell="{ column, record }">
          <div v-if="tableTypeAfterShow == 'table'">
            <template v-if="column.key === 'name'">
              <!-- 文件夹 -->
              <FolderOpenOutlined v-if="!record.objectKey" style="font-size: 20px" />
              <!-- 图片 -->
              <img
                v-if="record.objectKey && record.objectKey.includes('jpeg')"
                :src="`${VITE_MEDIALIBRARY_IMAGE_URL + (record.minipic ? record.minipic : record.objectKey)}`"
                :width="30"
                :height="20"
              />
              <!-- 视频 -->
              <PlaySquareTwoTone
                v-if="record.objectKey && record.objectKey.includes('mp4')"
                style="font-size: 20px"
              />
              <!-- 文件夹或者图片、视频 -->
              <span
                v-if="
                  !record.objectKey ||
                  (record.objectKey &&
                    (record.objectKey.includes('jpeg') || record.objectKey.includes('mp4')))
                "
                @click="lookRecord(record)"
                @mouseover="record.isHovered = true"
                @mouseout="record.isHovered = false"
                :style="{
                  textDecoration: record.isHovered ? 'underline' : 'none',
                  cursor: record.isHovered ? 'pointer' : 'default',
                  marginLeft: '5px',
                }"
              >
                {{ record.name }}
              </span>
              <!-- 其他文件 -->
              <FileOutlined
                v-if="
                  record.objectKey &&
                  !record.objectKey.includes('jpeg') &&
                  !record.objectKey.includes('mp4')
                "
                style="font-size: 20px"
              />
              <span
                v-if="
                  record.objectKey &&
                  !record.objectKey.includes('jpeg') &&
                  !record.objectKey.includes('mp4')
                "
                :style="{
                  marginLeft: '5px',
                }"
              >
                {{ record.name }}
              </span>
            </template>
            <template v-if="column.key === 'createTime'">
              <span
                style="width: 100%; display: flex; align-items: center; justify-content: center"
              >
                {{ record.createTime ? record.createTime : '-' }}
              </span>
            </template>
            <template v-if="column.key === 'size'">
              <span
                style="width: 100%; display: flex; align-items: center; justify-content: center"
              >
                {{ record.size ? record.size : '-' }}
              </span>
            </template>
            <template v-if="column.key === 'fileTags'">
              <div v-if="record.fileTags && record.fileTags.length > 0">
                <a-tag color="success" v-for="la in record.fileTags" :key="la">{{ la }}</a-tag>
              </div>
            </template>
            <template v-if="column.key === 'action'">
              <div class="svg-container">
                <a-tooltip placement="top">
                  <template #title>
                    <span>重命名</span>
                  </template>
                  <a-button type="text">
                    <EditOutlined @click="renameRecord(record)" />
                  </a-button>
                </a-tooltip>
                <!-- <a-tooltip placement="top">
                  <template #title>
                    <span>
                      {{ record.showOnMap == 1 ? '在地图上取消加载' : '在地图上加载' }}
                    </span>
                  </template>
                  <a-button
                    type="text"
                    v-if="record.objectKey && record.objectKey.includes('.jpeg')"
                    @click="funShowOnMap(record)"
                  >
                    <div
                      v-if="record.showOnMap == 1"
                      class="svg-container"
                      v-html="svg_showOnMap_1"
                    />
                    <div
                      v-if="record.showOnMap != 1"
                      class="svg-container"
                      v-html="svg_showOnMap_0"
                    />
                  </a-button>
                </a-tooltip> -->
                <a-tooltip placement="top">
                  <template #title>
                    <div>查看地图图片历史路径</div>
                    <!-- <div>只展示在地图上加载的图片</div> -->
                  </template>
                  <a-button
                    type="text"
                    v-if="record.objectKey && record.objectKey.includes('.jpeg')"
                  >
                    <BorderInnerOutlined @click="showPathDiv(record)" />
                  </a-button>
                </a-tooltip>
              </div>
            </template>
          </div>
        </template>
      </BasicTable>
      <div v-if="tableTypeAfterShow == 'store'" class="storeDivsAllChoose">
        <a-checkbox v-model:checked="checkNameChecked" @change="changeStore($event, 'allChoose')">
          全选
        </a-checkbox>
      </div>
      <div v-if="tableTypeAfterShow == 'store'" class="storeDivList">
        <div
          v-for="record in showTableData"
          :key="record.id"
          class="storeDiv"
          :style="{ background: record.isHovered ? '#D5E8FC' : '#ffffff' }"
          @mouseover="record.isHovered = true"
          @mouseout="record.isHovered = false"
        >
          <!-- 选中 -->
          <div style="position: absolute; top: 0px; left: 5px">
            <a-checkbox v-model:checked="record.checked" @change="changeStore($event, record)" />
          </div>
          <!-- 文件夹 -->
          <FolderOpenOutlined
            v-if="!record.objectKey"
            style="font-size: 40px"
            @click="lookRecord(record)"
          />
          <!-- 图片 -->
          <img
            v-if="record.objectKey && record.objectKey.includes('jpeg')"
            :src="`${VITE_MEDIALIBRARY_IMAGE_URL + (record.minipic ? record.minipic : record.objectKey)}`"
            :width="100"
            :height="60"
            style="position: absolute; top: 10px; left: 32.5px"
            @click="lookRecord(record)"
          />
          <!-- 视频 -->
          <PlaySquareTwoTone
            v-if="record.objectKey && record.objectKey.includes('mp4')"
            style="font-size: 40px"
          />
          <!-- 文件夹或者图片、视频 -->
          <span
            v-if="
              !record.objectKey ||
              (record.objectKey &&
                (record.objectKey.includes('jpeg') || record.objectKey.includes('mp4')))
            "
            class="storeDivSpanName"
            :style="{
              textDecoration: record.isHovered ? 'underline' : 'none',
              cursor: record.isHovered ? 'pointer' : 'default',
            }"
            @click="lookRecord(record)"
          >
            {{ record.name }}
          </span>
          <!-- 其他文件 -->
          <FileOutlined
            v-if="
              record.objectKey &&
              !record.objectKey.includes('jpeg') &&
              !record.objectKey.includes('mp4')
            "
            style="font-size: 40px"
          />
          <span
            v-if="
              record.objectKey &&
              !record.objectKey.includes('jpeg') &&
              !record.objectKey.includes('mp4')
            "
            class="storeDivSpanName"
          >
            {{ record.name }}
          </span>
        </div>
      </div>
    </div>

    <!-- 新建文件夹弹窗 -->
    <AddFolderModal @register="addFolderModal" @handleSuccess="handleSuccess" />
    <!-- 移动弹窗 -->
    <MoveFileModal @register="moveFileModal" @handleSuccess="handleSuccess" />
    <!-- 压缩弹窗 -->
    <CompressFileModal @register="compressFileModal" @handleSuccess="handleSuccess" />
    <!-- 重命名弹窗 -->
    <RenameModal @register="renameModal" @handleSuccess="handleSuccess" />
    <!-- 预览弹窗 -->
    <a-modal
      v-model:open="open"
      width="100%"
      wrap-class-name="full-modal"
      :centered="true"
      :closable="false"
      :footer="null"
      :destroyOnClose="true"
      :keyboard="false"
      :mask="false"
      :maskClosable="false"
    >
      <Preview
        v-if="nowPreviewRecord.objectKey"
        :nowPreviewRecord="nowPreviewRecord"
        :previewRecordList="previewRecordList"
        @chooseNowPreviewRecord="chooseNowPreviewRecord"
        @closeModal="closeModal"
        @handleSuccessPreview="handleSuccessPreview"
        @openPathModal="openPathModal"
      />
    </a-modal>
    <!-- 变化检测弹窗 -->
    <a-modal
      v-model:open="comparisonOpen"
      width="100%"
      wrap-class-name="full-modal"
      :centered="true"
      :closable="false"
      :footer="null"
      :destroyOnClose="true"
      :keyboard="false"
      :mask="false"
      :maskClosable="false"
    >
      <Comparison @closeComparisonModal="closeComparisonModal" />
    </a-modal>

    <Path
      v-if="pathDivShow"
      :pathDivShow="pathDivShow"
      :allImageDataList="allImageDataList"
      :nowShowImageData="nowShowImageData"
      :floderName="floderName"
      @closePathModal="closePathModal"
      @handleSuccessPath="handleSuccessPath"
    />
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { reactive, ref, watch, h } from 'vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { PageWrapper } from '@/components/Page';
  import { useModal } from '@/components/Modal';
  import {
    EditOutlined,
    DeleteOutlined,
    BorderHorizontalOutlined,
    PlusOutlined,
    ColumnHeightOutlined,
    DownloadOutlined,
    AppstoreOutlined,
    BarsOutlined,
    FolderOutlined,
    FolderOpenOutlined,
    EyeOutlined,
    PlaySquareTwoTone,
    FileOutlined,
    BorderInnerOutlined,
  } from '@ant-design/icons-vue';
  import {
    GetMediaFile,
    UpdatePicStatus,
    Deletepic,
    UpdatePicName,
    UpdatePicParentKey,
  } from '@/api/demo/mediaLibrary';
  import LeftTree from './LeftTree.vue';
  import Preview from './preview/index.vue';
  import Comparison from './comparison/index.vue';
  import Path from './path/index.vue';
  import { AddFolderModal, MoveFileModal, CompressFileModal, RenameModal } from './modal/modal';
  import { PermissionBtn } from '@/components/PermissionBtn/index';
  import { getAppEnvConfig } from '@/utils/env';
  import { useMessage } from '@/hooks/web/useMessage';
  import { columns, searchFormSchema, svg_showOnMap_0, svg_showOnMap_1 } from './modal.data';
  import dayjs from 'dayjs';
  import { cloneDeep } from 'lodash-es';

  const { VITE_MEDIALIBRARY_IMAGE_URL } = getAppEnvConfig();
  const { createConfirm, createMessage } = useMessage();

  // 表格数据--------------------------------------------------------------------
  // 展示数据
  const showTableData = ref();
  // 表格还是文件夹
  const tableType = ref('table');
  const tableTypeAfterShow = ref('table');
  const tableHeight: any = ref(0);
  watch(
    () => tableType.value,
    (newval) => {
      // 格子
      if (newval === 'store') {
        // 数据
        GetMediaFile({
          parentKey: nowParentKey.value,
          page: 1,
          limit: 1000,
        }).then((res) => {
          showTableData.value = res.items;
          tableTypeAfterShow.value = newval;
          // 表格-隐藏
          const containers = document.querySelectorAll('.ant-table-container');
          tableHeight.value = containers[0] ? containers[0]?.scrollHeight : 0;
          if (containers) {
            containers.forEach((container) => {
              container.style.display = 'none';
            });
          }
          // 分页-隐藏
          const paginations = document.querySelectorAll('.ant-pagination');
          if (paginations) {
            paginations.forEach((pagination) => {
              pagination.style.display = 'none';
            });
          }
          // 选中：表格→格子
          let selectRowsIdArray = getSelectRows().map((item) => item.id);
          showTableData.value.forEach((item) => {
            if (selectRowsIdArray.includes(item.id)) {
              item.checked = true;
              changeStore(
                {
                  target: {
                    checked: true,
                  },
                },
                item,
              );
            }
          });
        });
      }
      // 表格
      if (newval === 'table') {
        reload().then((res) => {
          tableTypeAfterShow.value = newval;
          // 表格-显示
          const containers = document.querySelectorAll('.ant-table-container');
          tableHeight.value = containers[0] ? containers[0]?.scrollHeight : 0;
          if (containers) {
            containers.forEach((container) => {
              container.style.display = 'block';
            });
          }
          // 分页-显示
          const paginations = document.querySelectorAll('.ant-pagination');
          if (paginations) {
            paginations.forEach((pagination) => {
              pagination.style.display = 'block';
            });
          }
          // 选中：格子→表格
          let selectRowsIdArray = showTableData.value.filter((item) => item.checked);
          setSelectedRows(selectRowsIdArray);
        });
      }
    },
  );

  // 单选框选择
  const checkNameChecked = ref(false);
  // 表格or文件夹切换
  function changeStore(e, record) {
    if (typeof record == 'string') {
      if (e.target.checked) {
        checkNameChecked.value = true;
        showTableData.value = showTableData.value.map((item) => ({
          ...item,
          checked: true,
        }));
      } else {
        checkNameChecked.value = false;
        showTableData.value = showTableData.value.map((item) => ({
          ...item,
          checked: false,
        }));
      }
    } else {
      if (showTableData.value.filter((item) => item.checked).length == showTableData.value.length) {
        checkNameChecked.value = true;
      } else {
        checkNameChecked.value = false;
      }
    }
  }

  // 表格
  // 目录
  const floders = ref([
    {
      id: '0',
      name: '全部文件',
    },
  ]);
  const nowParentKey = ref('0');
  const searchInfo = reactive<Recordable>({});
  const searchParams = ref();
  const [
    registerTable,
    { reload, getDataSource, getSelectRows, setSelectedRows, clearSelectedRowKeys },
  ] = useTable({
    api: GetMediaFile,
    rowKey: 'id',
    columns,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    rowSelection: {
      type: 'checkbox',
    },
    isTreeTable: false,
    striped: false,
    bordered: false,
    inset: false,
    tableSetting: {
      redo: false,
      size: false,
      setting: false,
    },
    useSearchForm: true,
    showIndexColumn: false,
    showTableSetting: true,
    beforeFetch: (data) => {
      // 接口请求前 参数处理
      let temp = {
        ...data,
        page: tableTypeAfterShow.value == 'table' ? data.page : 1,
        limit: tableTypeAfterShow.value == 'table' ? data.limit : 1000,
        parentKey: nowParentKey.value,
      };
      return temp;
    },
    handleSearchInfoFn(info) {
      if (info.startTime && info.endTime) {
        info = {
          ...info,
          startTime: dayjs(info.startTime).format('YYYY-MM-DD') + ' 00:00:00',
          endTime: dayjs(info.endTime).format('YYYY-MM-DD') + ' 23:59:59',
        };
      }
      searchParams.value = info;
      return info;
    },
    afterFetch: (res) => {
      res.forEach((arr) => {
        if (arr.fileTags) {
          arr.fileTags = JSON.parse(arr.fileTags);
        } else {
          arr.fileTags = [];
        }
        if (arr.graffitiJson) {
          arr.graffitiJson = JSON.parse(arr.graffitiJson);
        } else {
          arr.graffitiJson = [];
        }
      });
      return res;
    },
  });

  // 目录跳跃
  function getChildrenByProp(f, index) {
    nowParentKey.value = f.id;
    floders.value = floders.value.splice(0, index + 1);
    clearSelectedRowKeys();
    reload().then((res) => {
      showTableData.value = res;
    });
  }

  // 弹窗----------------------------------------------------------------------
  // 左侧目录选择
  function handleSelect(orgId = '') {
    searchInfo.orgId = orgId;
    reload();
  }
  // 刷新表格
  const childRef = ref<any>();
  function handleSuccessPreview(record = null) {
    clearSelectedRowKeys();
    childRef.value.fetch();
    reload();
    setTimeout(() => {
      if (record) {
        // 删除后-刷新当前查看项
        previewRecordList.value.forEach((item, index) => {
          if (record.id == item.id) {
            previewRecordList.value.splice(index, 1);
            if (previewRecordList.value.length != 0) {
              nowPreviewRecord.value = previewRecordList.value[index];
            } else {
              open.value = false;
            }
          }
        });
      } else {
        // 刷新当前查看项
        GetMediaFile({
          ...searchParams.value,
          parentKey: nowParentKey.value,
          page: 1,
          limit: 100,
        }).then((res) => {
          previewRecordList.value = uniqueByKey(res.items, nowPreviewRecord.value);
          nowPreviewRecord.value = getDataSource().find(
            (item) => item.id == nowPreviewRecord.value.id,
          );
        });
      }
    }, 500);
  }
  // 新建文件夹
  const [addFolderModal, { openModal: openAddFolderModal }] = useModal();
  // 移动
  const [moveFileModal, { openModal: openMoveFileModal }] = useModal();
  // 压缩
  const [compressFileModal, { openModal: openCompressFileModal }] = useModal();
  // 重命名
  const [renameModal, { openModal: openRenameModal }] = useModal();
  // 刷新
  function handleSuccess(record = null) {
    clearSelectedRowKeys();
    childRef.value.fetch();
    reload();
  }
  // 新建文件夹
  function addFolder() {
    openAddFolderModal(true, {
      parentKey: nowParentKey.value,
    });
  }
  // 移动文件
  function moveFolderOrFile() {
    let rows = getSelectRows();
    if (rows.length > 0) {
      if (rows.some((item) => item.parentKey == '0' && !item.objectKey)) {
        return createMessage.warn('根目录的文件夹不能移动!');
      }
      const records = rows;
      openMoveFileModal(true, {
        records,
      });
    } else {
      return createMessage.warn('请选择一个或者多个文件/文件夹进行移动');
    }
  }
  // 重命名
  function renameRecord(record) {
    openRenameModal(true, {
      record,
    });
  }
  // 删除
  async function deleteFolderOrFile() {
    let rows = getSelectRows();
    if (rows.length == 0) {
      return createMessage.warn('请选择一个或者多个文件/文件夹进行删除');
    }
    createConfirm({
      iconType: 'info',
      title: '删除',
      content: '确定要删除选择的文件/文件夹吗？',
      onOk: async () => {
        let ids = '';
        rows.forEach((row) => {
          if (!ids) {
            ids = row.id;
          } else {
            ids = ids + ',' + row.id;
          }
        });
        Deletepic({
          ids: ids,
        }).then((res) => {
          handleSuccess();
          createMessage.success(res);
        });
      },
    });
  }

  // 查看弹窗----------------------------------------------------------------------------
  const open = ref(false);
  // 目前展示图片
  const nowPreviewRecord: any = ref();
  // 目前展示图片的列表
  const previewRecordList: any = ref([]);
  // 查看-打开这个文件夹或者展示这个图片
  async function lookRecord(record) {
    // 展示这个图片后者视频
    if (record.objectKey) {
      GetMediaFile({
        ...searchParams.value,
        parentKey: nowParentKey.value,
        page: 1,
        limit: 100,
      }).then((res) => {
        nowPreviewRecord.value = record;
        // 同文件下的图片或者视频
        previewRecordList.value = uniqueByKey(res.items, record);
        open.value = true;
      });
    }
    // 文件夹
    if (!record.objectKey) {
      nowParentKey.value = record.id;
      floders.value.push({
        id: nowParentKey.value,
        name: record.name,
      });
      reload().then((res) => {
        showTableData.value = res;
      });
    }
  }
  function uniqueByKey(arrlist, record) {
    let resultList: any = [];
    if (record.objectKey.includes('.jpeg')) {
      arrlist
        .filter((item) => item.objectKey && item.objectKey.includes('jpeg'))
        .forEach((item) => {
          if (!item.fileTags) {
            item.fileTags = [];
          } else {
            item.fileTags = JSON.parse(item.fileTags);
          }
          if (!item.graffitiJson) {
            item.graffitiJson = [];
          } else {
            item.graffitiJson = JSON.parse(item.graffitiJson);
          }
          resultList.push(item);
        });
    }
    if (record.objectKey.includes('mp4')) {
      arrlist
        .filter((item) => item.objectKey && item.objectKey.includes('mp4'))
        .forEach((item) => {
          if (!item.fileTags) {
            item.fileTags = [];
          } else {
            item.fileTags = JSON.parse(item.fileTags);
          }
          if (!item.graffitiJson) {
            item.graffitiJson = [];
          } else {
            item.graffitiJson = JSON.parse(item.graffitiJson);
          }
          resultList.push(item);
        });
    }
    return resultList;
  }
  // 图片选择
  function chooseNowPreviewRecord(value) {
    nowPreviewRecord.value = value;
  }
  // 关闭
  function closeModal() {
    document.body.style.cursor = 'auto';
    open.value = false;
  }

  // 变化检测弹窗----------------------------------------------------------------------
  const comparisonOpen = ref(false);
  // 打开变化检测弹窗
  function openComparisonModal() {
    comparisonOpen.value = true;
  }
  // 关闭变化检测弹窗
  function closeComparisonModal() {
    comparisonOpen.value = false;
  }

  // 路径地图----------------------------------------------------------------------
  // 打开路径地图
  const floderName = ref('');
  const nowShowImageData = ref({});
  const allImageDataList: any = ref([]);
  // 展示路径地图部分
  const pathDivShow = ref(false);
  function showPathDiv(record) {
    GetMediaFile({
      parentKey: record.parentKey,
      page: 1,
      limit: 1000,
    }).then((res) => {
      allImageDataList.value = res.items.filter(
        (item) => item.objectKey && item.objectKey.includes('.jpeg'),
      );
      allImageDataList.value.forEach((arr) => {
        if (arr.fileTags) {
          arr.fileTags = JSON.parse(arr.fileTags);
        } else {
          arr.fileTags = [];
        }
        if (arr.graffitiJson) {
          arr.graffitiJson = JSON.parse(arr.graffitiJson);
        } else {
          arr.graffitiJson = [];
        }
      });
      nowShowImageData.value = allImageDataList.value.find((item) => item.id == record.id);
      floderName.value = floders.value[floders.value.length - 1].name;
      pathDivShow.value = true;
    });
  }
  // 关闭路径地图弹窗
  function closePathModal() {
    nowShowImageData.value = {};
    pathDivShow.value = false;
  }
  // 刷新
  function handleSuccessPath(value) {
    setTimeout(() => {
      showPathDiv(value);
      reload();
    }, 500);
  }
</script>
<style lang="less" scoped>
  .floderTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    cursor: pointer;
  }

  ::v-deep .vben-basic-table-header__toolbar {
    display: flex !important;
    justify-content: flex-start !important;
  }
  .floderOtherButton {
    position: absolute;
    right: 0px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .flodersname {
    max-width: 120px;
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超出显示省略号 */
  }

  ::v-deep .floderTitle .ant-btn {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  ::v-deep .floderTitle .ant-btn-text {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  ::v-deep .ant-table-row-expand-icon {
    display: none !important;
  }
  ::v-deep .ant-table-row-expand-icon-collapsed {
    display: none !important;
  }

  .storeDivsAllChoose {
    width: 100%;
    height: 40px;
    margin: 0px 0px 16px 16px;
    padding-left: 16px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .storeDivList {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;

    width: 100%;
    height: 72.5%;
    background: #ffffff;
    margin: 0px 16px 16px 16px;
    overflow-y: auto;

    .storeDiv {
      position: relative;
      width: 165px;
      height: 130px;
      outline: 1px solid #000000;
      margin: 16px;

      display: flex;
      align-items: center;
      justify-content: center;

      .storeDivSpanName {
        position: absolute;
        bottom: 16px;
        left: 0px;
        width: 100%;
        height: 30px;
        cursor: pointer;

        white-space: pre-wrap;
        word-break: break-all;
        overflow-wrap: break-word;
        max-width: 100%;
        display: block;
      }
    }
  }

  .svg-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  ::v-deep .vben-basic-table {
    height: fit-content !important;
  }
  ::v-deep .full-modal {
    height: 100% !important;
  }
  ::v-deep .ant-modal-body {
    height: 100% !important;
  }
</style>
