<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<!-- 盒条件-关联校验 -->
<!--  <scan-overlay></scan-overlay>-->
  <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 class="users" #right>
        {{$store.state.user.name}}
      </template>
    </van-nav-bar>

    <van-cell-group class="cell-flex-1-3">
      <van-cell class="onetitle" :title="qrCodeTypeName" :value="qrCodeIns.qrCode" />
      <van-cell class="twotitle" title="卷烟信息" :value="qrCodeIns.brandName"/>
      <van-cell class="twotitle" title="操作" v-show="qrCodeIns.type==30">
          <van-button type="primary" @click="checkError" class="custom-btn">异常校验</van-button>
      </van-cell>
    </van-cell-group>

      <van-popup title="异常检验信息" v-model:show="openMsg" round position="center" style="width: 90%;height: 50%">
          <van-row>
              <van-form ref="form">
                  <van-cell title="检测件码" class="celldd" :value="qcjm" />
                  <div class="container">
                      <van-cell title="检测状态" class="celldd">
                          <div class="cell-value">
                              <span v-if="qc=='检测中'">{{ qc }}</span>
                              <span v-if="qc=='状态正常'" style="color: #67C23A;">{{ qc }}</span>
                              <span v-if="qc=='状态异常'" style="color: #F56C6C;">{{ qc }}</span>

                              <van-loading v-if="qc=='检测中'" type="spinner" color="#909399" size="16px" />
                          </div>
                      </van-cell>
                  </div>
                  <van-cell-group>
                      <van-cell title="检测结果" class="celldd" v-if="qc!='状态正常'">
                          <div v-for="(item, index) in msgList" :key="index">
                              <span><span>{{ index + 1 }}.</span>{{ item }}</span>
                          </div>
                      </van-cell>
                  </van-cell-group>
              </van-form>
          </van-row>
      </van-popup>
  </div>


  <div id="centerDiv">


    <van-tabs  v-model:active="tabs.active" duration="0">
      <van-tab>
        <template #title>未检 <span>{{unCheckQrcodeList.length}}</span></template>
        <van-cell-group class="cell-flex-1-3" :style="{height: tabs.conHeight + 'px', overflow: 'scroll'}">
          <van-cell  v-for="item in unCheckQrcodeList" :key="item">
            <span v-bind:style="{ color: item.status == 20 ? 'red' : item.status == 10 ? '#ffc400':'' }" >{{item.qrCode}}</span></van-cell>
        </van-cell-group>
      </van-tab>
      <van-tab>
        <template #title>已检 <span class="text-primary">{{checkedQrcodeList.length}}</span><span> / {{qrCodeIns.childrenList.length}}</span></template>
        <van-cell-group class="cell-flex-1-3" :style="{height: tabs.conHeight + 'px', overflow: 'scroll'}">
          <van-cell  v-for="item in checkedQrcodeList" :key="item"><span class="text-primary">{{item}}</span></van-cell>
        </van-cell-group>
      </van-tab>
      <van-tab>
        <template #title>关联异常 <span class="text-danger">{{errorQrcodeList.length}}</span></template>
        <van-cell-group class="cell-flex-1-3" :style="{height: tabs.conHeight + 'px', overflow: 'scroll'}" >
          <van-cell  v-for="item in errorQrcodeList" :key="item"><span class="text-danger">{{item}}</span></van-cell>
        </van-cell-group>
      </van-tab>
    </van-tabs>



  </div>

  <div id="bottomDiv">

  </div>

</template>

<script>

