<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="code-info-card">
      <p class="card-title">件码信息</p>
      <div class="code-info-content">
        <p class="info-item">
          <span class="total-count">件码值：</span>
          <span>{{ this.data.qrCode }}</span>
        </p>
        <p class="info-item">
          <span class="total-count">生产时间：</span>
          <span>{{ this.data.relationTime }}</span>
        </p>
        <p class="info-item">
          <span class="total-count">机台号：</span>
          <span>{{ this.data.barPieceProductLineDeviceCode }}</span>
        </p>
        <p class="info-item">
          <span class="total-count">总条数：</span>
          <span>{{ this.data.num }}</span>
        </p>
      </div>
    </div>
    <div class="form-container from">
      <van-field
        v-model="fieldValue"
        is-link
        readonly
        placeholder="选择机台号"
        @click="showPicker = true"
      />
      <van-popup
        v-model:show="showPicker"
        destroy-on-close
        round
        position="bottom"
      >
        <van-picker
          :columns="uniqueNumColumns"
          :model-value="pickerValue"
          @cancel="showPicker = false"
          @confirm="textsch"
        />
      </van-popup>
      <van-button class="Resetbtn" @click="Reset()" type="default">重置</van-button>
    </div>
    <div class="barcode-container">
      <p class="barcode-title">
        <span>条码分布（5×5）</span>
        <span><van-icon name="passed" />{{ currentPage }}/2</span>
      </p>
      <div class="contbox">
        <van-icon class="btnleft" name="arrow-left" @click="switchPage(1)" />
        <van-icon class="btnright" name="arrow-left" @click="switchPage(2)" />
        <div class="list-wrapper">
          <div
            class="contboxitem"
            v-for="(item, index) in currentPageList"
            :key="item.BrandId || index"
            :class="{
              'selected-item': fieldValue && item.num === fieldValue,
              'scanned-item': isScannedItem(item, index)
            }"
          >
            <p class="item-index">{{ (currentPage - 1) * pageSize + index + 1 }}</p>
            <p class="item-code">{{ formatQrCode(item.qrCode) }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-container">
            <van-button plain @click="gousearch()" class="query-btn query-btns" type="success">
       <van-icon name="scan" />
        扫码确认
      </van-button>
      <van-button plain class="query-btn" type="default">
        <van-icon name="revoke" />
        返回件码列表
      </van-button>
    </div>
  </div>
</template>

<script>
import {
  NavBar,
  CellGroup,
  Cell,
  List,
  Button,
  Dialog,
  Sticky,
  Col,
  Row,
  Notify,
  Icon,
  Tab,
  Tabs,
  Picker,
  Popup,
  Field,
} from "vant";
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,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Field.name]: Field,
  },
  mounted() {
    // this.$nativeQRCode.setStatusBarColor("#006953", "white");
    // ScanOverlay.show('请扫描二维码')
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 25,
      fieldValue: "",
      pickerValue: "",
      showPicker: false,
      scanned: false,
      data: {
        qrCode: "xxxx",
        relationTime: "2024-08-29",
        barPieceProductLineDeviceCode: "BXBSB001",
        barPieceProductLineName: "盒条产线",
        num: "50条（2页）",
        childList: [
          {
            qrCode: "xxxx1",
            generateTime: "2024-08-29 15:00:00",
            boxBarProductLineDeviceCode: "BXBSB001",
            boxBarProductLineName: "盒条产线",
            codingDateStr: "2024-08-29",
            num: "JT221-5",
            BrandId: 1
          },
          {
            qrCode: "xxxx2",
            generateTime: "2024-08-29 15:00:01",
            boxBarProductLineDeviceCode: "BXBSB001",
            boxBarProductLineName: "盒条产线",
            codingDateStr: "2024-08-29",
            num: "JT221-5",
            BrandId: 2
          },
          {
            qrCode: "xxxx3",
            generateTime: "2024-08-29 15:00:02",
            boxBarProductLineDeviceCode: "BXBSB001",
            boxBarProductLineName: "盒条产线",
            codingDateStr: "2024-08-29",
            num: "JT221-5",
            BrandId: 3
          },
          {
            qrCode: "xxxx4",
            generateTime: "2024-08-29 15:00:03",
            boxBarProductLineDeviceCode: "BXBSB001",
            boxBarProductLineName: "盒条产线",
            codingDateStr: "2024-08-29",
            num: "JT221-5",
            BrandId: 4
          },
          {
            qrCode: "xxxx5",
            generateTime: "2024-08-29 15:00:04",
            boxBarProductLineDeviceCode: "BXBSB001",
            boxBarProductLineName: "盒条产线",
            codingDateStr: "2024-08-29",
            num: "JT221-5",
            BrandId: 5
          },
          {
            qrCode: "xxxx6",
            generateTime: "2024-08-29 15:00:05",
            boxBarProductLineDeviceCode: "BXBSB001",
            boxBarProductLineName: "盒条产线",
            codingDateStr: "2024-08-29",
            num: "JT221-5",
            BrandId: 6
          },
          {
            qrCode: "xxxx7",
            generateTime: "2024-08-29 15:00:06",
            boxBarProductLineDeviceCode: "BXBSB001",
            boxBarProductLineName: "盒条产线",
            codingDateStr: "2024-08-29",
            num: "JT221-5",
            BrandId: 7
          },
          {
            qrCode: "xxxx8",
            generateTime: "2024-08-29 15:00:07",
            boxBarProductLineDeviceCode: "BXBSB001",
            boxBarProductLineName: "盒条产线",
            codingDateStr: "2024-08-29",
            num: "JT221-5",
            BrandId: 8
          },
          {
            qrCode: "xxxx9",
            generateTime: "2024-08-29 15:00:08",
            boxBarProductLineDeviceCode: "BXBSB001",
            boxBarProductLineName: "盒条产线",
            codingDateStr: "2024-08-29",
            num: "JT221-5",
            BrandId: 9
          },
          {
            qrCode: "xxxx10",
            generateTime: "2024-08-29 15:00:09",
            boxBarProductLineDeviceCode: "BXBSB001",
            boxBarProductLineName: "盒条产线",
            codingDateStr: "2024-08-29",
            num: "JT221-5",
            BrandId: 10
          },
          {
            qrCode: "xxxx11",
            generateTime: "2024-08-29 15:00:10",
            boxBarProductLineDeviceCode: "BXBSB001",
            boxBarProductLineName: "盒条产线",
            codingDateStr: "2024-08-29",
            num: "JT221-5",
            BrandId: 11
          },
          {
            qrCode: "xxxx12",
            generateTime: "2024-08-29 15:00:11",
            boxBarProductLineDeviceCode: "BXBSB001",
            boxBarProductLineName: "盒条产线",
            codingDateStr: "2024-08-29",
            num: "JT221-5",
            BrandId: 12
          },
          {
            qrCode: "xxxx13",
            generateTime: "2024-08-29 15:00:12",
            boxBarProductLineDeviceCode: "BXBSB001",
            boxBarProductLineName: "盒条产线",
            codingDateStr: "2024-08-29",
            num: "JT221-5",
            BrandId: 13
          },
          {
            qrCode: "xxxx14",
            generateTime: "2024-08-29 15:00:13",
            boxBarProductLineDeviceCode: "BXBSB001",
            boxBarProductLineName: "盒条产线",
            codingDateStr: "2024-08-29",
            num: "JT221-5",
            BrandId: 14
          },
          {
            qrCode: "xxxx15",
            generateTime: "2024-08-29 15:00:14",
            boxBarProductLineDeviceCode: "BXBSB001",
            boxBarProductLineName: "盒条产线",
            codingDateStr: "2024-08-29",
            num: "JT221-5",
            BrandId: 15
          },
          {
            qrCode: "xxxx16",
            generateTime: "2024-08-29 15:00:15",
            boxBarProductLineDeviceCode: "BXBSB001",
            boxBarProductLineName: "盒条产线",
            codingDateStr: "2024-08-29",
            num: "JT221-5",
            BrandId: 16
          },
          {
            qrCode: "xxxx17",
            generateTime: "2024-08-29 15:00:16",
            boxBarProductLineDeviceCode: "BXBSB001",
            boxBarProductLineName: "盒条产线",
            codingDateStr: "2024-08-29",
            num: "JT221-5",
            BrandId: 17
          },
          {
            qrCode: "xxxx18",
            generateTime: "2024-08-29 15:00:17",
            boxBarProductLineDeviceCode: "BXBSB001",
            boxBarProductLineName: "盒条产线",
            codingDateStr: "2024-08-29",
            num: "JT221-5",
            BrandId: 18
          },
          {
            qrCode: "xxxx19",
            generateTime: "2024-08-29 15:00:18",
            boxBarProductLineDeviceCode: "BXBSB001",
            boxBarProductLineName: "盒条产线",
            codingDateStr: "2024-08-29",
            num: "JT221-5",
            BrandId: 19
          },
          {
            qrCode: "xxxx20",
            generateTime: "2024-08-29 15:00:19",
            boxBarProductLineDeviceCode: "BXBSB001",
            boxBarProductLineName: "盒条产线",
            codingDateStr: "2024-08-29",
            num: "JT221-5",
            BrandId: 20
          },
          {
            qrCode: "xxxx21",
            generateTime: "2024-08-29 15:00:20",
            boxBarProductLineDeviceCode: "BXBSB001",
            boxBarProductLineName: "盒条产线",
            codingDateStr: "2024-08-29",
            num: "JT221-5",
            BrandId: 21
          },
          {
            qrCode: "xxxx22",
            generateTime: "2024-08-29 15:00:21",
            boxBarProductLineDeviceCode: "BXBSB001",
            boxBarProductLineName: "盒条产线",
            codingDateStr: "2024-08-29",
            num: "JT221-5",
            BrandId: 22
          },
          {
            qrCode: "xxxx23",
            generateTime: "2024-08-29 15:00:22",
            boxBarProductLineDeviceCode: "BXBSB001",
            boxBarProductLineName: "盒条产线",
            codingDateStr: "2024-08-29",
            num: "JT221-5",
            BrandId: 23
          },
          {
            qrCode: "xxxx24",
            generateTime: "2024-08-29 15:00:23",
            boxBarProductLineDeviceCode: "BXBSB001",
            boxBarProductLineName: "盒条产线",
            codingDateStr: "2024-08-29",
            num: "JT221-5",
            BrandId: 24
          },
          {
            qrCode: "xxxx25",
            generateTime: "2024-08-29 15:00:24",
            boxBarProductLineDeviceCode: "BXBSB001",
            boxBarProductLineName: "盒条产线",
            codingDateStr: "2024-08-29",
            num: "JT221-5",
            BrandId: 25
          },
          {
            qrCode: "xxxx26",
            generateTime: "2024-08-29 15:00:25",
            boxBarProductLineDeviceCode: "BXBSB001",
            boxBarProductLineName: "盒条产线",
            codingDateStr: "2024-08-29",
            num: "JT221-6",
            BrandId: 26
          },
          {
            qrCode: "xxxx27",
            generateTime: "2024-08-29 15:00:26",
            boxBarProductLineDeviceCode: "BXBSB001",
            boxBarProductLineName: "盒条产线",
            codingDateStr: "2024-08-29",
            num: "JT221-6",
            BrandId: 27
          },
          {
            qrCode: "xxxx28",
            generateTime: "2024-08-29 15:00:27",
            boxBarProductLineDeviceCode: "BXBSB001",
            boxBarProductLineName: "盒条产线",
            codingDateStr: "2024-08-29",
            num: "JT221-6",
            BrandId: 28
          },

        ]
      },
    };
  },
  computed: {
    uniqueNumColumns() {
      const numList = this.data.childList.map(item => item.num);
      const uniqueNums = Array.from(new Set(numList));
      return uniqueNums.map(num => ({ text: num }));
    },
    currentPageList() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.data.childList.slice(start, end);
    },

    targetItems() {
      if (!this.fieldValue) return [];
      return this.data.childList.filter(item => item.num === this.fieldValue);
    }
  },
  methods: {
    switchPage(page) {
      this.currentPage = page;
    },
    textsch(e) {
      console.log(11111, e);
      this.showPicker = false;
      this.fieldValue = e.text;
    },
    Reset() {
      this.fieldValue = "";
      this.scanned = false; // 重置扫码状态
    },
    formatQrCode(qrCode) {
      if (!qrCode) return "";
      if (qrCode.length > 5) {
        return `...${qrCode.slice(-4)}`;
      }
      return qrCode;
    },

    gousearch() {
      if (!this.fieldValue) {
        Notify({ type: 'warning', message: '请先选择机台号' });
        return;
      }
      this.scanned = true; // 标记为已扫码
      Notify({ type: 'success', message: '扫码确认成功' });
    },
    // 判断当前项是否是需要高亮的前8个项
    isScannedItem(item, index) {
      if (!this.scanned || item.num !== this.fieldValue) return false;

      // 获取当前项在全局列表中的索引
      const globalIndex = this.data.childList.findIndex(i => i.BrandId === item.BrandId);
      // 获取当前机台号的所有项
      const targetItems = this.targetItems;
      // 找到当前项在目标列表中的位置
      const targetIndex = targetItems.findIndex(i => i.BrandId === item.BrandId);

      // 只高亮前8个项
      return targetIndex >= 0 && targetIndex < 8;
    }
  },
};
</script>

