<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 class="Conts">{{ 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 }"
          >
            <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 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";
import ScanOverlay from "@/components/overlay/scanOverlay/ScanOverlay";
import {getStringByTwo} from "@/utils/transition";
import {queryQrCode, queryQrCodeMap} from "@/api/qrcode/scanCode/scanCode";
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.setCallBackFun((res) => {
      let qrCode = getStringByTwo(res)
      this.queryQrCodeMap(qrCode);
    });
    // ScanOverlay.show('请扫描二维码')
    this.queryQrCodeMap("HTTPS://Y2WM.CN/99.1000.1/AC30124061234010169010281240650202601230053300150B12402283981000ZBJBO6LESGRI2DQ");
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 25,
      fieldValue: "",
      pickerValue: "",
      showPicker: false,
      data: {},
    };
  },
  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);
    }
  },
  methods: {
    switchPage(page) {
      this.currentPage = page;
    },
    queryQrCodeMap(qrCode) {
      let query = {
        qrCode: qrCode
      }
      queryQrCodeMap(query).then(response => {
        // this.$message({
        //   showClose: response.code === 200,
        //   message: response.msg,
        //   type: 'success'
        // });
        if (response.code === 200) {
          this.data = response.data
        }
        console.log(this.data,"222222")
      });
    },
    textsch(e) {
      console.log(11111, e);
      this.showPicker = false;
      this.fieldValue = e.text;
    },
    Reset() {
      this.fieldValue = "";
    },
    formatQrCode(qrCode) {
      if (!qrCode) return "";
      if (qrCode.length > 5) {
        return `...${qrCode.slice(-4)}`;
      }
      return qrCode;
    }
  },
};
</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: .3rem;
  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.3rem;
  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.5rem 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;
}

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

.Conts {
  font-size: 0.35rem;
  word-wrap: break-word;
  white-space: normal;
}
</style>
