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

    <!-- 列表区域 - 3列2行Grid布局 -->
    <div class="content-section">
      <div class="grid-container">
        <!-- 已登记未质检列表 -->
        <div class="grid-item">
          <el-card header="已登记未质检列表" shadow="hover" class="list-card">
            <div ref="wrapper_preRollPass" 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="getIndexWidth()"
                  align="center"
                  label="序号"
                /> -->
                <el-table-column
                  prop="物料批次"
                  label="物料批次"
                  align="center"
                  :width="getColWidth('preRollPass')"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="采购订单"
                  label="采购订单"
                  align="center"
                  :width="getColWidth('preRollPass')"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="物料编码"
                  label="物料编码"
                  align="center"
                  :width="getColWidth('preRollPass')"
                />
                <el-table-column
                  prop="物料名称"
                  label="物料名称"
                  align="center"
                  :width="getColWidth('preRollPass')"
                />
                <el-table-column
                  prop="到货数量"
                  label="到货数量"
                  align="center"
                  :width="getColWidth('preRollPass')"
                />
                <el-table-column
                  prop="供应商名称"
                  label="供应商名称"
                  align="center"
                  :width="getColWidth('preRollPass')"
                />
                <!-- <el-table-column
                  prop="送货单批次"
                  label="送货单批次"
                  align="center"
                  :width="getColWidth('preRollPass')"
                /> -->
              </el-table>
              <div v-if="num > 0" class="page-indicator">
                {{ pageNo.preRollPass || 1 }} /
                {{
                  Math.max(1, Math.ceil((total.preRollPass || 0) / pageSize))
                }}
              </div>
            </div>
          </el-card>
        </div>

        <!-- 已QC通过待入库列表 -->
        <div class="grid-item">
          <el-card header="已QC通过待入库列表" shadow="hover" class="list-card">
            <div ref="wrapper_mergedPreRollPass" 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="getIndexWidth()"
                  align="center"
                  label="序号"
                /> -->
                <el-table-column
                  prop="物料批次"
                  label="物料批次"
                  align="center"
                  :width="getColWidth('mergedPreRollPass')"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="采购订单"
                  label="采购订单"
                  align="center"
                  :width="getColWidth('mergedPreRollPass')"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="物料编码"
                  label="物料编码"
                  align="center"
                  :width="getColWidth('mergedPreRollPass')"
                />
                <el-table-column
                  prop="物料名称"
                  label="物料名称"
                  align="center"
                  :width="getColWidth('mergedPreRollPass')"
                />
                <!-- <el-table-column
                  prop="规格"
                  label="规格"
                  align="center"
                  :width="getColWidth('mergedPreRollPass')"
                /> -->
                <el-table-column
                  prop="数量"
                  label="数量"
                  align="center"
                  :width="getColWidth('mergedPreRollPass')"
                />
                <!-- <el-table-column
                  prop="供应商编码"
                  label="供应商编码"
                  align="center"
                  :width="getColWidth('mergedPreRollPass')"
                /> -->
                <el-table-column
                  prop="供应商名称"
                  label="供应商名称"
                  align="center"
                  :width="getColWidth('mergedPreRollPass')"
                />
              </el-table>
              <div v-if="num > 0" class="page-indicator">
                {{ pageNo.mergedPreRollPass || 1 }} /
                {{
                  Math.max(
                    1,
                    Math.ceil((total.mergedPreRollPass || 0) / pageSize)
                  )
                }}
              </div>
            </div>
          </el-card>
        </div>

        <!-- 每日入库信息列表 -->
        <div class="grid-item">
          <el-card header="每日入库信息列表" shadow="hover" class="list-card">
            <div ref="wrapper_rollUp" 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="getIndexWidth()"
                  align="center"
                  label="序号"
                /> -->
                <el-table-column
                  prop="业务类型"
                  label="业务类型"
                  align="center"
                  :width="getColWidth('rollUp')"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="物料编码"
                  label="物料编码"
                  align="center"
                  :width="getColWidth('rollUp')"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="物料名称"
                  label="物料名称"
                  align="center"
                  :width="getColWidth('rollUp')"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="入库数量"
                  label="入库数量"
                  align="center"
                  :width="getColWidth('rollUp')"
                />
                <el-table-column
                  prop="入库时间"
                  label="入库时间"
                  align="center"
                  :width="getColWidth('rollUp')"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">{{
                    formatTimestamp(scope.row["入库时间"])
                  }}</template>
                </el-table-column>
                <el-table-column
                  prop="审核人"
                  label="审核人"
                  align="center"
                  :width="getColWidth('rollUp')"
                />
              </el-table>
              <div v-if="num > 0" class="page-indicator">
                {{ pageNo.rollUp || 1 }} /
                {{ Math.max(1, Math.ceil((total.rollUp || 0) / pageSize)) }}
              </div>
            </div>
          </el-card>
        </div>

        <!-- 每日出库信息列表 -->
        <div class="grid-item">
          <el-card header="每日出库信息列表" shadow="hover" class="list-card">
            <div ref="wrapper_finalPass" 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="getIndexWidth()"
                  align="center"
                  label="序号"
                /> -->
                <el-table-column
                  prop="业务类型"
                  label="业务类型"
                  align="center"
                  :width="getColWidth('finalPass')"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="物料编码"
                  label="物料编码"
                  align="center"
                  :width="getColWidth('finalPass')"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="物料名称"
                  label="物料名称"
                  align="center"
                  :width="getColWidth('finalPass')"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="出库数量"
                  label="出库数量"
                  align="center"
                  :width="getColWidth('finalPass')"
                />
                <el-table-column
                  prop="出库时间"
                  label="出库时间"
                  align="center"
                  :width="getColWidth('finalPass')"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">{{
                    formatTimestamp(scope.row["出库时间"])
                  }}</template>
                </el-table-column>
                <el-table-column
                  prop="审核人"
                  label="审核人"
                  align="center"
                  :width="getColWidth('finalPass')"
                />
              </el-table>
              <div v-if="num > 0" class="page-indicator">
                {{ pageNo.finalPass || 1 }} /
                {{ Math.max(1, Math.ceil((total.finalPass || 0) / pageSize)) }}
              </div>
            </div>
          </el-card>
        </div>

        <!-- 已入库原材料不良列表 -->
        <div class="grid-item">
          <el-card
            header="已入库原材料不良列表"
            shadow="hover"
            class="list-card"
          >
            <div ref="wrapper_slitting" 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="getIndexWidth()"
                  align="center"
                  label="序号"
                /> -->
                <el-table-column
                  prop="申请单号"
                  label="申请单号"
                  align="center"
                  :width="getColWidth('slitting')"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="业务类型"
                  label="业务类型"
                  align="center"
                  :width="getColWidth('slitting')"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="物料编码"
                  label="物料编码"
                  align="center"
                  :width="getColWidth('slitting')"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="物料名称"
                  label="物料名称"
                  align="center"
                  :width="getColWidth('slitting')"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="入库数量"
                  label="入库数量"
                  align="center"
                  :width="getColWidth('slitting')"
                />
                <el-table-column
                  prop="入库时间"
                  label="入库时间"
                  align="center"
                  :width="getColWidth('slitting')"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">{{
                    formatTimestamp(scope.row["入库时间"])
                  }}</template>
                </el-table-column>
                <el-table-column
                  prop="审核人"
                  label="审核人"
                  align="center"
                  :width="getColWidth('slitting')"
                />
              </el-table>
              <div v-if="num > 0" class="page-indicator">
                {{ pageNo.slitting || 1 }} /
                {{ Math.max(1, Math.ceil((total.slitting || 0) / pageSize)) }}
              </div>
            </div>
          </el-card>
        </div>

        <!-- 库存呆滞料查询 -->
        <div class="grid-item">
          <el-card header="库存呆滞料查询" shadow="hover" class="list-card">
            <div ref="wrapper_annealing" class="table-wrapper">
              <el-table
                v-loading="loading.annealing"
                :data="tableData.annealing"
                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="getIndexWidth()"
                  align="center"
                  label="序号"
                /> -->
                <el-table-column
                  prop="物料编码"
                  label="物料编码"
                  align="center"
                  :width="getColWidth('annealing')"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="物料名称"
                  label="物料名称"
                  align="center"
                  :width="getColWidth('annealing')"
                  show-overflow-tooltip
                />
                <!-- <el-table-column
                  prop="规格型号"
                  label="规格型号"
                  align="center"
                  :width="getColWidth('annealing')"
                /> -->
                <el-table-column
                  prop="在库数量"
                  label="在库数量"
                  align="center"
                  :width="getColWidth('annealing')"
                />
                <el-table-column
                  prop="批次号"
                  label="批次号"
                  align="center"
                  :width="getColWidth('annealing')"
                />
                <el-table-column
                  prop="库存天数"
                  label="库存天数"
                  align="center"
                  :width="getColWidth('annealing')"
                />
                <el-table-column
                  prop="入库日期"
                  label="入库日期"
                  align="center"
                  :width="getColWidth('annealing')"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">{{
                    formatTimestamp(scope.row["入库日期"])
                  }}</template>
                </el-table-column>
              </el-table>
              <div v-if="num > 0" class="page-indicator">
                {{ pageNo.annealing || 1 }} /
                {{ Math.max(1, Math.ceil((total.annealing || 0) / pageSize)) }}
              </div>
            </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: 10,
      pageSize: 5,

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

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

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

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

      autoTimers: {},
      resizeTimer: null,
      wrapperWidths: {},

      // 每个表格的列数（序号列+数据列）- 3列2行布局，空间较紧
      colCounts: {
        preRollPass: 8, // 1+7
        mergedPreRollPass: 9, // 1+8
        rollUp: 7, // 1+6
        finalPass: 7, // 1+6
        slitting: 8, // 1+7
        annealing: 8, // 1+7
      },

      tabs: [
        { name: "preRollPass", documentId: "2005460172242325506" },
        { name: "mergedPreRollPass", documentId: "2005466606724091905" },
        { name: "rollUp", documentId: "2005468337855959041" },
        { name: "finalPass", documentId: "2005468804044460033" },
        { name: "slitting", documentId: "2005487894289092609" },
        { name: "annealing", documentId: "2005521571224129538" },
      ],
    };
  },
  watch: {
    num() {
      this.restartAllAutoPage();
    },
  },
  mounted() {
    this.init();
    this.enterFullScreen();
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    this.clearAllTimers();
    window.removeEventListener("resize", this.handleResize);
    clearTimeout(this.resizeTimer);
  },
  methods: {
    async init() {
      this.$nextTick(() => {
        this.updateWrapperWidths();
      });

      for (const tab of this.tabs) {
        await this.loadTableData(tab);
      }
      this.startAllAutoPage();
    },

    updateWrapperWidths() {
      this.tabs.forEach((tab) => {
        const wrapper = this.$refs[`wrapper_${tab.name}`];
        if (wrapper) {
          const rect = wrapper.getBoundingClientRect();
          this.$set(this.wrapperWidths, tab.name, Math.floor(rect.width));
        }
      });
    },

    getIndexWidth() {
      return 25;
    },

    getColWidth(tableName) {
      let containerWidth = this.wrapperWidths[tableName];

      if (!containerWidth) {
        const wrapper = this.$refs[`wrapper_${tableName}`];
        if (wrapper) {
          const rect = wrapper.getBoundingClientRect();
          containerWidth = Math.floor(rect.width);
          this.$set(this.wrapperWidths, tableName, containerWidth);
        } else {
          // 3列2行布局，父容器950，每列约300，减去padding和边框
          containerWidth = 280;
        }
      }

      const colCount = this.colCounts[tableName] || 7;
      const indexWidth = this.getIndexWidth();
      const borderWidth = colCount * 2;
      const availableWidth = containerWidth - indexWidth - borderWidth - 4;
      const dataColCount = colCount - 1;
      const avgWidth = Math.floor(availableWidth / dataColCount);

      // 3列布局空间较紧，最小宽度35px
      return Math.max(35, avgWidth);
    },

    handleResize() {
      clearTimeout(this.resizeTimer);
      this.resizeTimer = setTimeout(() => {
        this.updateWrapperWidths();
        this.$forceUpdate();
      }, 100);
    },

    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(() => {
          this.updateWrapperWidths();
        });
      } catch (error) {
        console.error("加载数据失败:", error);
        this.$set(this.tableData, tab.name, []);
      } finally {
        this.$set(this.loading, tab.name, false);
      }
    },

    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())}`;
    },

    // 行样式 - 优先使用后端返回的colorControl
    rowStyle({ row, rowIndex }) {
      if (row.colorControl) {
        return {
          backgroundColor: row.colorControl,
        };
      }
      return {};
    },

    // 行类名 - 用于CSS选择器和斑马纹
    tableRowClassName({ row, rowIndex }) {
      if (row.colorControl) {
        return "has-color-control";
      }
      return rowIndex % 2 === 0 ? "even-row" : "odd-row";
    },

    // 单元格样式 - 优先使用后端colorControl，否则斑马纹
    cellStyle({ row, column, rowIndex, columnIndex }) {
      const baseStyle = {
        padding: "1px",
        fontSize: "3px",
        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: "3px",
        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;
}

/* ========== 3列2行布局 ========== */
.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;
}

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

.table-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.page-indicator {
  text-align: center;
  color: #8adfec;
  font-size: 3px;
  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: 100% !important;
  flex: 1;
  font-size: 3px !important;
  background-color: #0a1e44 !important;
}

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

/* 空数据提示样式 */
::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: 3px;
  line-height: 60px;
}

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

/* 表头背景色 */
::v-deep .auto-fit-table .el-table__header th {
  padding: 0 !important;
  font-size: 3px !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: 3px !important;
  height: auto !important;
  line-height: 1.1;
  color: #fff !important;
}

/* 有colorControl时的行 - 背景色由inline style控制 */
::v-deep .auto-fit-table .has-color-control td {
  background-color: inherit !important;
}

/* 斑马纹 - 仅对没有colorControl的行生效 */
::v-deep .auto-fit-table .even-row td {
  background-color: #0a1e44 !important;
}

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

/* 鼠标悬停 - 有colorControl时不改变颜色 */
::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: 3px !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>
