<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">
      <van-icon name="success" class="success-icon" color="#009688" />
      <p class="title-text">已扫描盒码</p>
    </div>
    <div class="list-container">
      <div
        v-for="(item, i) in data"
        class="item-card"
        :key="item.id + i"
      >
        <p class="item-header">
          <span class="index-badge">{{ i + 1 }}</span>
          <span class="item-num">{{ item.num }}</span>
          <van-icon name="cross" class="erricon" @click="deleteItem(i)" />
        </p>
        <p class="info-row">
          <span class="Titles">盒码值：</span>
          <span class="Conts">{{ formatQrCode(item.qrCode) }}</span>
        </p>

        <p class="info-row">
          <span class="Titles">机台号：</span>
          <span class="Conts">{{ item.boxBarProductLineDeviceCode }}</span>
        </p>
        <p class="info-row">
          <span class="Titles">关联时间：</span>
          <span class="Conts">{{ item.generateTime }}</span>
        </p>
      </div>
    </div>
    <div class="btn-container">
      <van-button @click="gousearch()" class="query-btn" type="success">
        <van-icon name="search" />
        查询关联件码
      </van-button>
    </div>
  </div>
</template>

<script>
import {Button, Cell, CellGroup, Col, Dialog, Icon, List, NavBar, Notify, Row, Sticky,} from "vant";
import {queryQrCode} from "@/api/qrcode/scanCode/scanCode";
import {getStringByTwo} from "@/utils/transition";
import {createWebHistory as $router} from "vue-router";
import ScanOverlay from "@/components/overlay/scanOverlay/ScanOverlay";

export default {
  name: "",
  components: {
    [NavBar.name]: NavBar,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [List.name]: List,
    [Button.name]: Button,
    [Dialog.Component.name]: Dialog.Component,
    [Sticky.name]: Sticky,
    [Col.name]: Col,
    [Row.name]: Row,
    [Icon.name]: Icon,
    [Notify.Component.name]: Notify.Component,
  },
  mounted() {
    this.$nativeQRCode.setCallBackFun((res) => {
      let qrCode = getStringByTwo(res)
      this.queryQrCode(qrCode);
    });
    ScanOverlay.show('请扫描二维码')
    // this.queryQrCode("HTTPS://Y2WM.CN/99.1000.1/AC1018057002R0AX2ZLRVEL4EKAQ40D9M");
    // setTimeout(()=>{
    //   this.queryQrCode("HTTPS://Y2WM.CN/99.1000.1/AC1018057002RZKUOKW5NJADMC7TXYK6R");
    // },5000)
  },
  data() {
    return {
      data: [],
    };
  },
  computed: {},
  methods: {
    // 新增方法：格式化盒码值
    formatQrCode(qrCode) {
      // 先判断是否为有效字符串
      if (!qrCode || typeof qrCode !== 'string') {
        return qrCode || '';
      }
      // 如果长度超过35位，截取最后10位并拼接...num
      if (qrCode.length > 35) {
        return '...' + qrCode.slice(-25);
      }
      // 否则返回原字符串
      return qrCode;
    },
    queryQrCode(qrCode) {
      if(qrCode!=null&&(qrCode.substring(qrCode.indexOf("AC")+2,qrCode.indexOf("AC")+4)!=10)){
        this.$message.warning('请扫盒码');
        return;
      }
      if(this.data!=null&&this.data.length===2){
        this.$message.warning('已扫描两个盒码，时间范围已确定');
      }
      let query = {
        qrCode: qrCode
      }
      queryQrCode(query).then(response => {
        if (response.code === 200) {
          this.data.push(response.data)
        }
      });
    },
    deleteItem(index) {
      this.data.splice(index, 1);
    },
    gousearch(){
      if (!Array.isArray(this.data) || this.data.length < 2) {
        this.$message.warning('请扫描两条盒码');
        return;
      }

      const [first, second] = this.data;

      //判段字段是否存在（防止字段为 null / undefined）
      if (!first.generateTime || !second.generateTime || !first.qrCode || !second.qrCode) {
        this.$message.warning('数据不完整，无法查询');
        return;
      }
      const formatDate = (time) => {
        const d = new Date(time);
        const y = d.getFullYear();
        const m = String(d.getMonth() + 1).padStart(2, '0');
        const day = String(d.getDate()).padStart(2, '0');
        const hours = String(d.getHours()).padStart(2, '0');
        const minutes = String(d.getMinutes()).padStart(2, '0');
        const seconds = String(d.getSeconds()).padStart(2, '0');
        return `${y}-${m}-${day} ${hours}:${minutes}:${seconds}`;
      };

      this.$router.push({
        path: '/QueryResults',
        query: {
          time1: formatDate(first.generateTime),
          time2: formatDate(second.generateTime),
          one: first.qrCode,
          two: second.qrCode
        }
      });
    }
  },
};
</script>

<style scoped>
:deep(.van-nav-bar__right) {
  font-size: 0.45rem;
  color: #ffffff;
}
#centerDiv {
  height: 93%;
}
:deep(.erricon) {
  font-size: 0.35rem;
  background: #f3f4f6;
  margin-left: 75%;
  box-sizing: border-box;
  width: 0.65rem;
  height: 0.65rem;
  text-align: center;
  line-height: 0.65rem;
  border-radius: 50%;
}
.Titles{
  font-size: .35rem;
  color: #979797;
}
.Conts{
  font-size: .35rem;
  word-wrap: break-word;
  white-space: normal;
}
.nav-bar {
  background-color: rgba(0, 105, 83, 1);
}
.scan-title {
  width: 100%;
  height: 8%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 0.3rem;
  font-size: 0.45rem;
}
.success-icon {
  margin-left: .15rem;
  margin-right: .25rem;
}
.title-text {
  margin: 0;
}
.list-container {
  width: 100%;
  height: 70%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow: auto;
}
.item-card {
  width: 92%;
  height: 38%;
  border: 5px solid #009688;
  border-radius: 3%;
  margin-bottom: 0.2rem;
  box-sizing: border-box;
  padding: 0.35rem 0.3rem;
  background: #ffffff;
}
.item-header {
  display: flex;
  align-items: center;
  margin: 0;
}
.index-badge {
  color: #ffffff;
  background: #0e9b8e;
  border-radius: 50%;
  box-sizing: border-box;
  font-size: 0.4rem;
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  text-align: center;
  line-height: 0.55rem;
}
.item-num {
  font-size: 0.45rem;
  margin-left: 7%;
}
.info-row {
  margin: 0;
}
.btn-container {
  width: 100%;
  height: 20%;
}
.query-btn {
  width: 92%;
  margin: auto;
  display: block;
  border-radius: .1rem;
  height: 40%;
}
.conts {
  word-wrap: break-word;
  white-space: normal;
}
</style>