<template>
  <!-- 盒条件-重码查询 -->
  <div id="topDiv">
    <van-nav-bar
      title="重码查询"
      left-text=""
      left-arrow
      @click-left="$router.go(-1)"
      style="background-color: rgba(0, 105, 83, 1)"
    >
      <!-- 用于传入用户姓名 -->
      <template #right>
        {{ $store.state.user.name }}
      </template>
    </van-nav-bar>
  </div>

  <div id="centosDiv">
  <van-cell-group>
    <van-cell class="listOne" :title="qrCodeTypeName"><span>{{code}}</span></van-cell>
    <van-cell title="异常情况" :value="hint" />

  </van-cell-group>
    <van-list class="listStyle" v-show="codeList.length != 0">
      <van-cell :title="typeNameList"/>
      <div class="listitem">
        <van-cell
            v-for="item in codeList"
            :key="item"
        >
          {{item}}
        </van-cell>
      </div>

    </van-list>

    <van-list class="listStyle" v-show="aPiece.length != 0">
      <van-cell title="所在件烟列表"/>
      <div class="listitem">
        <van-cell
            v-for="item in aPiece"
            :key="item"
        >
          {{ item }}
        </van-cell>
      </div>
    </van-list>
  </div>
   <div class="twobtn">
  <div class="btnassociated" id="btnassociated" v-on:click="unbundlingbtn">返回</div>
</div>
  <van-dialog />
</template>
<script>
import { NavBar, CellGroup, Cell, List, Button, Dialog,Notify } from "vant";
import {getMultipleCodeByCode, getQrcodeInsByCode} from "src/api/qrcode/relation/qrcodeIns";
import ScanOverlay from "src/components/overlay/scanOverlay/ScanOverlay";
import {getAPiece} from "src/api/qrcode/relation/qrDiscardCode";
import {QrCodeUtil} from "@/api/qrcode/device/brand/brand";
import {getStringByTwo} from "@/utils/transition";

export default {
  name: "relieveRelationIndex",
  components: {
    [NavBar.name]: NavBar,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [List.name]: List,
    [Button.name]: Button,
    [Dialog.Component.name]: Dialog.Component,
    [Notify.Component.name]: Notify.Component,
  },
  data() {
    return {
      listHeight:'',
      qrCodeTypeName: "烟码",
      code: "无",
      qrCodeType: {
        10: "盒烟码",
        20: "条烟码",
        30: "件烟码",
      },
      typeNameList: "无",
      hint: "无",
      // 存放 信息
      aPiece:[],
      codeList:[],
    };
  },
  mounted() {
    this.initHeight();
    this.$nativeQRCode.setCallBackFun((res) => {
      let qrCode = getStringByTwo(res)
      this.onScanQrCode(qrCode);
    });
    this.$nativeQRCode.setStatusBarColor("#006953", "white");
    ScanOverlay.show('请扫描二维码')
     // this.onScanQrCode("HTTPS://Y2WM.CN/99.1000.1/AC20212250025HD0M4VICZG6RHK8HGX11")
     // this.onScanQrCode("HTTPS://Y2WM.CN/99.1000.1/AC1008878002RFSOLH6OOAH0PASEKZLXC")
    // setTimeout(()=>{
    //   this.onScanQrCode("HTTPS://Y2WM.CN/99.1000.1/AC200887900254UK1IQ4MXQXUTMX9QAF4")
    // },2000)
  },
  methods: {
    // 初始高度
    initHeight() {
      this.$nextTick(() => {
        // 屏幕高度
        let windowH = document.documentElement.clientHeight;
        // 顶部内容区域高度
        let topDivH = document.getElementById("topDiv").offsetHeight;
        let centosDivH = document.getElementById("centosDiv").offsetHeight;
        let btnsh = document.getElementById("btns").offsetHeight;
        this.listHeight = windowH - topDivH - centosDivH - btnsh -50;
      });
    },
    // 扫码
    onScanQrCode(qrcode) {
      ScanOverlay.hide();
      QrCodeUtil({"qrcode": qrcode}).then((res)=>{
        if (res.data.cgtCode == null){
          Notify({type: 'warning', message: '请扫描正确烟码', duration: 1500});
        }else if (res.data.typeCode == 10){
          Notify({type: 'warning', message: '请扫描条烟码或件烟码进行查询', duration: 1500});
        }else {
          this.code = qrcode;
          this.qrCodeTypeName = this.qrCodeType[res.data.typeCode];
          getAPiece(qrcode).then(r => {
            this.initQrcodeInfo(r.data, qrcode);
          })
        }
      })
    },

    // 初始化二维码信息
    initQrcodeInfo(qrCodeList, qrcode) {
      // 连续查询先清空页面
      this.aPiece = []
      this.codeList = []
      if (qrCodeList.type == 30) {
        if (qrCodeList.aPiece.length == 0 && qrCodeList.codeList.length == 0) {
          getQrcodeInsByCode({"qrcode": qrcode}).then((res) => {
            if (res.data.status == 40) {
              Notify({type: 'success', message: '该烟码未查询到重码', duration: 1500});
            } else if (res.data.status == 20) {
              Notify({type: 'warning', message: '该烟关联异常，但未重码', duration: 1500});
            }
          })
        } else {
          this.hint = "条烟重码"
          this.typeNameList = "重码条烟码"
          this.aPiece = qrCodeList.aPiece
          this.codeList = qrCodeList.codeList
        }

      } else if (qrCodeList.type == 20) {
        this.aPiece = qrCodeList.aPiece
        this.codeList = qrCodeList.codeList
        if (qrCodeList.aPiece.length == 0 && qrCodeList.codeList.length == 0) {
          getQrcodeInsByCode({"qrcode": qrcode}).then((res) => {
            if (res.data.status == 40) {
              Notify({type: 'success', message: '该烟码未查询到重码', duration: 1500});
            } else if (res.data.status == 20) {
              Notify({type: 'warning', message: '该烟关联异常，但未重码', duration: 1500});
            }
          })
        } else {
          this.hint = "盒码重码"
          this.typeNameList = "重码盒烟码"
          this.aPiece = qrCodeList.aPiece
          this.codeList = qrCodeList.codeList
        }
      }
    },
    // 返回
    unbundlingbtn(){
      window.history.go(-1);
    },
  },
};
</script>