import {
  listQrcodeIns,
  getQrcodeInsByCode,
  qualitySusses,
  qualityError,
  qualityResult
} from 'src/api/qrcode/relation/qrcodeIns'
import ScanOverlay from "src/components/overlay/scanOverlay/ScanOverlay";
import {NavBar, CellGroup, Cell, Tabs, Tab, Overlay, Loading, Notify, Dialog, Field, Form, Row,Popup,Icon} from 'vant'
import { pageQrcodeIns,checkStatus } from "@/api/qrcode/relation/qrcodeIns";
import {getStringByTwo} from "@/utils/transition";
export default {
  name: "qualityInspectionIndex",
  components: {
    [NavBar.name]: NavBar,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [Overlay.name]: Overlay,
    [Loading.name]: Loading,
    [Field.name]: Field,
    [Form.name]: Form,
    [Row.name]: Row,
    [Popup.name]: Popup,
    [Icon.name]: Icon,
  },
  data(){
    return {
      qrCodeTypeName: "烟码",
      qrCodeType: {
        '10': '盒烟码',
        '20': '条烟码',
        '30': '件烟码',
      },
      tabs: {
        active: 0,
        height: 0,
        conHeight: 0,
      },
      scanning: true, // 是否正在扫描
      qrCodeIns: {
        childrenList: []
      }, // 当前校验的二维码实例
      unCheckQrcodeList: [], // 未校验的二维码实例
      checkedQrcodeList: [], // 已校验的二维码实例
      errorQrcodeList: [], // 关联异常的二维码实例
      qrCodeCache:{}, // 二维码缓存
      scanedQrcodeList: [], // 已扫二维码
      errorId:'',

        //异常检测所需数据
        qc: '检测中',
        qcjm: "",
        openMsg: false,
        msgList : [],

        // 二维码数据表格数据
        qrcodeInsList: [],
        // 总条数
        total: 0,
    }
  },
  watch:{
  },
  created() {

  },
  mounted() {
    this.initHeight();
    this.$nativeQRCode.setCallBackFun((res) => {
      let qrCode = getStringByTwo(res)
      this.onScanQrCode(qrCode);
    })
    this.$nativeQRCode.setStatusBarColor("#006953", "white");
    ScanOverlay.show('请扫描二维码')
    //   this.onScanQrCode("HTTPS://T2DC.CN/99.1000.1/AC30169581213060169010280807430202407300715270305ADY082782213003I1WGADB9O6QDR57")
    // setTimeout(() => {
    //   this.onScanQrCode("HTTPS://Y2WM.CN/99.1000.1/AC1021224002RJOJO9MDUVYUMYQ7FMZVN3")
    // },1000)
    // setTimeout(() => {
    //   this.onScanQrCode("HTTPS://Y2WM.CN/99.1000.1/AC1021224002RJOJO9MDUVYUMYQ7FMZVN2")
    // },2000)
    // setTimeout(() => {
    //   this.onScanQrCode("HTTPS://Y2WM.CN/99.1000.1/AC1021224002RJOJO9MDUVYUMYQ7FMxxxx")
    // },3000)
  },

  methods: {
    // 异常检测
      checkError() {
          var self = this
          self.qc = '检测中'
          self.qcjm = self.qrCodeIns.qrCode
          self.openMsg = true
          self.msgList = []
          var data = { qrCode: self.qrCodeIns.qrCode }
          checkStatus(data).then(response => {
              if (response.data.result == 0) {
                  self.qc = '状态正常'
              } else {
                  self.qc = '状态异常'
                  self.msgList = response.data.errorMsgList
              }
          });
      },
    // 初始化页面高度
    initHeight() {
      this.$nextTick(() => {
        // 屏幕高度
        let windowH = document.documentElement.clientHeight;
        // 顶部内容区域高度
        let topDivH = document.getElementById('topDiv').offsetHeight;
        this.tabs.height = windowH - topDivH;
        this.tabs.conHeight = this.tabs.height - 120;
      })
    },
    // 初始化二维码信息
    initQrcodeInfo(qrCodeInfo){
      // console.log(qrCodeInfo)
      const _this = this;
        this.qrCodeIns = qrCodeInfo;
        this.qrCodeTypeName = this.qrCodeType[this.qrCodeIns.type];
        //先将数组清空防止重复请求数据翻倍
        _this.unCheckQrcodeList=[]
        qrCodeInfo.childrenList.forEach((_qrcode)=>{
          _this.unCheckQrcodeList.push(_qrcode);
          _this.qrCodeCache[_qrcode.qrCode] = _qrcode;
        })
    },
    // 效验二维码
    checkQrcode(qrCode){

      // 重复扫描
      if (qrCode == this.qrCodeIns.qrCode || this.scanedQrcodeList.indexOf(qrCode) != -1) {
        Notify({ type: 'warning', message: '请勿重复扫码', duration: 1500 });
        return;
      }
      // 无校验二维码,同时切换二维码
      if (this.qrCodeIns.childrenList.length <= 0) {
        qualityResult(this.qrCodeIns,this.errorId,null  , qrCode).then((res)=>{this.errorId = res.data})
        getQrcodeInsByCode({"qrcode":qrCode}).then(res =>{
          //无关联数据
          if (res.code == 200 && res.data != null){
            // 清除原有数据
            this.clearData()
            // 初始化数据
            this.initQrcodeInfo(res.data)
          }
        })
      }
      // 关联正常数据
      if (this.qrCodeCache[qrCode]) {
        this.checkedQrcodeList.push(qrCode);
        this.unCheckQrcodeList = this.unCheckQrcodeList.filter((item) => item['qrCode'] !== qrCode)
        // 记录起来 防止重复扫码
        this.scanedQrcodeList.push(qrCode);
        qualityResult(this.qrCodeIns,this.errorId,this.checkedQrcodeList,null).then(res =>{this.errorId = res.data})
        if(this.unCheckQrcodeList.length <= 0 ){
          Notify({ type: 'success', message: '关联校验完成' });
        }
      }
      // 非关联数据,数据库查询判断是否类型相同，切换校验二维码
      else {
        qualityResult(this.qrCodeIns,this.errorId,null  , qrCode).then((res)=>{this.errorId = res.data})
        getQrcodeInsByCode({"qrcode":qrCode}).then(res =>{
          //无关联数据
          if (res.code == 200 && res.data != null){
            // 类型相同,校验下一条
            if (res.data.type == this.qrCodeIns.type){
              // 清除原有数据
              this.clearData()
              // 初始化数据
              this.initQrcodeInfo(res.data)
            }else {
              // 不相同记录为异常数据
                if (this.errorQrcodeList.indexOf(qrCode) === -1) {
                    this.errorQrcodeList.push(qrCode);
                }else {
                    Notify({ type: 'warning', message: '请勿重复扫码', duration: 1500 })
                }
            }
          }else {
              if (this.errorQrcodeList.indexOf(qrCode) === -1) {
                  this.errorQrcodeList.push(qrCode);
              }else {
                  Notify({ type: 'warning', message: '请勿重复扫码', duration: 1500 });
              }
          }
        })
      }

    },
    // 清空数据
    clearData(){
      this.qrCodeIns = {
        childrenList: []
      } // 当前校验的二维码实例
      this.unCheckQrcodeList = [] // 未校验的二维码实例
      this.checkedQrcodeList = [] // 已校验的二维码实例
      this.errorQrcodeList = [] // 关联异常的二维码实例
      this.qrCodeCache = {} // 二维码缓存
      this.scanedQrcodeList = [] // 已扫二维码
      this.errorId = ''
    },
    // 根据二维码获取二维码实例
    onScanQrCode(qrcode){
      this.scanning = false;
      // 进入页面首次扫码
      if (!this.qrCodeIns.qrCode) {
        getQrcodeInsByCode({qrcode}).then(res => {
          this.initQrcodeInfo(res.data);

          //添加操作记录并记录主键
          qualityResult(this.qrCodeIns,this.errorId,null,null).then((res)=>{ this.errorId = res.data})
        })
      } else {
        this.checkQrcode(qrcode)
      }

    }
  }
}
</script>

