<template>
  <div>
    <div class="searchBox">
      <input
        type="file"
        accept="image/*;capture=camera"
        style="display: none"
        id="fileSelect"
        @change="scanPalletCode($event)"
      />
      <input
        type="text"
        class="exinput"
        placeholder="请输入托盘编号"
        v-model.trim="data.containerNo"
        id="containerNo"
      />
      <img
        id="fileElem"
        src="@/assets/search.png"
        width="40"
        alt=""
        class="img"
        onclick="document.querySelector('#fileSelect').click()"
      />
    </div>
    <div class="searchPositionBox">
      <input
        type="file"
        accept="image/*;capture=camera"
        style="display: none"
        id="fileSelect1"
        @change="scanPositionCode($event)"
      />
      <canvas id="qrcanvas" style="display: none"></canvas>

      <input type="text" class="exinput" placeholder="请输入点位信息" v-model.trim="data.locationNo" id="position" />
      <img
        id="fileElem"
        src="@/assets/search.png"
        width="40"
        alt=""
        class="img"
        onclick="document.querySelector('#fileSelect1').click()"
      />
    </div>
    <div class="radio">
      <a-radio-group name="radioGroup" @change="onChange">
        <a-radio :value="1">空托盘</a-radio>
        <a-radio :value="2">空托盘垛</a-radio>
        <a-radio :value="4">货架</a-radio>
        <a-radio :value="3">带货托盘</a-radio>
      </a-radio-group>
    </div>
    <!-- <div class="radio">
      <a-radio-group :defaultValue="0" name="radioPodDirGroup" @change="onChangePodDir">
        <a-radio :value="0">货架方向-横向</a-radio>
        <a-radio :value="1">货架方向-纵向</a-radio>
      </a-radio-group>
    </div> -->
    <div class="searchBox">
      <input
        type="text"
        class="input"
        :disabled="disabled"
        placeholder="业务属性"
        v-model.trim="data.buessesstype"
        id="buessesstype"
      />
    </div>
    <div class="btn">
      <a-button class="btn1" type="primary" :disabled="btnSave_disable" @click="save()">确认</a-button>
      <a-button class="btn1" type="primary" @click="rest()">重置</a-button>
    </div>
  </div>
</template>

<script>
import Quagga from 'quagga' // ES6
import { add } from './api.js'

