<template>
  <!-- 盒条件-件码激活 -->
    <div id="qualitytesting">
      <van-nav-bar
        title="件码激活"
        left-arrow
        @click-left="onClickLeft"
        z-index="1"
        id="topDiv"
      />
      <div class="list">
        <h6 class="mesTitle">二维码信息</h6>
        <van-row class="listTab">
          <van-col class="tabTitle" span="6">件码</van-col>
          <van-col class="tabValue code" span="18">{{ qrCodeIns.qrCode }}</van-col>
          <van-col class="tabTitle" span="6">卷烟信息</van-col>
          <van-col class="tabValue" span="18">{{ qrCodeIns.brandName }}</van-col>
        </van-row>
      </div>
      <div class="twobtn">
        <van-button :class="relevanceButton ? 'btn_disabled' : 'btn_enable'" :disabled="relevanceButton" @click="activateButton">确认激活</van-button>
      </div>
    </div>
  </template>
    
    <script>
  import {Search, Button, NavBar, Empty, Card, Cell, CellGroup, Col, Row, Notify} from "vant";
  import { ref, watch } from "vue";
  import ScanOverlay from "@/components/overlay/scanOverlay/ScanOverlay";
  import {QrCodeUtil} from "@/api/qrcode/device/brand/brand";
  import {getQrcodeInsByCode, getQrcodeInsByCodeCold} from "@/api/qrcode/relation/qrcodeIns";
  import {pieceActivate} from "@/api/qrcode/relation/qrDiscardCode";
  import {getStringByTwo} from "@/utils/transition";
  
  export default {
    name: "qualitytesting",
    components: {
      [Search.name]: Search,
      [Button.name]: Button,
      [NavBar.name]: NavBar,
      [Empty.name]: Empty,
      [Card.name]: Card,
      [Cell.name]: Cell,
      [Col.name]: Col,
      [Row.name]: Row,
      [CellGroup.name]: CellGroup,
      [Notify.name]: Notify,
    },
    data() {
      return {
        listHeight: 0,
        // searchKey: '',
        qrCodeIns: {
          qrCode:null
        },
        manualAssociationList: {
          parentCode: '',
          code: [],
          errorCode:"",
          type: null
        },
      };
    },
    mounted() {
      // 初始化高度
      this.initHeight();
      // 扫码
      this.$nativeQRCode.setCallBackFun((res) => {
        let qrCode = getStringByTwo(res)
        this.onScanQrCode(qrCode);
      });
      ScanOverlay.show('请扫描二维码')
      // this.onScanQrCode("HTTPS://Y2WM.CN/99.1000.1/AC31150751051ZOLDX0WVBQ5WLPCXE7FY0165565565555555555555555555599999999995555792");
      // setTimeout(()=>{
      //   this.onScanQrCode("HTTPS://T2DC.CN/99.1000.1/AC30088802037000169010280752062202403120016460168A00296SKIIWMAYY3QFWI86JC9XQUKE00000");
      // },5000)
    },
    computed: {
      // 判断按钮是否能够点击
      relevanceButton() {
        return this.qrCodeIns.qrCode == null;
      }
    },
    methods: {
      // 激活
      activateButton(){
        pieceActivate(this.manualAssociationList).then((res)=>{
          if (res.data.code==200){
            Notify({type: 'success', message: '激活成功', duration: 1500});
            //清空数据
            this.qrCodeIns= {
              qrCode:null
            },
            ScanOverlay.show('请扫描二维码')
          }else Notify({type: 'warning', message: '激活失败', duration: 1500});
        })
      },
      // 扫码
      onScanQrCode(qrcode) {
        ScanOverlay.hide()
        QrCodeUtil({"qrcode": qrcode}).then((res)=>{
          if (res.data.cgtCode == null){
            Notify({type: 'warning', message: '请扫描正确烟码', duration: 1500});
          }else {
            getQrcodeInsByCode({qrcode}).then((res) => {
              if (res.data.type === 20 || res.data.type === 10){
                Notify({type: 'warning', message: '请扫描件码进行激活', duration: 1500});
                return
              }
              this.qrCodeIns = res.data
              this.manualAssociationList.parentCode = res.data.qrCode
              this.manualAssociationList.type = 2
            });
          }
        })
      },
      //
      initHeight() {
        this.$nextTick(() => {
          // 屏幕高度
          let windowH = document.documentElement.clientHeight;
          // 顶部内容区域高度
          let topDivH = document.getElementById("topDiv").offsetHeight;
          this.listHeight = windowH - topDivH - 46;
        });
      },
      // 返回
      onClickLeft() {
        window.history.go(-1);
      },
    },
  };
  </script>
    
    <style scoped>
  .list {
    margin-left: 20px;
    width: 660px;
    height: 320px;
    background: #ffffff;
    border-radius: 10px;
    padding: 10px;
    margin-top: 20px;
  }
  .listTab{
    margin-top: 25px;
  }
  .mesTitle {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
  }
  .code{
    border: 1px solid #f1f1f1;
    height: 1.5rem !important;
    line-height: 0.5rem !important;
    padding-left: 0.13889rem;
    word-break: break-all;
    display: flex;
    /* //justify-content: center; */
    align-items: center;
    font-family: "SourceHanSansCN-Medium",sans-serif;
    border-bottom: 0.01389rem solid #d8d8d8;
  }
  .tabValue,
  .tabTitle {
    border: 1px solid #f1f1f1;
    height: 1.5rem;
    line-height: 1.5rem;
    padding-left: 0.13889rem;
    font-family: "SourceHanSansCN-Medium",sans-serif;
    border-bottom: 0.01389rem solid #d8d8d8;
  }
  .tabValue {
    font-family: Source Han Sans CN,sans-serif;
    font-weight: 400;
    font-size: 22px;
    color: #434343;
  }
  .tabTitle {
    font-family: Source Han Sans CN,sans-serif;
    font-weight: 500;
    font-size: 22px;
    color: #000000;
  }
  .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;
  }
  .btn_disabled {
    bottom: 10px;
    background: #AFD4CC;
    width: 40%;
    height: 65px;
    line-height: 65px;
    border-radius: 30px;
    color: rgba(255, 255, 255, 1);
    font-size: 26px;
  }

  .btn_enable {
    bottom: 10px;
    background: rgba(33, 143, 120, 0.9);
    width: 40%;
    height: 65px;
    line-height: 65px;
    border-radius: 30px;
    color: rgba(255, 255, 255, 1);
    font-size: 26px;
  }
  </style>
    