<template>
  <div id="topDiv">
    <van-nav-bar
      title="查询结果"
      left-text=""
      left-arrow
      @click-left="$router.go(-1)"
      class="nav-bar"
    >
      <template #right> ？ </template>
    </van-nav-bar>
  </div>

  <div id="centerDiv">
    <div class="scan-title">
      <p class="title-text">扫描日期范围：</p>
      <p>{{ time1 }}</p>
      <p class="range-separator">至</p>
      <p>{{ time2 }}</p>
    </div>


    <van-skeleton v-if="!isLoaded" title row="3" />

    <div v-else>
      <van-tabs
        v-model:active="active"
        @change="handleTabChange"
        lazy-render
      >
        <van-tab title="件码列表" name="a">
          <div class="list-header">
            <p><span>件码信息</span></p>
            <p class="total-count">共 {{ (data.piece || []).length }} 条</p>
          </div>
          <div class="list-content">
            <div
              v-for="(item, i) in (data.piece || [])"
              :key="`piece-${i}`"
              class="list-item"
            >
              <p class="colors item-row item-header-row">
                <span> 件码{{ i + 1 }} </span>
                <span>{{ item.relationTime || '-' }}</span>
              </p>
              <p class="item-row item-main-row">
                <span class="Conts"> {{ formatParentCode(item.qrCode) }} </span>
                <span class="colors">条码数：50 </span>
              </p>
              <p class="item-row item-footer-row">
                <span class="colors">机台号：{{ item.barPieceProductLineDeviceName || '-' }} </span>
              </p>
            </div>
          </div>
        </van-tab>
        <van-tab title="条码列表" name="b">
          <div class="list-header">
            <p><span>条码信息</span></p>
            <p class="total-count">共 {{ (data.bar || []).length }} 条</p>
          </div>
          <div class="list-content">
            <div
              v-for="(item, i) in (data.bar || [])"
              :key="`bar-${i}`"
              class="list-item"
            >
              <p class="colors item-row item-header-row">
                <span> 条码{{ i + 1 }} </span>
                <span>{{ item.relationTime || '-' }}</span>
              </p>
              <p class="item-row item-main-row">
                <!-- 修改：使用formatParentCode处理条码 -->
                <span class="Conts"> {{ formatParentCode(item.qrCode) }} </span>
                <span class="colors">盒码数：10 </span>
              </p>
              <p class="item-row item-footer-row">
                <span class="colors">机台号：{{ item.boxBarProductLineDeviceName || '-' }} </span>
              </p>
            </div>
          </div>
        </van-tab>
        <van-tab title="盒码列表" name="c">
          <div class="list-header">
            <p><span>盒码信息</span></p>
            <p class="total-count">共 {{ (data.box || []).length }} 条</p>
          </div>
          <div class="list-content">
            <div
              v-for="(item, i) in (data.box || [])"
              :key="`box-${i}`"
              class="list-item"
            >
              <p class="colors item-row item-header-row">
                <span> 盒码{{ i + 1 }} </span>
                <span>{{ item.relationTime || '-' }}</span>
              </p>
              <p class="item-row item-main-row">
                <!-- 修改：使用formatParentCode处理盒码 -->
                <span class="Conts"> {{ formatParentCode(item.qrCode) }} </span>
                <span class="colors">盒码数：50 </span>
              </p>
              <p class="item-row item-footer-row">
                <span class="colors">机台号：{{ item.boxBarProductLineDeviceName || '-' }} </span>
              </p>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>

    <div class="btn-container">
      <van-button plain @click="gousearch()" class="query-btn" type="success">
        <van-icon name="scan" />
        继续扫码
      </van-button>
    </div>
  </div>
</template>

<script>
import {
  NavBar,
  Button,
  Icon,
  Tabs,
  Tab,
  Skeleton
} from "vant";
import { qrcodeMap } from "@/api/qrcode/scanCode/scanCode";

