<template>
  <div class="app-container">
    <span style="color: white; font-weight: bold; margin-right: 10px"
      >刷新时间（秒，输入0关闭刷新）</span
    >
    <el-input
      v-model="num"
      style="width: 240px"
      placeholder="请添加刷新时间"
      :min="1"
      type="number"
      @change="handleChange"
    />
    <el-row :gutter="10" type="flex">
      <!-- 标题 -->
      <el-col :span="24" class="charts-card chart-header">
        <DashboardHeader height="4vh" content="成品仓看板" />
      </el-col>
    </el-row>
    <!-- 固定两列，一行两个列表 -->
    <el-row :gutter="16" class="row-equal-height list-row">
      <el-col v-for="tab in tabs" :key="tab.name" :span="12">
        <el-card :header="tab.label" shadow="hover" class="list-card">
          <QueryNew
            :document-id="tab.documentId"
            class="query-container"
            :refresh-min="num"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import QueryNew from "@/views/bulletinBoard/components/queryNew.vue";
import DashboardHeader from "@/views/bulletinBoard/components/dashboardHeader.vue";
import screenfull from "screenfull";
export default {
  name: "TraceResult",
  components: { QueryNew, DashboardHeader },
  data() {
    return {
      num: 10,
      /* 配置
         name属性随便取值，与activeNames一致即可
      */
      tabs: [
        {
          label: "成品待入库列表",
          name: "preRollPass",
          documentId: "2005529291432038402",
        },
        {
          label: "每日入库信息列表",
          name: "mergedPreRollPass",
          documentId: "2005530261935263746",
        },
        {
          label: "每日出库信息列表",
          name: "rollUp",
          documentId: "2005530339370504194",
        },
        {
          label: "库存呆滞料列表",
          name: "finalPass",
          documentId: "2005530481674850305",
        },
        {
          label: "客退列表",
          name: "slitting",
          documentId: "2005540102913298433",
        },
        // {
        //   label: "库存呆滞料查询",
        //   name: "annealing",
        //   documentId: "2005521571224129538",
        // },
        // { label: "包装", name: "packaging", documentId: "1922203958663839745" },
        // { label: "入库", name: "storage", documentId: "1922209219612901378" },
      ],
      /* 默认全部展开 */
      activeNames: [
        "preRollPass",
        "mergedPreRollPass",
        "rollUp",
        "finalPass",
        "slitting",
        // "annealing",
        // "packaging",
        // "storage",
      ],
    };
  },
  mounted() {
    this.enterFullScreen(); // ② 挂载后调用
  },
  methods: {
    handleChange(v) {
      const n = Number(v);
      if (isNaN(n) || n < 0) {
        this.$message.warning("请输入≥0的整数，输入0关闭刷新");
        this.num = 10; // 恢复默认值
        return;
      }
      this.num = n;
    },
    enterFullScreen() {
      // 延迟 1 秒避免浏览器拦截
      setTimeout(() => {
        if (screenfull.isEnabled) {
          screenfull.toggle(); // 等同于 requestFullscreen
        }
      }, 1000);
    },
  },
};
</script>

<style scoped>
/* 统一整行高度 */
.row-equal-height {
  display: flex;
  flex-wrap: wrap;
}

/* 卡片容器：统一高度 */
.list-card {
  height: 100%;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}

/* 内容区撑满剩余高度 */
.query-container {
  flex: 1 1 auto;
  overflow: auto; /* 如果内容超出出现滚动条 */
}

/* 让卡片标题变蓝 */
::v-deep .el-card__header {
  color: #8adfec;
  font-weight: 600;
  background-color: #192849;
}

/* 深蓝径向渐变背景 */
.app-container {
  background: -webkit-radial-gradient(
    50% 35%,
    farthest-corner,
    #034f8e,
    #034987,
    #02366d,
    #002353
  );
  min-height: 100vh;
  width: 100%;
  padding: 1vh;
  margin: 0 !important;
}
.list-row {
  margin-top: 20px;
}
::v-deep .el-input__inner {
  background: transparent !important; /* 关键：完全透明 */
  border: 1px solid #034f8e; /* 保留你原来的边框 */
  color: #fff; /* 字色白色 */
}
::v-deep .el-input__inner::placeholder {
  color: #fff;
}
/* 整卡统一深蓝 */
::v-deep .el-card {
  background-color: #0a1e44 !important;
  border: 1px solid #1a2e5a !important;
  box-shadow: none !important; /* 去掉白色阴影 */
  border-radius: 0 !important; /* 去掉圆角 */
  padding: 0 !important; /* 去掉白边 */
}
</style>
