<template>
  <div class="n-app-container">
    <el-form label-width="300px">
      <el-form-item label="客户">
        <el-select v-model="customerId" placeholder="客户" style="width:200px" filterable>
          <el-option
            v-for="item in customers"
            :key="item.Id"
            :label="item.CompanyName"
            :value="item.Id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="打印模式">
        <el-select v-model="selectPrintType" placeholder="打印模式" style="width:200px">
          <el-option label="SKU" value="1" />
          <el-option label="SPU+Size" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="当前SKU码/SPU码">
        <el-input ref="barCode" v-model="barCode" style="width:500px" @keyup.enter.native="changeCode()" /></el-form-item>
      <el-form-item v-if="selectPrintType=='2'" label="当前尺码">
        <el-input ref="size" v-model="size" style="width:500px" @keyup.enter.native="changeSize()" /></el-form-item>
      <el-form-item label="单件模式">
        <el-checkbox v-model="isOne" />
      </el-form-item>
      <el-form-item label="打印数量">
        <el-input ref="printQty" v-model="printQty" type="number" style="width:500px" @keyup.enter.native="changePrintQty()" /></el-form-item>
    </el-form>
    <p v-if="errorMessage!=''" style="color:red">{{ errorMessage }}</p>
    <h3>打印记录</h3>
    <el-table :data="sdata">
      <el-table-column label="SKU/SPU" prop="sku" />
      <el-table-column label="尺码" prop="size" />
      <el-table-column label="打印数量" prop="qty" />
      <el-table-column label="打印状态" prop="status" />
    </el-table>
  </div>
</template>
<script>
import { GetSku } from '@/api/order/pick'
import { _getCustomers } from '@/api/baseInfo'
import { initClodop } from '@/utils/print'
export default {
  name: 'BarCode',
  data() {
    return {
      printQty: '',
      selectPrintType: '1',
      barCode: '',
      size: '',
      input: '',
      isOne: false,
      sdata: [],
      errorMessage: '',
      printList: [],
      printIndex: 0,
      customers: [],
      customerId: 223,
      skuId: 0,
      bridgeId: '',
      bridgeName: ''
    }
  },
  mounted() {
    _getCustomers().then(response => {
      this.customers = response
    })
  },
  methods: {
    changeCode() {
      this.errorMessage = ''
      this.size = ''
      if (this.selectPrintType == '1') {
        this.changeSku()
      } else {
        this.$refs['size'].focus()
      }
    },
    changeSize() {
      this.changeSku()
    },
    changeSku() {
      GetSku(this.barCode, this.size, this.customerId).then(r => {
        this.$refs['printQty'].focus()
        this.skuId = r.Id
        this.printQty = ''
        if (this.isOne) {
          this.printQty = '1'
          this.changePrintQty()
        }
      }).catch(r => {
        this.errorMessage = r
      })
    },
    getBind() {
      return this.bridgeId + ';' + this.bridgeName
    },
    changePrintQty() {
      initClodop()
      var url = 'http://120.24.149.148:9501/api/BarCode/GetBarCodesAsOne?SkuId=' + this.skuId + '&qty=' + this.printQty
      console.info(url)
      WLODOP.ADD_PRINT_PDF(0, 0, '8cm', '4cm', url)
      var r = WLODOP.PRINT()
      this.$refs['barCode'].focus()
      this.sdata.push({
        sku: this.barCode + '',
        size: this.size + '',
        qty: this.printQty + '',
        taskId: r,
        status: '提交中'
      })
      this.barCode = ''
    }
  }
}
</script>
