<template>
  <section class="search-wrap">
    <div class="fxcol">
      <input
        ref="input"
        class="search-input"
        v-if="!dropDown"
        type="search"
        :value="value"
        :placeholder="placeholder"
        :disabled = "disabled"
        @input="$emit('input', $event.target.value)"
      >
      <input
        ref="input"
        class="search-input"
        v-if="dropDown"
        type="text"
        :value="value"
        :placeholder="placeholder"
        :disabled = "disabled"
        @input="$emit('input', $event.target.value)"
        @keyup="$emit('dropdownInput')"
      >
    </div>
    <a v-if="scanShow" class="icon-scan" @click="jumpQRCode"></a>
    <div v-if="scanShow && searchShow" class="spacing"></div>
    <div v-if="searchShow" class="icon-search" @click="$emit('toSearch')"></div>
    <div v-if="carryShow" class="spacing"></div>
    <div v-if="carryShow" class="search-carrier" @click="$emit('newCarrier')">新载具</div>
    <div v-if="bildShow" class="spacing"></div>
    <div v-if="bildShow" class="search-carrier" @click="$emit('tobild')">绑定</div>
    <div v-if="clearShow" class="search-cancel" @click="$emit('clearUp')">取消</div>
    <div v-show="dropDownLay" class="dropdown" :style="{'height': dheight}">
      <ul>
        <li v-for="(e, i) in arr" :key="i" @click="$emit('carrSearch', e.carrier_no)">{{e.carrier_no}}</li>
      </ul>
    </div>
  </section>
</template>

<script>
export default {
  name: 'SearchBox',
  props: {
    dropDown: {
      type: Boolean,
      default: false
    },
    dropHeight: {
      type: Number,
      default: 0
    },
    dropDownLay: {
      type: Boolean,
      default: false
    },
    value: String,
    placeholder: String,
    disabled: {
      type: Boolean,
      default: false
    },
    scanShow: {
      type: Boolean,
      default: true
    },
    searchShow: {
      type: Boolean,
      default: true
    },
    qrcodeUrl: {
      type: String,
      // default: 'loadBarCode'
      default: 'loadQRCode' // 照相机扫码
    },
    carryShow: {
      type: Boolean,
      default: false
    },
    bildShow: {
      type: Boolean,
      default: false
    },
    clearShow: {
      type: Boolean,
      default: false
    },
    liDisable: {
      type: Boolean,
      default: false
    },
    focus: {
      type: Boolean,
      default: false
    },
    qrType: String,
    arr: Array
  },
  data () {
    return {
      dheight: 'auto',
      qrcode: ''
    }
  },
  mounted () {
    this.dheight = (document.body.clientHeight / (100 * (document.documentElement.clientWidth / 750)) - this.dropHeight) + 'rem'
    if (this.focus) this.autoFocus()
    let _this = this
    window.lxqrcode = ''
    Object.defineProperty(window, 'lxqrcode', {
      get () {
        return ''
      },
      set (val) {
        if (val !== '') {
          _this.qrcode = val
          _this.handQRCode()
        }
      }
    })
  },
  destroyed () {
    window.lxqrcode = ''
  },
  methods: {
    // 输入框获取焦点
    autoFocus () {
      this.$refs.input.focus()
      this.$refs.input.select()
    },
    handQRCode () {
      let qrcode = this.qrcode
      let qrcodeArr = qrcode.split('#')
      switch (this.qrType) {
        case '01,04':
          if (qrcodeArr[0] === '01' || qrcodeArr[0] === '04') {
            this.$emit('input', qrcode)
            this.$emit('qrSearch', qrcodeArr[1])
          } else {
            this.toast('请扫描正确的载具或者物料二维码')
          }
          break
        case '02,03':
          if (qrcodeArr[0] === '02' || qrcodeArr[0] === '03') {
            this.$emit('input', qrcode)
            this.$emit('qrSearch', qrcodeArr[1])
          } else {
            this.toast('请扫描正确的班组号或货位号')
          }
          break
        case '03,04':
          if (qrcodeArr[0] === '03' || qrcodeArr[0] === '04') {
            this.$emit('input', qrcode)
            this.$emit('qrSearch', qrcodeArr[1])
          } else {
            this.toast('请扫描正确的货位或者载具二维码')
          }
          break
        case '04,05':
          if (qrcodeArr[0] === '04' || qrcodeArr[0] === '05') {
            this.$emit('input', qrcode)
            this.$emit('qrSearch', qrcodeArr[1])
          } else {
            this.toast('请扫描正确的点位或者载具二维码')
          }
          break
        case 'Discharge':// 04,05
          if (qrcodeArr[0] === '04' || qrcodeArr[0] === '05') {
            this.$emit('input', qrcode)
            this.$emit('qrSearch', qrcode)
          } else {
            this.toast('请扫描正确的点位或者载具二维码')
          }
          break
        case '02,04,05':
          if (qrcodeArr[0] === '02' || qrcodeArr[0] === '04' || qrcodeArr[0] === '05') {
            this.$emit('input', qrcode)
            this.$emit('qrSearch', qrcodeArr[1])
          } else {
            this.toast(`请扫描正确的${this.placeholder}二维码`)
          }
          break
        case 'qr':
          if (this.qrType === 'qr') {
            this.$emit('input', qrcode)
            this.$emit('qrSearch', qrcode)
          } else {
            this.toast(`请扫描正确的${this.placeholder}二维码`)
          }
          break
        default:
          if (qrcodeArr[0] === this.qrType) {
            this.$emit('input', qrcode)
            this.$emit('qrSearch', qrcodeArr[1])
          } else {
            this.toast(`请扫描正确的${this.placeholder}二维码`)
          }
      }
    },
    jumpQRCode () {
      let passData = (event) => {
        let qrcode = event.data.lxqrcode
        let qrcodeArr = qrcode.split('#')
        switch (this.qrType) {
          case '01,04':
            if (qrcodeArr[0] === '01' || qrcodeArr[0] === '04') {
              this.$emit('input', qrcode)
              this.$emit('qrSearch', qrcodeArr[1])
            } else {
              this.toast('请扫描正确的载具或者物料二维码')
            }
            break
          case '02,03':
            if (qrcodeArr[0] === '02' || qrcodeArr[0] === '03') {
              this.$emit('input', qrcode)
              this.$emit('qrSearch', qrcodeArr[1])
            } else {
              this.toast('请扫描正确的班组号或货位号')
            }
            break
          case '03,04':
            if (qrcodeArr[0] === '03' || qrcodeArr[0] === '04') {
              this.$emit('input', qrcode)
              this.$emit('qrSearch', qrcodeArr[1])
            } else {
              this.toast('请扫描正确的货位或者载具二维码')
            }
            break
          case '04,05':
            if (qrcodeArr[0] === '04' || qrcodeArr[0] === '05') {
              this.$emit('input', qrcode)
              this.$emit('qrSearch', qrcodeArr[1])
            } else {
              this.toast('请扫描正确的点位或者载具二维码')
            }
            break
          case 'Discharge':// 04,05
            if (qrcodeArr[0] === '04' || qrcodeArr[0] === '05') {
              this.$emit('input', qrcode)
              this.$emit('qrSearch', qrcode)
            } else {
              this.toast('请扫描正确的点位或者载具二维码')
            }
            break
          case '02,04,05':
            if (qrcodeArr[0] === '02' || qrcodeArr[0] === '04' || qrcodeArr[0] === '05') {
              this.$emit('input', qrcode)
              this.$emit('qrSearch', qrcodeArr[1])
            } else {
              this.toast(`请扫描正确的${this.placeholder}二维码`)
            }
            break
          case 'qr':
            if (this.qrType === 'qr') {
              this.$emit('input', qrcode)
              this.$emit('qrSearch', qrcode)
            } else {
              this.toast(`请扫描正确的${this.placeholder}二维码`)
            }
            break
          default:
            if (qrcodeArr[0] === this.qrType) {
              this.$emit('input', qrcode)
              this.$emit('qrSearch', qrcodeArr[1])
            } else {
              this.toast(`请扫描正确的${this.placeholder}二维码`)
            }
        }
        window.removeEventListener('qrcodeEvent', passData)
      }
      window.addEventListener('qrcodeEvent', passData)
      window.location.href = this.qrcodeUrl
    }
  }
}
</script>