<style scoped>
:deep(.van-nav-bar__right) {
  font-size: 0.45rem;
  color: #ffffff;
}

#centerDiv {
  height: 91%;
}

.nav-bar {
  background-color: rgba(0, 105, 83, 1);
}

.total-count {
  color: #979797;
}

.query-btn {
  width: 92%;
  margin: auto;
  display: block;
  border-radius: 0.1rem;
  height: 1.3rem;
  position: fixed;
  bottom: .1rem;
  left: .4rem;
  border: 1px solid #d7d4d8;
}

:deep(.van-field) {
  width: 40%;
  font-size: 0.4rem;
}

.from {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 0.25rem;
}

:deep(.van-icon-arrow) {
  font-size: 0.4rem;
  line-height: 0.65rem;
  display: none;
}

.Resetbtn {
  font-size: 0.4rem !important;
  border: none;
  color: #979797;
}

:deep(.van-icon-passed) {
  color: #07C160;
}

.code-info-card {
  width: 95%;
  height: 3.2rem;
  margin: auto;
  margin-top: 0.3rem;
  border-radius: 0.2rem;
  background: #ffffff;
  box-sizing: border-box;
  padding: 0 0.25rem;
}

.card-title {
  font-size: 0.45rem;
  padding-left: 0.4rem;
  padding-top: 0.15rem;
  margin: 0;
}

