<template>
  <!-- 盒条件-离线盒条关联 -->
  <div id="topDiv">
    <van-nav-bar
        :title="$route.meta.name"
        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="centerDiv">
    <van-cell-group>
      <van-cell :title="$route.meta.type" :value="manualAssociationList.parentCode"/>
      <van-cell :title="$route.meta.smokeList">
        {{ manualAssociationList.code.length }}/{{ qrBrand.pkgNum != null ? qrBrand.pkgNum : 10 }}
      </van-cell>
      <van-cell title="卷烟信息名称" :value="qrBrand.cgtName"/>
    </van-cell-group>
  </div>
  <van-list class="list" :style="{height:listHeight + 'px',overflow:'auto'}">
    <van-cell v-for="codex in manualAssociationList.code" v-show="manualAssociationList != null">
      <van-row v-if="errorList.indexOf(codex) != -1" class="li" style="color: #FF0000">
        <van-col span="24">{{ codex }}</van-col>

      </van-row>
      <van-row class="li" v-else>
        <van-col span="24">{{ codex }}</van-col>

      </van-row>
    </van-cell>
  </van-list>

  <van-row id="scrapButton">
    <van-button :class="relevanceButton ? 'btn_disabled' : 'btn_enable'" :disabled="relevanceButton"
                @click="relevanceSendButton">保存本地
    </van-button>
  </van-row>
</template>

<script>
import {NavBar, CellGroup, Cell, List, Button, Dialog, Sticky, Col, Row, Notify} from "vant";
import ScanOverlay from "@/components/overlay/scanOverlay/ScanOverlay";
import {getStringByTwo} from "@/utils/transition";
import OpenDataWap from "@/common/nativeJSdk/OperData";

