<template>
  <!-- 扫描发货 -->
  <el-dialog
    title="扫描发货"
    v-if="visible"
    :visible.sync="visible"
    width="25%"
    center
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :append-to-body="true"
    @close="closeDialog">
    <el-form :model="wave" label-position="left" size="medium">
      <el-form-item label="波次号" label-width="100px">
        <span autocomplete="off">{{wave.waveNo}}</span>
      </el-form-item>
      <el-form-item label="剩余订单数" label-width="100px">
        <span autocomplete="off">{{waitScan.waitScanNum}}/</span>
        <span autocomplete="off">{{waitScan.orderNum}}</span>
      </el-form-item>
      <el-form-item label="扫描订单号" label-width="100px">
        <el-input id="scanInput" @change="scanMatchPrintOrder" type="text" v-model="scanDeliveryNo" placeholder="请扫描条形码"></el-input>
      </el-form-item>
      <el-form-item label="匹配订单" label-width="100px">
        <span autocomplete="off" style="color: darkgray" v-if="matchPrintOrder.match == null">等待扫描...</span>
        <span autocomplete="off" style="color: green" v-else-if="matchPrintOrder.match">匹配成功</span>
        <span autocomplete="off" style="color: red" v-else>匹配失败</span>
      </el-form-item>
    </el-form>
    <el-card class="box-card" shadow="never">
      <div class="text item">
        <span autocomplete="off">订单号：</span>
        <span autocomplete="off">{{matchPrintOrder.orderNumber}}</span>
      </div>
      <div class="text item">
        <span autocomplete="off">快递单号：</span>
        <span autocomplete="off">{{matchPrintOrder.deliveryNo}}</span>
      </div>
      <div class="text item">
        <span autocomplete="off">波次号：</span>
        <span autocomplete="off">{{matchPrintOrder.waveNo}}</span>
      </div>
      <div class="text item">
        <span autocomplete="off">收件人：</span>
        <span autocomplete="off">{{matchPrintOrder.receiverName}}</span>
      </div>
      <div class="text item">
        <span autocomplete="off">手机号：</span>
        <span autocomplete="off">{{matchPrintOrder.receiverMobile}}</span>
      </div>
      <div class="text item">
        <span autocomplete="off">产品信息：</span>
        <span autocomplete="off">{{matchPrintOrder.prodName}}</span>
        <span autocomplete="off"> | </span>
        <span autocomplete="off">{{matchPrintOrder.prodNums}} 张</span>
      </div>
    </el-card>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleDelivery" :disabled="!matchPrintOrder.match">发 货</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      waitScan: {
        waitScanNum: 0,
        orderNum: 0
      },
      scanDeliveryNo: null,
      matchPrintOrder: {
        orderNumber: null,
        deliveryNo: null,
        prodName: null,
        prodNums: null,
        waveNo: null,
        serialNo: null,
        receiverName: null,
        receiverMobile: null,
        match: null
      },
      wave:{},
      lastInputStr: null
    }
  },
  methods: {
    // 获取数据列表
    init (wave) {
      this.wave = wave;
      this.visible = true
      // this.initEnterListener();
      this.$nextTick(() => {
        let $input = document.getElementById("scanInput");
        $input.focus();
        this.waitScanNumCheck();
      })
    },
    initEnterListener(){
      document.addEventListener('keyup', (e) => {
        let key = window.event.keyCode;
        if (key == 32) {
          if(this.visible == true){
            this.handleDelivery();
          }
        }
      })
    },
    waitScanNumCheck(){
      let dataBody = {printChannel: this.wave.printChannel, waveId: this.wave.waveId};
      this.$http({
        url: this.$http.adornUrl('/wave/wave/waitScanNumCheck'),
        method: 'get',
        params: this.$http.adornParams(dataBody),
      }).then(({data}) => {
        this.waitScan = data;
      }).catch((error) => {
        this.waitScan = {}
      })
    },
    scanMatchPrintOrder(value){
      // let substr = value.substring(value.length - 19, value.length)
      let substr;
      if(this.lastInputStr != null){
        substr = value.replace(new RegExp(this.lastInputStr), "");
      }else{
        substr = value;
      }
      if(substr){
        this.scanDeliveryNo = substr;
        let dataBody = {printChannel: this.wave.printChannel, orderNumber: substr, waveId: this.wave.waveId};
        this.$http({
          url: this.$http.adornUrl('/printOrder/printOrder/findWavePrintOrder'),
          method: 'get',
          params: this.$http.adornParams(dataBody),
        }).then(({data}) => {
          this.matchPrintOrder = data;
          if(data){
            this.handleDelivery();
            this.lastInputStr = substr;

          }
        }).catch((error) => {
          this.matchPrintOrder = {};
          this.matchPrintOrder.match = false;
        })
      }
    },
    handleDelivery(){
      if(this.waitScan.waitScanNum == 0){
        this.$message({
          message: "订单已发货",
          type: 'error'
        })
        return;
      }
      let dataBody = {waveId: this.wave.waveId, orderNumber: this.scanDeliveryNo.trim(), printChannel: this.wave.printChannel};
      this.$http({
        url: this.$http.adornUrl(`/printOrder/printOrder/confirmDelivery`),
        method: 'POST',
        data: this.$http.adornData(dataBody)
      }).then(({data}) => {
        if(data){
          this.$message({
            message: "发货成功",
            type: 'success'
          })
          this.waitScanNumCheck();
        }else{
          this.$message({
            message: "发货失败",
            type: 'error'
          })
        }
      })
    },
    closeDialog(){
      this.visible = false;
      this.scanDeliveryNo = null;
      this.waitScan = {};
      this.matchPrintOrder = {};
      this.$emit("refreshDataList", null);
      this.lastInputStr = null;
    },
  }
}
</script>
<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    padding: 6px 0;
  }
</style>