.code-info-content {
  width: 100%;
  height: 2.3rem;
  display: flex;
  align-items: center;
  font-size: 0.35rem;
  line-height: 1.2rem;
  justify-content: space-between;
  flex-wrap: wrap;
}

.info-item {
  width: 49%;
  height: 50%;
  margin: 0;
}

.form-container {
  width: 95%;
  height: 1.5rem;
  margin: 0.3rem auto;
  border-radius: 0.2rem;
  background: #ffffff;
}

.barcode-container {
  width: 95%;
  margin: auto;
}

.barcode-title {
  font-size: 0.4rem;
  display: flex;
  justify-content: space-between;
  margin-top: 0.2rem;
  margin-bottom: .2rem;
  align-items: center;
  margin: 0;
  margin-bottom: .2rem;
}

.contbox {
  height: 7rem;
  position: relative;
}
.list-wrapper {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.btnleft{
  position: absolute;
  top: 50%;
  z-index: 10;
}
.btnright{
  position: absolute;
  right: 0;
  top: 50%;
  transform: rotate(180deg);
  z-index: 10;
}
.contboxitem {
  width: 18.3%;
  height: 17%;
  background-color: #F0FDF4;
  border-radius: .2rem;
  display: inline-block;
  margin-right: .13rem;
  margin-bottom: .2rem;
  border: 1px solid;
  border-color: #CEF8DD;
}

.contboxitem.selected-item {
  background-color: #FEFCE8 !important;
  border-color: #FCF8D4 !important;
}


.contboxitem.scanned-item {
  background-color: #E0F2FF !important; /* 浅蓝色背景，可根据需求修改 */
  border-color: #94D3FF !important;      /* 浅蓝色边框，可根据需求修改 */
}

.list-wrapper .contboxitem:nth-child(5n) {
  margin-right: 0;
}

.item-index {
  font-size: .3rem;
  margin:0.25rem .35rem 0 1.3rem;
  color: #979797;
}

.item-code {
  font-size: .4rem;
  margin-left: .2rem;
  margin-bottom: 0;
}
.query-btns{
    bottom: 1.5rem;
}
</style>