<style scoped>
.twobtn {
  text-align: center;
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;
  bottom: 0px;
  background-color: white;
  height: 90px;
  padding-top: 15px;
  padding-bottom: 15px;
}
.btnassociated {
  bottom: 10px;
  background: linear-gradient(-90deg, rgba(0, 105, 83, 1), rgba(33, 143, 120, 0.6));
  width: 40%;
  height: 65px;
  line-height: 65px;
  border-radius: 30px;
  color: rgba(255, 255, 255, 1);
  font-size: 26px;
}
.listStyle {
    overflow: hidden;
    margin: auto;
    margin-top: 20px !important;
    border-radius: 15px;
    width: 660px;
    height: 380px;
}
.listitem{
  height: 3.7rem;
  overflow: auto;
}
:deep(.listStyle .van-cell){
  font-size: 26px;
  font-family: 'SourceHanSansCN-Regular',sans-serif;
  font-weight: 400;
  color: #434343;
  line-height: 50px;
  box-sizing: border-box;
}
:deep(.van-cell:after){
  border-bottom: 2px solid #E7E7E7;
}

:deep(.van-cell-group){
  width: 660px;
  margin: auto;
  background: none;
}
:deep(.van-cell-group .van-cell:nth-of-type(1)){
  height: 147px;
  line-height: 147px;
  margin-bottom: 20px;
  margin-top: 20px;
  border-radius: 15px;
  font-size: 26px;
  font-family: 'SourceHanSansCN-Medium',sans-serif;
  font-weight: 500;
  color: #000000;
}
:deep(.van-cell-group .van-cell:nth-of-type(1) .van-cell__title){
  flex: .3;
}
:deep(.van-cell-group .van-cell:nth-of-type(2)){
  height: 104px;
  font-size: 26px;
  font-family: 'SourceHanSansCN-Medium',sans-serif;
  font-weight: 500;
  color: #000000;
  line-height: 90px;
  border-radius: 15px;
}
:deep(.van-cell-group .van-cell:nth-of-type(3)){
  height: 104px;
  font-size: 26px;
  font-family: 'SourceHanSansCN-Medium',sans-serif;
  font-weight: 500;
  color: #000000;
  line-height: 90px;
  border-radius: 15px;
}
:deep(.van-cell-group .van-cell:nth-of-type(2) .van-cell__value span){
    font-family: 'SourceHanSansCN-Regular',sans-serif !important;
    font-weight: 400 !important;
    color: #434343 !important;

}

:deep(.van-nav-bar__right){
    font-size: 32px;
    font-family: Source Han Sans CN,sans-serif;
    font-weight: 400;
    color: #FFFFFF;
  }
.listOne{
  display: flex;
  align-items: center;
}
.listOne span{
  display: block !important;
  line-height: 30px !important;
  text-align: left !important;
  font-size: 26px;
  font-family: 'SourceHanSansCN-Regular',sans-serif !important;
  font-weight: 400 !important;
  color: #434343 !important;
}
</style>
