<template>
  <div class="app-container">
    <!-- 控制栏 -->
    <div class="control-bar">
      <span class="control-label">刷新时间（秒，输入0关闭刷新）</span>
      <el-input
        v-model="num"
        class="refresh-input"
        placeholder="请添加刷新时间"
        :min="1"
        type="number"
        @change="handleChange"
      />
    </div>

    <!-- 标题 -->
    <div class="header-section">
      <DashboardHeader height="100%" content="成品仓看板" />
    </div>

    <!-- 列表区域 -->
    <div class="content-section">
      <div class="grid-container">
        <!-- 成品待入库列表 -->
        <div class="grid-item">
          <el-card header="成品待入库列表" shadow="hover" class="list-card">
            <div
              ref="scroll_preRollPass"
              class="scroll-wrapper"
              @mouseenter="stopAutoScroll('preRollPass')"
              @mouseleave="startAutoScroll('preRollPass')"
            >
              <div class="table-wrapper">
                <el-table
                  v-loading="loading.preRollPass"
                  :data="tableData.preRollPass"
                  border
                  class="auto-fit-table"
                  size="small"
                  :cell-style="cellStyle"
                  :row-style="rowStyle"
                  :header-cell-style="headerCellStyle"
                  :row-class-name="tableRowClassName"
                >
                  <el-table-column
                    type="index"
                    width="50"
                    align="center"
                    label="序号"
                  />
                  <el-table-column
                    prop="物料编码"
                    label="物料编码"
                    align="center"
                    min-width="120"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    prop="物料名称"
                    label="物料名称"
                    align="center"
                    min-width="150"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    prop="入库数量"
                    label="入库数量"
                    align="center"
                    min-width="80"
                  />
                  <el-table-column
                    prop="预计入库时间"
                    label="预计入库时间"
                    align="center"
                    min-width="120"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">{{
                      formatTimestamp(scope.row["预计入库时间"])
                    }}</template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div v-if="num > 0" class="page-indicator">
              {{ pageNo.preRollPass || 1 }} /
              {{ Math.max(1, Math.ceil((total.preRollPass || 0) / pageSize)) }}
            </div>
          </el-card>
        </div>

        <!-- 每日入库信息列表 -->
        <div class="grid-item">
          <el-card header="每日入库信息列表" shadow="hover" class="list-card">
            <div
              ref="scroll_mergedPreRollPass"
              class="scroll-wrapper"
              @mouseenter="stopAutoScroll('mergedPreRollPass')"
              @mouseleave="startAutoScroll('mergedPreRollPass')"
            >
              <div class="table-wrapper">
                <el-table
                  v-loading="loading.mergedPreRollPass"
                  :data="tableData.mergedPreRollPass"
                  border
                  class="auto-fit-table"
                  size="small"
                  :cell-style="cellStyle"
                  :row-style="rowStyle"
                  :header-cell-style="headerCellStyle"
                  :row-class-name="tableRowClassName"
                >
                  <el-table-column
                    type="index"
                    width="50"
                    align="center"
                    label="序号"
                  />
                  <el-table-column
                    prop="申请单号"
                    label="申请单号"
                    align="center"
                    min-width="120"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    prop="业务类型"
                    label="业务类型"
                    align="center"
                    min-width="100"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    prop="物料编码"
                    label="物料编码"
                    align="center"
                    min-width="120"
                  />
                  <el-table-column
                    prop="物料名称"
                    label="物料名称"
                    align="center"
                    min-width="150"
                  />
                  <el-table-column
                    prop="入库数量"
                    label="入库数量"
                    align="center"
                    min-width="80"
                  />
                  <el-table-column
                    prop="入库时间"
                    label="入库时间"
                    align="center"
                    min-width="120"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">{{
                      formatTimestamp(scope.row["入库时间"])
                    }}</template>
                  </el-table-column>
                  <el-table-column
                    prop="审核人"
                    label="审核人"
                    align="center"
                    min-width="80"
                  />
                </el-table>
              </div>
            </div>
            <div v-if="num > 0" class="page-indicator">
              {{ pageNo.mergedPreRollPass || 1 }} /
              {{
                Math.max(
                  1,
                  Math.ceil((total.mergedPreRollPass || 0) / pageSize)
                )
              }}
            </div>
          </el-card>
        </div>

        <!-- 每日出库信息列表 -->
        <div class="grid-item">
          <el-card header="每日出库信息列表" shadow="hover" class="list-card">
            <div
              ref="scroll_rollUp"
              class="scroll-wrapper"
              @mouseenter="stopAutoScroll('rollUp')"
              @mouseleave="startAutoScroll('rollUp')"
            >
              <div class="table-wrapper">
                <el-table
                  v-loading="loading.rollUp"
                  :data="tableData.rollUp"
                  border
                  class="auto-fit-table"
                  size="small"
                  :cell-style="cellStyle"
                  :row-style="rowStyle"
                  :header-cell-style="headerCellStyle"
                  :row-class-name="tableRowClassName"
                >
                  <el-table-column
                    type="index"
                    width="50"
                    align="center"
                    label="序号"
                  />
                  <el-table-column
                    prop="申请单号"
                    label="申请单号"
                    align="center"
                    min-width="120"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    prop="业务类型"
                    label="业务类型"
                    align="center"
                    min-width="100"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    prop="物料编码"
                    label="物料编码"
                    align="center"
                    min-width="120"
                  />
                  <el-table-column
                    prop="物料名称"
                    label="物料名称"
                    align="center"
                    min-width="150"
                  />
                  <el-table-column
                    prop="出库数量"
                    label="出库数量"
                    align="center"
                    min-width="80"
                  />
                  <el-table-column
                    prop="出库时间"
                    label="出库时间"
                    align="center"
                    min-width="120"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">{{
                      formatTimestamp(scope.row["出库时间"])
                    }}</template>
                  </el-table-column>
                  <el-table-column
                    prop="审核人"
                    label="审核人"
                    align="center"
                    min-width="80"
                    show-overflow-tooltip
                  />
                </el-table>
              </div>
            </div>
            <div v-if="num > 0" class="page-indicator">
              {{ pageNo.rollUp || 1 }} /
              {{ Math.max(1, Math.ceil((total.rollUp || 0) / pageSize)) }}
            </div>
          </el-card>
        </div>

        <!-- 库存呆滞料列表 -->
        <div class="grid-item">
          <el-card header="库存呆滞料列表" shadow="hover" class="list-card">
            <div
              ref="scroll_finalPass"
              class="scroll-wrapper"
              @mouseenter="stopAutoScroll('finalPass')"
              @mouseleave="startAutoScroll('finalPass')"
            >
              <div class="table-wrapper">
                <el-table
                  v-loading="loading.finalPass"
                  :data="tableData.finalPass"
                  border
                  class="auto-fit-table"
                  size="small"
                  :cell-style="cellStyle"
                  :row-style="rowStyle"
                  :header-cell-style="headerCellStyle"
                  :row-class-name="tableRowClassName"
                >
                  <el-table-column
                    type="index"
                    width="50"
                    align="center"
                    label="序号"
                  />
                  <el-table-column
                    prop="物料编码"
                    label="物料编码"
                    align="center"
                    min-width="120"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    prop="物料名称"
                    label="物料名称"
                    align="center"
                    min-width="150"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    prop="在库数量"
                    label="在库数量"
                    align="center"
                    min-width="80"
                  />
                  <el-table-column
                    prop="批次号"
                    label="批次号"
                    align="center"
                    min-width="120"
                  />
                  <el-table-column
                    prop="库存天数"
                    label="库存天数"
                    align="center"
                    min-width="80"
                  />
                  <el-table-column
                    prop="创建日期"
                    label="创建日期"
                    align="center"
                    min-width="120"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">{{
                      formatTimestamp(scope.row["创建日期"])
                    }}</template>
                  </el-table-column>
                  <el-table-column
                    prop="生产日期"
                    label="生产日期"
                    align="center"
                    min-width="120"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">{{
                      formatTimestamp(scope.row["生产日期"])
                    }}</template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div v-if="num > 0" class="page-indicator">
              {{ pageNo.finalPass || 1 }} /
              {{ Math.max(1, Math.ceil((total.finalPass || 0) / pageSize)) }}
            </div>
          </el-card>
        </div>

        <!-- 客退列表 -->
        <div class="grid-item">
          <el-card header="客退列表" shadow="hover" class="list-card">
            <div
              ref="scroll_slitting"
              class="scroll-wrapper"
              @mouseenter="stopAutoScroll('slitting')"
              @mouseleave="startAutoScroll('slitting')"
            >
              <div class="table-wrapper">
                <el-table
                  v-loading="loading.slitting"
                  :data="tableData.slitting"
                  border
                  class="auto-fit-table"
                  size="small"
                  :cell-style="cellStyle"
                  :row-style="rowStyle"
                  :header-cell-style="headerCellStyle"
                  :row-class-name="tableRowClassName"
                >
                  <el-table-column
                    type="index"
                    width="50"
                    align="center"
                    label="序号"
                  />
                  <el-table-column
                    prop="申请单号"
                    label="申请单号"
                    align="center"
                    min-width="120"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    prop="物料编码"
                    label="物料编码"
                    align="center"
                    min-width="120"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    prop="物料名称"
                    label="物料名称"
                    align="center"
                    min-width="150"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    prop="数量"
                    label="数量"
                    align="center"
                    min-width="80"
                    show-overflow-tooltip
                  />
                  <el-table-column
                    prop="状态"
                    label="状态"
                    align="center"
                    min-width="80"
                  />
                  <el-table-column
                    prop="审核人"
                    label="审核人"
                    align="center"
                    min-width="80"
                    show-overflow-tooltip
                  />
                </el-table>
              </div>
            </div>
            <div v-if="num > 0" class="page-indicator">
              {{ pageNo.slitting || 1 }} /
              {{ Math.max(1, Math.ceil((total.slitting || 0) / pageSize)) }}
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DashboardHeader from "@/views/bulletinBoard/components/dashboardHeader.vue";
import DictTag from "@/components/DictTag";
import screenfull from "screenfull";
import * as QueryManageApi from "@/api/mes/queryManage";

