<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>
    <div>
      <van-tabs v-model:active="active">
        <van-tab title="件码列表" name="a">
          <div class="list-header">
            <p>
              <span>件码信息</span>
            </p>
            <p class="total-count">
              共
              {{ this.data.piece.length }}
              条
            </p>
          </div>
          <div class="list-content">
            <div
              v-for="(item, i) in this.data.piece"
              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"> {{ item.parentCode }} </span>
                <span class="colors">条码数：50 </span>
              </p>
              <p class="item-row item-footer-row">
                <span class="colors">机台号：{{ item.barPieceProductLineDeviceCode }} </span>
              </p>
            </div>
          </div>
        </van-tab>
        <van-tab title="条码列表" name="b">
          <div class="list-header">
            <p>
              <span>条码信息</span>
            </p>
            <p class="total-count">
              共
              {{ this.data.piece.length }}
              条
            </p>
          </div>
          <div class="list-content">
            <div
              v-for="(item, i) in this.data.bar"
              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"> {{ item.qrCode }} </span>
                <span class="colors">盒码数：10 </span>
              </p>
              <p class="item-row item-footer-row">
                <span class="colors">机台号：{{ item.boxBarProductLineDeviceCode }} </span>
              </p>
            </div>
          </div>
        </van-tab>
        <van-tab title="盒码列表" name="c">
          <div class="list-header">
            <p>
              <span>盒码信息</span>
            </p>
            <p class="total-count">
              共
              {{ this.data.box.length }}
              条
            </p>
          </div>
          <div class="list-content">
            <div
              v-for="(item, i) in this.data.box"
              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"> {{ item.qrCode }} </span>
                <span class="colors">盒码数：50 </span>
              </p>
              <p class="item-row item-footer-row">
                <span class="colors">机台号：{{ item.boxBarProductLineDeviceCode }} </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,
  CellGroup,
  Cell,
  List,
  Button,
  Dialog,
  Sticky,
  Col,
  Row,
  Notify,
  Icon,
  Tab,
  Tabs,
} from "vant";
import {qrcodeMap} 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,
  },
  created() {
    if (this.$route.query) {
      this.time1 = this.$route.query.time1;
      this.time2 = this.$route.query.time2;
      this.queryParams = {
        one: this.$route.query.one,
        two: this.$route.query.two,
      };
    }
    this.qrcodeMap();
  },
  mounted() {
    // this.$nativeQRCode.setStatusBarColor("#006953", "white");
    // ScanOverlay.show('请扫描二维码')
  },
  data() {
    return {
      data: {},
      active: "a",
      time1:"",
      time2:"",
      queryParams: {},
    };
  },
  computed: {},
  methods: {
    qrcodeMap() {
      qrcodeMap(this.queryParams).then(response => {
        if (response.code === 200) {
          this.data = response.data
        }
      });
    },
    deleteItem(index) {
      this.data.splice(index, 1);
    },
    gousearch() {
      this.$router.push({
        path: "/ScanBarcodes",
      });
    },
  },
};
</script>

<style scoped>
:deep(.van-nav-bar__right) {
  font-size: 0.45rem;
  color: #ffffff;
}
#centerDiv {
  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%;
  height: 8%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 0.3rem;
  font-size: 0.45rem;
  font-size: 0.35rem;
  color: #979797;
}
.success-icon {
  margin-left: 0.15rem;
  margin-right: 0.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%;
  margin-top: 0.2rem;
}
.query-btn {
  width: 92%;
  margin: auto;
  display: block;
  border-radius: 0.1rem;
  height: 40%;
}
: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;
}

.list-content {
  margin-top: 0.3rem;
  height: 11rem;
  width: 100%;
  overflow: auto;
}

.list-item {
  font-size: 0.35rem;
  height: 2.5rem;
}

.item-row {
  display: flex;
  justify-content: space-between;
}

.item-header-row {
  margin-top: 0.2rem;
}

.item-main-row {
  margin: 0.2rem 0;
}

.qr-code-text {
  font-size: 0.4rem;
}
</style>