export default {
  data() {
    return {
      data: {
        locationNo: '',
        containerNo: '',
        containerType: '',
        // podDir: 0,
        isEmpty: 0,
        buessesstype: '',
      },
      radio: '0',
      disabled: false,
      btnSave_disable: false,
    }
  },
  computed: {},
  methods: {
    onChange(e) {
      if (e.target.value == 1) {
        this.data.buessesstype = 'emptyContainer'
        this.data.containerType = 'emptyContainer'
        this.data.isEmpty = 1
        this.disabled = true
      } else if (e.target.value == 2) {
        this.data.buessesstype = 'emptyContainerPile'
        this.data.containerType = 'emptyContainerPile'
        this.data.isEmpty = 2
        this.disabled = true
      } else if (e.target.value == 3) {
        this.data.containerType = this.data.buessesstype
        this.data.isEmpty = 3
        this.disabled = false
      } else if (e.target.value == 4) {
        this.data.buessesstype = 'containerRack'
        this.data.containerType = 'containerRack'
        this.data.isEmpty = 4
        this.disabled = true
      } else {
        this.$message.error('请选择容器类型！')
        return
      }
    },
    // onChangePodDir(e) {
    //   if (e.target.value == 0) {
    //     this.data.podDir = 0
    //   } else if (e.target.value == 1) {
    //     this.data.podDir = 1
    //   } else {
    //     this.$message.error('请选择货架方向！')
    //     return
    //   }
    // },

    async save() {
      let that = this
      this.btnSave_disable = true
      this.data.containerType = this.data.buessesstype

      if (this.data.containerNo == '') {
        that.$message.error('托盘条码不能为空！')
        return
      }

      if (this.data.locationNo == '') {
        that.$message.error('点位信息不能为空！')
        return
      }

      if (this.radio === 0) {
        that.$message.error('请选择托盘类型')
        return
      }
      try {
        let res = await add(this.data)
        if (res.success) {
          this.btnSave_disable = false
          this.$message.success(res.message)
        } else {
          this.btnSave_disable = false
          this.$message.error(res.message)
        }
      } catch (error) {
        this.btnSave_disable = false
      }
      this.rest()
    },

    rest() {
      this.data.locationNo = ''
      this.data.containerNo = ''
      this.buessesstype = ''
      this.containerType = ''
    },
    //点击二维码时间
    scanPalletCode(e) {
      this.getscanPalletCodeUrl()
      e.target.value = null
    },
    getscanPalletCodeUrl() {
      let input = document.querySelector('.searchBox input[type=file]')
      if (input.files && input.files.length) {
        this.decode(URL.createObjectURL(input.files[0]))
      }
    },

    scanPositionCode(e) {
      this.getscanPositionCodeUrl()
      e.target.value = null
    },

    getscanPositionCodeUrl() {
      let input = document.querySelector('.searchPositionBox input[type=file]')
      if (input.files && input.files.length) {
        this.decodePosition(URL.createObjectURL(input.files[0]))
      }
    },

    decode(src) {
      let that = this

      debugger
      Quagga.decodeSingle(
        {
          inputStream: {
            size: 800, // 这里指定图片的大小，需要自己测试一下
            singleChannel: false,
          },
          locator: {
            patchSize: 'medium',
            halfSample: false,
          },
          numOfWorkers: 1,
          decoder: {
            readers: [
              {
                format: 'code_128_reader', // ean_reader 这里指定ean条形码，就是国际13位的条形码   code39    code_128
                config: {},
              },
            ],
          },
          // readers: ['code_128_reader'],
          locate: true,
          src: src,
        },
        function (result) {
          if (!result) {
            console.log(result)
            return false
          }

          //识别结果
          if (result.codeResult) {
            console.log('图片中的条形码为：' + result.codeResult.code)
            that.data.containerNo = result.codeResult.code
          } else {
            that.$message({
              showClose: true,
              message: '未识别到图片中的条形码',
              type: 'error',
              duration: 2000,
            })
            console.log('未识别到图片中的条形码')
          }
        }
      )
    },

    decodePosition(src) {
      let that = this
      Quagga.decodeSingle(
        {
          inputStream: {
            size: 800, // 这里指定图片的大小，需要自己测试一下
            singleChannel: false,
          },
          locator: {
            patchSize: 'medium',
            halfSample: false,
          },
          numOfWorkers: 1,
          decoder: {
            readers: [
              {
                format: 'code_128_reader', // ean_reader 这里指定ean条形码，就是国际13位的条形码   code39    code_128
                config: {},
              },
            ],
          },
          // readers: ['code_128_reader'],
          locate: true,
          src: src,
        },
        function (result) {
          if (!result) {
            that.$message({
              showClose: true,
              message: '没有条形码',
              type: 'error',
              duration: 2000,
            })
            return false
          }

          //识别结果
          if (result.codeResult) {
            console.log('图片中的条形码为：' + result.codeResult.code)
            that.data.locationNo = result.codeResult.code
          } else {
            that.$message({
              showClose: true,
              message: '未识别到图片中的条形码',
              type: 'error',
              duration: 2000,
            })
            console.log('未识别到图片中的条形码')
          }
        }
      )
    },
    handleFileChange(evt) {
      console.log('evt', evt)
      const file = evt.target.files[0]
      const src = URL.createObjectURL(file)
      this.decode(src)
    },
  },
}
</script>

<style lang="less" scoped>
.searchBox {
  width: 90%;
  margin: 0 auto;
  margin-top: 10%;
  text-align: center;
}

.searchBox > .exinput {
  width: 70%;
  height: 2.1rem;
  vertical-align: top;
  height: 2.6rem;
  border-radius: 10px;
  font-size: 16px;
  /* border-radius:0.15rem; */
  border: 1px solid #53b5e3;
  color: #333;
  margin-right: 4%;
}

.searchBox > .img {
  width: 2.8rem;
  height: 2.8rem;
}

.input {
  width: 100%;
  vertical-align: top;
  height: 2.1rem;
  border-radius: 10px;
  font-size: 16px;
  /* border-radius:0.15rem; */
  border: 1px solid #53b5e3;
  color: #333;
  margin-right: 4%;
}

.searchPositionBox {
  width: 90%;
  margin: 0 auto;
  margin-top: 10%;
  text-align: center;
}

.searchPositionBox > .exinput {
  width: 70%;
  height: 2.1rem;
  vertical-align: top;
  border-radius: 10px;
  height: 2.6rem;
  font-size: 16px;

  /* border-radius:0.15rem; */
  border: 1px solid #53b5e3;
  color: #333;
  margin-right: 4%;
}

.searchPositionBox > .img {
  width: 2.8rem;
  height: 2.8rem;
  margin-right: 0.2rem;
}

.btn {
  margin-top: 10%;
  display: flex;
  flex: 1;
  justify-content: center;
}

.btn1 {
  margin: 15%;
}

.radio {
  line-height: 35px;
  font-size: 10px;
  justify-content: left;
  margin-right: 20%;
}

.font-size {
  font-size: 16px;
}

.grid-content {
  font-size: 20px;
  line-height: 35px;
  border-radius: 4px;
  min-height: 36px;
  margin-left: 20px;
  float: right;
  margin-right: 10px;
  margin-left: 10px;
}

.el-row {
  margin-top: 10%;
}
.el-radio {
  margin-right: 5px;
}

.radio {
  margin-top: 10%;
  display: flex;
  flex: 1;
  justify-content: center;
  width: 100%;
}
</style>