export default {
  name: "QueryResult",
  components: {
    [NavBar.name]: NavBar,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [Skeleton.name]: Skeleton
  },
  created() {
    // 初始化参数
    const { time1, time2, one, two } = this.$route.query || {};
    this.time1 = time1 || "";
    this.time2 = time2 || "";
    this.queryParams = { one, two };

    // 调用接口
    this.qrcodeMap();
  },
  mounted() {
    // 延迟执行DOM相关操作，避免渲染未完成
    this.$nextTick(() => {
      // this.$nativeQRCode.setStatusBarColor("#006953", "white");
    });
  },
  data() {
    return {
      data: {  // 初始化数据结构，避免undefined
        piece: [],
        bar: [],
        box: []
      },
      active: "a",
      time1: "",
      time2: "",
      queryParams: {},
      isLoaded: false
    };
  },
  methods: {
    // 处理件码显示的方法（扩展为通用的码值截取方法）
    formatParentCode(code) {
      if (!code || typeof code !== 'string') {
        return code || '';
      }
      if (code.length > 35) {
        return '...' + code.slice(-20);
      }
      return code;
    },
    // 接口请求方法
    async qrcodeMap() {  // 修改为async/await
      try {
        const response = await qrcodeMap(this.queryParams);
        if (response.code === 200) {
          // 确保数据结构完整
          this.data = {
            piece: response.data.piece || [],
            bar: response.data.bar || [],
            box: response.data.box || []
          };
        }
      } catch (error) {
        console.error("接口请求失败：", error);
        // 异常时仍保证数据结构
        this.data = { piece: [], bar: [], box: [] };
      } finally {
        // 无论成功失败，都标记为加载完成
        this.isLoaded = true;
      }
    },
    // tab切换处理
    handleTabChange() {
      // 切换tab时触发nextTick，确保DOM渲染完成
      this.$nextTick(() => {
        // 可以在这里处理tab切换后的DOM操作
      });
    },
    // 跳转扫码页面
    gousearch() {
      this.$router.push({ path: "/ScanBarcodes" });
    }
  }
};
</script>

<style scoped>
:deep(.van-nav-bar__right) {
  font-size: 0.45rem;
  color: #ffffff;
}
#topDiv {
  position: relative;
}
#centerDiv {
  /* min-height: calc(100vh - 44px);   */
    height: 94%;
  background: #ffffff;
}
:deep(.erricon) {
  font-size: 0.35rem;
  background: #f3f4f6;
  margin-left: 55%;
  box-sizing: border-box;
  width: 0.65rem;
  height: 0.65rem;
  text-align: center;
  line-height: 0.65rem;
  border-radius: 50%;
}
.Titles {
  font-size: 0.35rem;
  color: #979797;
}
.Conts {
  font-size: 0.35rem;
  word-wrap: break-word;
  white-space: normal;
}
.nav-bar {
  background-color: rgba(0, 105, 83, 1);
}
.scan-title {
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0.3rem;
  font-size: 0.35rem;
  color: #979797;
}
.success-icon {
  margin-left: 0.15rem;
  margin-right: 0.25rem;
}
.title-text {
  margin: 0;
}
.btn-container {
width: 94%;
    margin: auto;
    margin-top: 0.2rem;
}
.query-btn {
  width: 100%;
  margin: auto;
  display: block;
  border-radius: 0.1rem;
  height: 1.2rem;
  font-size: 0.4rem;
}
:deep(.van-tabs) {
  padding: 0 0.4rem;
}
:deep(.van-tabs__wrap) {
  height: 1rem;
  border-radius: 0.2rem;
  overflow: hidden;
}
:deep(.van-tab__text) {
  font-size: 0.45rem;
  display: block;
  height: 100%;
  line-height: 1rem;
}
:deep(.van-tabs__nav) {
  background: #f3f4f6;
}
:deep(.van-tabs__line) {
  display: none;
}
:deep(.van-tab--active) {
  background: #07c160;
  color: #ffffff;
  border-radius: 0.2rem;
}
.colors {
  color: #979797;
}
.range-separator {
  margin: 0 0.15rem;
}
.list-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.35rem;
  margin-top: 0.55rem;
}
.total-count {
  color: #979797;
  margin: 0;
}
.list-content {
  margin-top: 0.3rem;
  max-height: 11rem;
  width: 100%;
  overflow-y: auto;
}
.list-item {
  font-size: 0.35rem;
  margin-bottom: 0.5rem;
}
.item-row {
  display: flex;
  justify-content: space-between;
}
.item-header-row {
  margin-top: 0.2rem;
  display: flex;
  align-items: center;
}
.item-main-row {
  margin: 0.2rem 0;
  display: flex;
  align-items: center;
}
.qr-code-text {
  font-size: 0.4rem;
}
</style>