export default {
  name: "cartonBox",
  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,
    [Notify.Component.name]: Notify.Component,
  },
  mounted() {
    const _this = this;
    this.initHeight();
    this.$nativeQRCode.setCallBackFun((res) => {
      // 通过二维码获取卷烟信息信息
      let qrCode = getStringByTwo(res)
      this.getQrBrandByCode(qrCode);
    });
    this.$nativeQRCode.setStatusBarColor("#006953", "white");
    ScanOverlay.show('请扫描二维码')
    // this.getQrBrandByCode("HTTPS://Y2WM.CN/99.1000.1/AC20150710025V12GTGRVRWVWMELBCDVY009")
    // setTimeout(() => {
    //   this.getQrBrandByCode("HTTPS://Y2WM.CN/99.1000.1/AC1015070002RPVY1IVSMGQTIJDCCOSP017");
    //   this.getQrBrandByCode("HTTPS://Y2WM.CN/99.1000.1/AC1015070002RPVY1IVSMGQTIJDCCOSP018");
    // }, 1000)
    //
    // setTimeout(() => {
    //   this.getQrBrandByCode("HTTPS://Y2WM.CN/99.1000.1/AC20150710025V12GTGRVRWVWMELBCDVY010")
    // }, 5000)
    // setTimeout(() => {
    //   this.getQrBrandByCode("HTTPS://Y2WM.CN/99.1000.1/AC1015070002RPVY1IVSMGQTIJDCCOSP019");
    //   this.getQrBrandByCode("HTTPS://Y2WM.CN/99.1000.1/AC1015070002RPVY1IVSMGQTIJDCCOSP020");
    // }, 6000)
  },
  data() {
    return {
      listHeight: '',
      manualAssociationList: {
        parentCode: '',
        code: [],
        cgtName: "",
        errorCode: "",
        type: null
      },
      errorList: [],
      packageBoxNum: {
        strip: null, // 条
        piece: null, // 件
      },
      qrBrand: {
        code: null,//二维码数据
        typeCode: null,
        typeName: null,
        cgtName: null,
        cgtCode: null,
        pkgNum: null,// 盒条关联数之比
        boxNum: null,// 条件关联数之比
        qrBrand: null
      },
      showArr: [],
      forbidden: 0,
    }
  },
  computed: {

    // 判断按钮是否能够点击
    relevanceButton() {
      if (this.forbidden == 1) {
        return true;
      }
      if (this.manualAssociationList.parentCode != null && this.manualAssociationList.parentCode != '') {
        return this.manualAssociationList.code.length == this.packageBoxNum.strip ? false : true
      }
      return true
    }
  },
  methods: {
    // 计算高度
    initHeight() {
      this.$nextTick(() => {
        // 屏幕宽度
        let windowW = document.documentElement.clientHeight;
        let topDivH = document.getElementById("topDiv").offsetHeight;
        let centerDivH = document.getElementById("centerDiv").offsetHeight;
        let scrapButtonH = document.getElementById("scrapButton").offsetHeight;
        this.listHeight = windowW - topDivH - centerDivH - scrapButtonH - 60;
      });
    },
    // 解析对象
    generateResObject(str) {
      let res = null;
      try {
        if (str != null) {
          res = JSON.parse(str);
        }
        return res;
      } catch (e) {
        return res;
      }
    },
    //二维码获取卷烟信息卷烟信息获取
    getQrBrandByCode(qrcode) {
      ScanOverlay.hide()
      let data = {"qrcode": qrcode}
      let obj = OpenDataWap.pkgbox.qrCodeBrandUtil(JSON.stringify(data));
      let res = this.generateResObject(obj);

      if (res.code == 500 || res.data.qrBrand == null) {
        Notify({type: 'warning', message: '无法获取到品规'});
        return;
      }
      if (res.data.pkgNum == null || res.data.pkgNum == 0) {
        Notify({type: 'warning', message: '该品规小盒数量为0，无法进行盒条关联'});
        return;
      }
      // 第一次没有获取到卷烟信息 , 获取卷烟信息
      if (!this.qrBrand.cgtCode) {
        // 获取当前卷烟信息相关信息
        this.qrBrand = res.data;
        // 获取盒条比值
        this.packageBoxNum.strip = this.qrBrand.pkgNum;
        // 获取条件比值
        this.packageBoxNum.piece = this.qrBrand.boxNum;
        // 执行扫描二维码操作
        this.onScanQrCode(res.data);
      } else {
        // 如果当前二维码卷烟信息编码与之前编码相同
        if (this.qrBrand.cgtCode == res.data.cgtCode) {
          this.onScanQrCode(res.data)
        } else {
          // 当前二维码与之前卷烟信息不同
          Notify({type: 'warning', message: '卷烟信息不同', duration: 1500});
        }
      }
    },

    // 扫描二维码
    onScanQrCode(qrCode) {
      // 当扫码为件码 赋值件码，或者覆盖原有件码
      if (qrCode.typeCode == '20') {
        this.manualAssociationList.parentCode = qrCode.code
      } else if (qrCode.typeCode == '10') {
        // 盒码
        if (this.manualAssociationList.code.indexOf(qrCode.code) > -1) {
          Dialog.alert({title: "重复扫码"});
        } else if (this.isMoreNum()) {
          this.showArr.unshift(qrCode.code)
          let arr = [...new Set(this.showArr.map(item => JSON.stringify(item)))].map(item => JSON.parse(item));
          this.manualAssociationList.code = arr
        } else {
          Dialog.alert({title: "超过扫码数量"});
        }
      } else if (qrCode.typeCode == '30') {
        // 件吗或者其他
        Notify({type: 'warning', message: '此为件码', duration: 1500});
      } else {
        Notify({type: 'warning', message: '请扫描正确烟码', duration: 1500});
      }

    },
    //判断是否超过数量
    isMoreNum() {
      if (this.manualAssociationList.code.length < this.packageBoxNum.strip) return true;
      return false;
    },
    // 完成关联 发送
    relevanceSendButton() {
      this.manualAssociationList.type = 1
      this.manualAssociationList.cgtName = this.qrBrand.cgtName
      this.forbidden = 1
      ScanOverlay.show('保存到本地中')
      let res = OpenDataWap.pkgbox.insertQrCodeInsRelationPo(JSON.stringify(this.manualAssociationList));
      res = this.generateResObject(res);
      if (res.code == 200){
        this.forbidden = 0
        this.resetAll();
        Notify({type: 'success', message: '保存成功'});
        ScanOverlay.show('请扫描二维码')
      }else {
        Notify({type: 'danger', message: '保存失败请重试'});
        ScanOverlay.hide()
        this.forbidden = 0
      }
    },
    // 重置所有数据
    resetAll() {
      this.manualAssociationList = {
        parentCode: '',
        code: [],
        type: null
      }
      this.showArr = []
      this.errorList = []
      this.packageBoxNum = {
        strip: null, // 条
        piece: null, // 件
      }
      this.qrBrand = {
        code: null,//二维码数据
        typeCode: null,
        typeName: null,
        cgtName: null,
        cgtCode: null,
        pkgNum: null,// 盒条关联数之比
        boxNum: null,// 条件关联数之比
        qrBrand: null
      }
    }
  },
}
</script>

