<template>
  <div style="margin: 20px">
    <h1 align="center">电子面单</h1>
    <el-row>
      <el-col :span="3">
        <el-select v-model="deviceNo" placeholder="请选择打印设备">
          <el-option
            v-for="(item,index) in deviceList"
            :key="index"
            :label="item.deviceNo"
            :value="item.deviceNo">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="20">
        <el-input id="scanInput" @change="scanMatchPrintOrder" type="text" v-model="scanOrderNo" placeholder="请扫码二维码"></el-input>
      </el-col>
    </el-row>
    <div v-if="infoVisible">
      <div style="margin-top: 30px">
        <span style="font-weight: bold; font-size: 26px">集货单</span>
        <el-row>
          <el-col class="col" :span="6">订单编号</el-col>
          <el-col class="col" :span="3">数量</el-col>
          <el-col class="col" :span="6">集货状态</el-col>
          <el-col class="col" :span="6">总共品类</el-col>
          <el-col class="col" :span="3">货箱</el-col>
        </el-row>
        <el-row>
          <el-col class="col" :span="6">{{printOrder.orderNo}}</el-col>
          <el-col class="col" :span="3">{{printOrder.prodNums}}</el-col>
          <el-col class="col" :span="6">已集齐</el-col>
          <el-col class="col" :span="6">1</el-col>
          <el-col class="col" :span="3"></el-col>
        </el-row>
      </div>
      <div style="margin-top: 6px">
        <span style="font-weight: bold; font-size: 26px;">配送信息</span>
        <el-row>
          <el-col class="col" :span="6">配送方式</el-col>
          <el-col class="col" :span="18" style="color: red">{{printOrder.deliveryName}}</el-col>
        </el-row>
        <el-row>
          <el-col class="col" :span="6">收货地址</el-col>
          <el-col class="col" :span="18">{{printOrder.orderLogistics.receiverAddr}}</el-col>
        </el-row>
        <el-row>
          <el-col class="col" :span="6">收货人</el-col>
          <el-col class="col" :span="18">{{printOrder.orderLogistics.receiverName}}</el-col>
        </el-row>
        <el-row>
          <el-col class="col" :span="6">联系电话</el-col>
          <el-col class="col" :span="18">{{printOrder.orderLogistics.receiverMobile}}</el-col>
        </el-row>
      </div>
      <div style="margin-top: 6px">
        <span style="font-weight: bold; font-size: 26px">打单记录</span>
        <el-row>
          <el-col class="col" :span="4">编号</el-col>
          <el-col class="col" :span="6">运单号</el-col>
          <el-col class="col" :span="4">打印次数</el-col>
          <el-col class="col" :span="6">打单时间</el-col>
          <el-col class="col" :span="4">操作</el-col>
        </el-row>
        <el-row>
          <el-col class="col" :span="4">{{printOrder.orderLogistics.logisticsName}}</el-col>
          <el-col class="col" :span="6">{{printOrder.orderLogistics.deliveryNo}}</el-col>
          <el-col class="col" :span="4">{{printOrder.orderLogistics.printTimes}}</el-col>
          <el-col class="col" :span="6">{{printOrder.orderLogistics.updateTime}}</el-col>
          <el-col class="col" :span="4">
            <el-button type="info" @click="handlePrintOrder">打印</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
// import AddOrUpdate from './orderLogistics-add-or-update'
export default {
  data () {
    return {
      dataList: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      printOrder:{
        orderLogistics:{}
      },
      deviceList: [],
      deviceNo: null,
      infoVisible:false,
      lastInputStr: null,
      scanOrderNo: null,
      searchForm: {}, // 搜索
      dataListLoading: false,
      addOrUpdateVisible: false
    }
  },
  components: {
    // AddOrUpdate
  },
  created () {
    this.getDeviceList();
  },
  mounted () {
  },
  methods: {
    getDeviceList(){
      this.$http({
        url: this.$http.adornUrl('/print/printDevice/getDeviceList'),
        method: 'GET',
        params: this.$http.adornParams(),
      }).then(({data}) => {
        if(data){
          this.deviceList = data;
        }
      }).catch((error) => {

      })
    },
    scanMatchPrintOrder(value){
      let substr;
      if(this.lastInputStr != null){
        substr = value.replace(new RegExp(this.lastInputStr), "");
      }else{
        substr = value;
      }
      if(!this.deviceNo){
        this.$message.error("请选择打印设备");
      }
      if(substr){
        this.scanOrderNo = substr;
        let dataBody = {orderNo: substr, deviceNo: this.deviceNo};
        this.$http({
          url: this.$http.adornUrl('/logistics/scanDelivery'),
          method: 'POST',
          data: this.$http.adornData(dataBody),
        }).then(({data}) => {
          if(data){
            this.getLogisticsInfo(this.scanOrderNo);
        }
          this.lastInputStr = substr;
        }).catch((error) => {
          this.lastInputStr = substr;
          this.$message.error(error)
        })
      }
    },
    getLogisticsInfo(orderNo){
      this.$http({
        url: this.$http.adornUrl('/logistics/getLogisticsInfo'),
        method: 'GET',
        params: this.$http.adornParams({orderNo:orderNo}),
      }).then(({data}) => {
        if(data){
          this.printOrder = data;
        }
        this.infoVisible = true;
      }).catch((error) => {

      })
    },
    handlePrintOrder(){
      if(!this.deviceNo){
        this.$message.error("请选择打印设备");
      }
      this.$http({
        url: this.$http.adornUrl('/logistics/printOrder'),
        method: 'POST',
        data: this.$http.adornData({orderNo: this.scanOrderNo, logistics: this.printOrder.orderLogistics.logistics, deviceNo: this.deviceNo}),
      }).then(({data}) => {
        if(data){
          this.getLogisticsInfo(this.scanOrderNo);
        }
      }).catch((error) => {
        this.$message.error("打印失败")
      })
    }
  }
}
</script>
<style lang="scss">
  .col{
    height: 40px;
    border: gainsboro 1px solid;
    font-size: 20px;
    line-height: 40px;
    text-align: center;
  }
</style>