<style  scoped >
    .custom-btn {
        /* 自定义按钮样式 */
        color: #006953;
        font-size: 30px;
    }


    .cell-value {
        display: flex;
        align-items: center;
    }
    .container {
        display: flex;
        align-items: center;
        padding: 20px;
    }
    .celldd{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
  .onetitle{
    width: 660px;
    height: 200px;
    margin: auto;
    line-height: 45px;
    margin-top: 20px;
    border-radius: 15px;
  }
  :deep(.van-cell-group){
    background: none;
  }
  :deep(.van-cell__title){
    font-size: 26px;
    font-family: 'SourceHanSansCN-Medium',sans-serif;
    font-weight: 500;
    color: #000000;
    line-height: 120px;
    max-width: 150px;
  }
  :deep(.van-cell__value){
      width: 500px;
    font-size: 26px;
    font-family: 'SourceHanSansCN-Regular',sans-serif;
    font-weight: 400;
    color: #434343;
    text-align: left;
    /*padding-top: 30px;*/

  }
  :deep(.van-cell__value span){
    line-height: 40px;
  }
  :deep(.twotitle){
    width: 660px;
    height: 104px;
    line-height: 90px;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 15px;
  }
  :deep(.twotitle .van-cell__title){
    line-height: 90px;
  }
  /*:deep(.twotitle .van-cell__value){*/
    /*padding-top: 25px;*/
  /*}*/
  #centerDiv{
    width: 660px;
    margin: auto;
    border-radius: 15px;
  }
  :deep(.van-tabs__wrap){
    border-radius: 15px 15px 0 0;
    overflow: visible;
    height: 105px;
  }
  :deep(.van-tabs__nav--line){
    height: 95px;
  }
  :deep(.van-tab span){
    font-size: 26px !important;
    font-family: 'SourceHanSansCN-Medium',sans-serif !important;
    font-weight: 500 !important;
    color: #000000 !important;
  }
  :deep(.van-tab__text--ellipsis){
    overflow: visible;
  }
  :deep(.van-tabs__line){
    width: 115px;
    background-color: rgba(0, 105, 83, 1);
    height: 4px;
  }
  :deep(.van-tabs__content){
    /* height: 600px; */
    box-sizing: border-box;
    border-radius: 0px 0px 15px 15px;
    overflow: hidden;
  }
  :deep(.van-tabs__content .van-cell__value){
    color: rgba(0, 105, 83, 1);
  }
  :deep(.van-cell:after){
    border-bottom: 2px solid rgba(231, 231, 231, 1);
    height: 3px;
  }
  :deep(.van-nav-bar__right){
    font-size: 32px;
    font-family: Source Han Sans CN,sans-serif;
    font-weight: 400;
    color: #FFFFFF;
  }
</style>