<style scoped>
:deep(.van-cell-group) {
  width: 660px;
  margin: auto;
  margin-top: 20px;
  background: none;
}

:deep(.van-cell-group .van-cell:nth-of-type(1)) {
  height: 147px;
  border-radius: 15px;
  font-size: 26px;
  font-family: 'SourceHanSansCN-Medium',sans-serif;
  font-weight: 500;
  color: #000000;
  line-height: 147px;
  align-items: center;
  margin-bottom: 20px;
}

:deep(.van-cell-group .van-cell:nth-of-type(1) .van-cell__title) {
  flex: .3;
}

:deep(.van-cell-group .van-cell:nth-of-type(1) .van-cell__value) {
  display: block;
  line-height: 20px;
  text-align: left;
  font-family: 'SourceHanSansCN-Regular',sans-serif;
  font-weight: 400;
  color: #434343;
}

:deep(.van-cell-group .van-cell:nth-of-type(2)) {
  height: 104px;
  border-radius: 15px;
  font-size: 26px;
  font-family: 'SourceHanSansCN-Medium',sans-serif;
  font-weight: 500;
  color: #000000;
  line-height: 104px;
  align-items: center;
  margin-bottom: 20px;
}

:deep(.van-cell-group .van-cell:nth-of-type(2) .van-cell__value) {
  display: block;
  line-height: 20px;
  font-family: 'SourceHanSansCN-Regular',sans-serif;
  font-weight: 400;
  color: #434343;
}

:deep(.van-cell-group .van-cell:nth-of-type(3)) {
  height: 104px;
  border-radius: 15px;
  font-size: 26px;
  font-family: 'SourceHanSansCN-Medium',sans-serif;
  font-weight: 500;
  color: #000000;
  line-height: 104px;
  align-items: center;
  margin-bottom: 20px;
}

:deep(.van-cell-group .van-cell:nth-of-type(3) .van-cell__value) {
  display: block;
  line-height: 20px;
  font-family: 'SourceHanSansCN-Regular',sans-serif;
  font-weight: 400;
  color: #434343;
}

.list {
  width: 660px !important;
  margin: auto;
  border-radius: 15px;
}

:deep(.li) {
  height: 127px !important;
  font-size: 26px;
  font-family: 'SourceHanSansCN-Regular',sans-serif;
  font-weight: 400;
  color: #434343;
  line-height: 40px;
  padding-top: 20px;
  box-sizing: border-box;
}

:deep(.van-cell:after) {
  border-bottom: 2px solid rgba(231, 231, 231, 1)
}

#scrapButton {
  height: 100px;
  width: 100%;
  position: fixed;
  bottom: 0px;
  padding-top: 20px;

  background: #FFFFFF;
}

.btn_disabled {
  width: 100%;
  height: 80px;
  background: #AFD4CC;
  border-radius: 20px;
  color: rgba(230, 230, 230, 1);
}

.btn_enable {
  width: 100%;
  height: 80px;
  background: rgba(33, 143, 120, 0.9);
  border-radius: 20px;
  color: rgba(230, 230, 230, 1);
}

:deep(.van-nav-bar__right) {
  font-size: 32px;
  font-family: Source Han Sans CN,sans-serif;
  font-weight: 400;
  color: #FFFFFF;
}
</style>