<style lang="stylus">
@import '~@style/mixin'
.search-wrap
  position relative
  _wh(100%,.93rem)
  _fj()
  padding: .2rem .26rem
  background-color: #ffffff
  border-radius: 3px
.dropdown
  position absolute
  z-index 10000000
  top 1rem
  left 0
  background-color: #ffffff
  width 100%
  border-radius: .15rem
  overflow-y auto
  ul
    width 100%
    padding .1rem 0
    li
      _font(.28rem, .53rem, #929292)
      margin 0 .26rem
      border-bottom 1px solid #eeeeee
.liDisable
  background-color #dcdfe6
.search-input
  width 5rem
  max-width 5rem
  margin-right: .15rem
  _font(.28rem,.53rem,#929292)
  background: #ffffff
  &:disabled
    cursor: not-allowed
.icon-scan
  flex 0 0 .42rem
  _bis('../images/saoma.png',.42rem)
.icon-search
  flex 0 0 .38rem
  _bis('../images/search.png',.38rem)
.search-carrier
  flex 0 0 1rem
  _font(.28rem,.38rem,#929292,,center)
  border 1px solid #d1d1d1
  border-radius 5px
  padding 2px
.spacing
  flex 0 0 1px
  height .38rem
  background-color #d1d1d1
  margin 0 .15rem
.search-wrap_1
  border: 1px solid #dcdfe6
  padding: 0 0.15rem
  height: 0.6rem
  .search-input
    font-size: 0.26rem
    color: #606266
.search-wrap_2
  background-color: #f5f7fa
  border: 1px solid #e4e7ed
  padding: 0 0.15rem
  height: 0.6rem
  .search-input
    font-size: 0.26rem
    color: #c0c4cc
    background-color #f5f7fa
</style>
