<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="typeNameList" :value="qrCodeIns.childrenList.length" />
  </van-cell-group>
    <van-list class="listStyle" v-show="qrCodeIns.childrenList.length != 0" :style="{height: listHeight + 'px',overflow: 'auto'}">
      <van-cell
        v-for="item in qrCodeIns.childrenList"
        :key="item.qrCode"
      >
        {{item.qrCode}}
      </van-cell>
    </van-list>
  </div>
  <div class="btns" id="btns">
    <van-button
    type="danger"
    block
    class="scrapButton"
    @click="scrap"
    :disabled="!isButton"
    >解绑</van-button>
  </div>


  <!-- 弹出框  用于判断是否勾选当前二维码  -->
  <van-dialog />
</template>
<script>
import { NavBar, CellGroup, Cell, List, Button, Dialog,Notify } from "vant";
import { getQrcodeInsByCode } from "src/api/qrcode/relation/qrcodeIns";
import ScanOverlay from "src/components/overlay/scanOverlay/ScanOverlay";
import {pieceActivate, unboundByUser} from "src/api/qrcode/relation/qrDiscardCode";
import {QrCodeUtil} from "@/api/qrcode/device/brand/brand";
import {getStringByTwo} from "@/utils/transition";
import {qrCodeFlowNodes} from "@/api/qrcode/upload/uploadTaskDetail";

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: "无",
      scanning: true,
      qrCodeType: {
        10: "盒烟码",
        20: "条烟码",
        30: "件烟码",
      },
      typeNameList: "无",
      childrenNum: 0,
      // 存放 信息
      qrCodeIns: {
        childrenList: [],
      },
      manualAssociationList: {
        parentCode: '',
        code: [],
        errorCode:"",
        type: null
      },
      isProcessing: false,
    };
  },
  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/AC30212262037000169010280752062202506180016460168A00296UWGVXKDOVMK7HACPSPZW5W50")
  },
  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.typeCode != null && res.data.typeCode == 30) {
          if (qrcode.length != '105' && qrcode.length != '96') {
            Notify({type: 'warning', message: '请扫描正确烟码', duration: 1500});
            return;
          }
        }
        if (res.data.cgtCode == null){
          Notify({type: 'warning', message: '请扫描正确烟码', duration: 1500});
        }else {
          getQrcodeInsByCode({qrcode}).then((r) => {
            if(r.data.type == 30){
              // 已出库件查询行业状态
              if (r.data.operUserId == 60){
                ScanOverlay.show('该件已出库，正在查询件烟流向记录')
                let arr = []
                arr.push(r.data.qrCode)
                qrCodeFlowNodes(arr).then((result)=>{
                  ScanOverlay.hide()
                  if (result.data.size > 0){
                    Notify({type: 'warning', message: '该件烟已有流通记录，无法解绑', duration: 2000});
                  }else {
                    this.initQrcodeInfo(r.data);
                  }
                }).catch(()=>{
                  ScanOverlay.hide()
                  Notify({type: 'warning', message: '查询件烟流向记录失败，请稍后重试', duration: 2000});
                })
              }else {
                this.initQrcodeInfo(r.data);
              }
            }else if (r.data.type == 20 && r.data.parentCode != null && r.data.parentCode != ''){
              let pCode = r.data.parentCode
              getQrcodeInsByCode({"qrcode": pCode}).then((re)=>{
                if (re.data.operUserId == 60){
                  ScanOverlay.show('该条已出库，正在查询件烟流向记录')
                  let arr = []
                  arr.push(re.data.qrCode)
                  qrCodeFlowNodes(arr).then((result)=>{
                    ScanOverlay.hide()
                    if (result.data.size > 0){
                      Notify({type: 'warning', message: '该条已成件，件烟已有流通记录，无法解绑', duration: 2000});
                    }else {
                      this.initQrcodeInfo(r.data);
                    }
                  }).catch(()=>{
                    ScanOverlay.hide()
                    Notify({type: 'warning', message: '查询件烟流向记录失败，请稍后重试', duration: 2000});
                  })
                }else {
                  this.initQrcodeInfo(r.data);
                }
              })
            }else
              this.initQrcodeInfo(r.data);
          });
        }
      })
    },

    // 初始化二维码信息
    initQrcodeInfo(qrCodeInfo) {
      this.code = qrCodeInfo.qrCode;
      this.qrCodeIns = qrCodeInfo;
      this.qrCodeTypeName = this.qrCodeType[this.qrCodeIns.type];
      if (this.qrCodeIns.type == 30) this.typeNameList = "条码列表";
      if (this.qrCodeIns.type == 20) this.typeNameList = "盒码列表";
    },
    // 解绑提交前置提示
    scrap() {
      Dialog.confirm({
        message: '是否确认解除关联',
        confirmButtonDisabled: this.isProcessing, // 控制按钮是否禁用
      })
          .then(() => {
            this.isProcessing = true;
            ScanOverlay.show('解绑中');
            // 已迁移先激活
            if (this.qrCodeIns.bTaskId != null) {
              this.manualAssociationList.parentCode = this.code;
              this.manualAssociationList.type = 2;
              pieceActivate(this.manualAssociationList)
                  .then(() => {
                    this.unboundByUser();
                  });
            }else {
              this.unboundByUser();
            }

          })
          .catch(() => {
            ScanOverlay.hide();
            this.isProcessing = false;
          });
    },
    // 解绑
    unboundByUser(){
      unboundByUser(this.code)
          .then((res) => {
            if (res.code == 200) {
              this.qrCodeIns.childrenList = [];
              this.code = '';
              this.childrenNum = this.qrCodeIns.childrenList.length;
              Notify({type: 'success', message: '已解除关联'});
              ScanOverlay.show('请扫描二维码');
            } else {
              ScanOverlay.hide();
              Dialog.confirm({message: '解绑失败，请重新解绑'});
            }
          })
          .catch(() => {
            ScanOverlay.hide();
          })
          .finally(() => {
            this.isProcessing = false;
          });
    }
  },
  computed:{
    // 按钮控制是否禁用
    isButton(){
      return this.qrCodeIns.childrenList.length != 0;
    }
  }
};
</script>


<style scoped>

.scrapButton {
  width: 321px;
  height: 70px;
  border-radius: 35px;
  color: rgba(255, 255, 255, 1);
background: rgb(255, 132, 0);
}
.btns{
  position: absolute;
  bottom: 0;
  width: 720px;
  height: 94px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.listStyle {
    overflow: auto;
    margin: auto;
    margin-top: 20px !important;
    border-radius: 15px;
    width: 660px;

}
:deep(.listStyle .van-cell){
  height: 127px ;
  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(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>