export default {
  name: "TraceResult",
  components: { DashboardHeader, DictTag },
  data() {
    return {
      num: 15,
      pageSize: 5,

      tableData: {
        preRollPass: [],
        mergedPreRollPass: [],
        rollUp: [],
        finalPass: [],
        slitting: [],
      },

      loading: {
        preRollPass: false,
        mergedPreRollPass: false,
        rollUp: false,
        finalPass: false,
        slitting: false,
      },

      pageNo: {
        preRollPass: 1,
        mergedPreRollPass: 1,
        rollUp: 1,
        finalPass: 1,
        slitting: 1,
      },

      total: {
        preRollPass: 0,
        mergedPreRollPass: 0,
        rollUp: 0,
        finalPass: 0,
        slitting: 0,
      },

      autoTimers: {},
      // 横向自动滚动相关数据
      scrollTimers: {},
      scrollSpeed: 0.8,

      tabs: [
        { name: "preRollPass", documentId: "2005529291432038402" },
        { name: "mergedPreRollPass", documentId: "2005530261935263746" },
        { name: "rollUp", documentId: "2005530339370504194" },
        { name: "finalPass", documentId: "2005530481674850305" },
        { name: "slitting", documentId: "2005540102913298433" },
      ],
    };
  },
  watch: {
    num() {
      this.restartAllAutoPage();
    },
  },
  mounted() {
    this.init();
    this.enterFullScreen();
  },
  beforeDestroy() {
    this.clearAllTimers();
    this.clearAllScrollTimers();
  },
  methods: {
    async init() {
      for (const tab of this.tabs) {
        await this.loadTableData(tab);
      }
      this.startAllAutoPage();
    },

    async loadTableData(tab) {
      if (this.loading[tab.name]) return;
      try {
        this.$set(this.loading, tab.name, true);
        const currentPage = this.pageNo[tab.name] || 1;

        const { data } = await QueryManageApi.loadTableData({
          pageNo: currentPage,
          pageSize: this.pageSize,
          paramList: [],
          id: tab.documentId,
        });

        this.$set(this.tableData, tab.name, data?.list || []);
        this.$set(this.total, tab.name, data?.total || 0);

        // 数据加载完成后，重置滚动位置并重新启动滚动
        this.$nextTick(() => {
          const scrollEl = this.$refs[`scroll_${tab.name}`];
          if (scrollEl) {
            scrollEl.scrollLeft = 0; // 回到最左边
          }
          // 停止之前的滚动，重新启动
          this.stopAutoScroll(tab.name);
          this.startAutoScroll(tab.name);
        });
      } catch (error) {
        console.error("加载数据失败:", error);
        this.$set(this.tableData, tab.name, []);
      } finally {
        this.$set(this.loading, tab.name, false);
      }
    },

    // ========== 横向自动滚动（单向：左→右，到达停止，不循环）==========
    startAutoScroll(tableName) {
      this.stopAutoScroll(tableName);

      const scrollEl = this.$refs[`scroll_${tableName}`];
      if (!scrollEl) return;

      // 内容不足不需要滚动
      if (scrollEl.scrollWidth <= scrollEl.clientWidth) return;

      // 确保从最左边开始
      scrollEl.scrollLeft = 0;

      this.scrollTimers[tableName] = setInterval(() => {
        const el = this.$refs[`scroll_${tableName}`];
        if (!el) return;

        // 内容不足时停止
        if (el.scrollWidth <= el.clientWidth) {
          this.stopAutoScroll(tableName);
          return;
        }

        const maxScrollLeft = el.scrollWidth - el.clientWidth;
        let currentPos = el.scrollLeft;

        // 向右滚动
        currentPos += this.scrollSpeed;

        // 到达或超过最右边，停止滚动
        if (currentPos >= maxScrollLeft) {
          currentPos = maxScrollLeft;
          el.scrollLeft = currentPos;
          this.stopAutoScroll(tableName); // 到达后停止，不循环
          return;
        }

        el.scrollLeft = currentPos;
      }, 16); // 约60fps
    },

    stopAutoScroll(tableName) {
      if (this.scrollTimers[tableName]) {
        clearInterval(this.scrollTimers[tableName]);
        delete this.scrollTimers[tableName];
      }
    },

    clearAllScrollTimers() {
      Object.keys(this.scrollTimers).forEach((key) => {
        clearInterval(this.scrollTimers[key]);
      });
      this.scrollTimers = {};
    },

    // ========== 翻页相关方法（使用 num）==========
    startAutoPage(tab) {
      this.stopAutoPage(tab);
      const ms = this.num * 1000;
      if (!ms || ms <= 0) return;

      this.autoTimers[tab.name] = setInterval(async () => {
        const maxPage = Math.max(
          1,
          Math.ceil((this.total[tab.name] || 0) / this.pageSize)
        );
        const currentPage = this.pageNo[tab.name] || 1;
        const nextPage = currentPage < maxPage ? currentPage + 1 : 1;

        this.$set(this.pageNo, tab.name, nextPage);
        await this.loadTableData(tab); // 加载数据时会自动重置滚动
      }, ms);
    },

    stopAutoPage(tab) {
      if (this.autoTimers[tab.name]) {
        clearInterval(this.autoTimers[tab.name]);
        delete this.autoTimers[tab.name];
      }
    },

    startAllAutoPage() {
      this.tabs.forEach((tab) => this.startAutoPage(tab));
    },

    clearAllTimers() {
      Object.keys(this.autoTimers).forEach((key) => {
        clearInterval(this.autoTimers[key]);
      });
      this.autoTimers = {};
    },

    restartAllAutoPage() {
      this.clearAllTimers();
      this.startAllAutoPage();
    },

    formatTimestamp(val) {
      if (!val) return "";
      const timestamp = String(val).length === 10 ? val * 1000 : val;
      const d = new Date(Number(timestamp));
      if (isNaN(d.getTime())) return val;
      const pad = (n) => String(n).padStart(2, "0");
      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
    },

    rowStyle({ row, rowIndex }) {
      if (row.colorControl) {
        return { backgroundColor: row.colorControl };
      }
      return {};
    },

    tableRowClassName({ row, rowIndex }) {
      if (row.colorControl) return "has-color-control";
      return rowIndex % 2 === 0 ? "even-row" : "odd-row";
    },

    cellStyle({ row, column, rowIndex, columnIndex }) {
      const baseStyle = {
        padding: "1px",
        fontSize: "11px",
        whiteSpace: "nowrap",
        overflow: "hidden",
        textOverflow: "ellipsis",
        height: "12px",
        lineHeight: "10px",
        color: "#fff",
      };

      if (row.colorControl) {
        return { ...baseStyle, backgroundColor: row.colorControl };
      }

      const bgColor = rowIndex % 2 === 0 ? "#0a1e44" : "#132a55";
      return { ...baseStyle, backgroundColor: bgColor };
    },

    headerCellStyle() {
      return {
        padding: "1px",
        fontSize: "11px",
        fontWeight: 600,
        backgroundColor: "#071b38",
        color: "#fff",
        whiteSpace: "nowrap",
        overflow: "hidden",
        textOverflow: "ellipsis",
        height: "14px",
        lineHeight: "12px",
      };
    },

    handleChange(v) {
      const n = Number(v);
      if (isNaN(n) || n < 0) {
        this.$message.warning("请输入≥0的整数，输入0关闭刷新");
        this.num = 10;
        return;
      }
      this.num = n;
    },

    enterFullScreen() {
      setTimeout(() => {
        if (screenfull.isEnabled) {
          screenfull.toggle();
        }
      }, 1000);
    },
  },
};
</script>
<style scoped>
.app-container {
  background: -webkit-radial-gradient(
    50% 35%,
    farthest-corner,
    #034f8e,
    #034987,
    #02366d,
    #002353
  );
  height: 100vh;
  width: 100vw;
  padding: 6px 8px;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

.control-bar {
  flex-shrink: 0;
  height: 28px;
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.control-label {
  color: white;
  font-weight: bold;
  margin-right: 8px;
  font-size: 12px;
  white-space: nowrap;
}

.refresh-input {
  width: 160px !important;
}

.refresh-input ::v-deep .el-input__inner {
  height: 24px;
  line-height: 24px;
  padding: 0 8px;
  font-size: 12px;
}

.header-section {
  flex-shrink: 0;
  height: 32px;
  margin-bottom: 6px;
}

.content-section {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 6px;
  height: 100%;
  width: 100%;
}

.grid-item {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.grid-item:nth-child(4) {
  grid-column: 1 / 2;
  justify-self: end;
  width: 95%;
}

.grid-item:nth-child(5) {
  grid-column: 2 / 3;
  justify-self: start;
  width: 95%;
}

.list-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.list-card ::v-deep .el-card__header {
  color: #8adfec;
  font-weight: 600;
  background-color: #192849;
  padding: 4px 8px;
  height: 26px;
  line-height: 18px;
  font-size: 12px;
  flex-shrink: 0;
}

.list-card ::v-deep .el-card__body {
  flex: 1;
  padding: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ========= 滚动外层容器 - 横向滚动条在这里 ========= */
.scroll-wrapper {
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  /* 隐藏默认滚动条，使用自定义样式 */
  scrollbar-width: thin;
  scrollbar-color: #1a2e5a #0a1e44;
}

/* Webkit 滚动条样式 */
.scroll-wrapper::-webkit-scrollbar {
  height: 4px;
}

.scroll-wrapper::-webkit-scrollbar-track {
  background: #0a1e44;
  border-radius: 2px;
}

.scroll-wrapper::-webkit-scrollbar-thumb {
  background: #1a2e5a;
  border-radius: 2px;
}

.scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background: #2a3e6a;
}

/* 表格包装层 - 宽度撑开 */
.table-wrapper {
  min-width: 100%;
  width: max-content;
  display: flex;
  flex-direction: column;
}

.page-indicator {
  text-align: center;
  color: #8adfec;
  font-size: 11px;
  padding: 1px 0;
  background-color: #192849;
  border-top: 1px solid #1a2e5a;
  flex-shrink: 0;
}

::v-deep .el-input__inner {
  background: transparent !important;
  border: 1px solid #034f8e;
  color: #fff;
}

::v-deep .el-input__inner::placeholder {
  color: #ccc;
  font-size: 12px;
}

::v-deep .el-card {
  background-color: #0a1e44 !important;
  border: 1px solid #1a2e5a !important;
  box-shadow: none !important;
  border-radius: 2px !important;
  padding: 0 !important;
  height: 100%;
  display: flex;
  flex-direction: column;
}

::v-deep .el-card__header {
  border-bottom: 1px solid #1a2e5a;
}

/* ========= 表格样式 ========= */
::v-deep .auto-fit-table {
  width: auto !important;
  min-width: 100%;
  font-size: 11px !important;
  background-color: #0a1e44 !important;
}

/* 关键：关闭表格内部滚动，让外层容器控制滚动 */
::v-deep .auto-fit-table .el-table__body-wrapper,
::v-deep .auto-fit-table .el-table__header-wrapper {
  overflow: visible !important;
  background-color: #0a1e44 !important;
}

::v-deep .auto-fit-table .el-table__body-wrapper::-webkit-scrollbar {
  display: none;
}

::v-deep .auto-fit-table .el-table__empty-block {
  background-color: #0a1e44 !important;
  min-height: 60px;
}

::v-deep .auto-fit-table .el-table__empty-text {
  color: #8adfec !important;
  font-size: 11px;
  line-height: 60px;
}

::v-deep .auto-fit-table .el-table__body,
::v-deep .auto-fit-table .el-table__header {
  width: auto !important;
  table-layout: auto !important;
  background-color: #0a1e44 !important;
}

/* 表头背景色 */
::v-deep .auto-fit-table .el-table__header th {
  padding: 0 !important;
  font-size: 11px !important;
  height: auto !important;
  line-height: 1.1;
  font-weight: 600;
  background-color: #071b38 !important;
  color: #fff !important;
}

/* 单元格基础背景色 */
::v-deep .auto-fit-table .el-table__body td {
  padding: 0 !important;
  font-size: 11px !important;
  height: auto !important;
  line-height: 1.1;
  color: #fff !important;
}

/* 有colorControl时的行 */
::v-deep .auto-fit-table .has-color-control td {
  background-color: inherit !important;
}

/* 斑马纹 */
::v-deep .auto-fit-table .even-row td {
  background-color: #0a1e44 !important;
}

::v-deep .auto-fit-table .odd-row td {
  background-color: #132a55 !important;
}

/* 鼠标悬停 */
::v-deep .auto-fit-table .has-color-control:hover td {
  background-color: inherit !important;
}

::v-deep .auto-fit-table .even-row:hover td,
::v-deep .auto-fit-table .odd-row:hover td {
  background-color: rgba(138, 223, 236, 0.2) !important;
}

::v-deep .auto-fit-table.el-table--border,
::v-deep .auto-fit-table.el-table--border th,
::v-deep .auto-fit-table.el-table--border td {
  border-color: #1a2e5a !important;
  border-width: 1px !important;
}

::v-deep .auto-fit-table .cell {
  font-size: 11px !important;
  line-height: 1.1 !important;
  padding: 0 1px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  background-color: transparent !important;
}

::v-deep .auto-fit-table td .cell,
::v-deep .auto-fit-table th .cell {
  padding-left: 1px !important;
  padding-right: 1px !important;
}

::v-deep .el-loading-mask {
  background-color: rgba(10, 30, 68, 0.8) !important;
}
</style>
