<template>
  <div class="bottom-filter-tip">
    <div class="filter-label txtjustify">{{label}}</div>
    <div class="fxcol mgl20 relative">
      <input
        type="text"
        class="filter-input filter-scan-input search_input"
        ref="scaninput"
        :placeholder="keyCode === '' ? placeholder : keyCode"
        :disabled="disabled"
        :value="value"
        @focus="handleFocus($event)"
        @blur="handleBlur($event)"
        @input="handleChange($event)">
      <div class="button_box">
        <button class="search_box_icon fxcol" @click="handleScan">
          <span class="iconfont scan_icon" :class="{'scan_icon_checked': type === true}"></span>
        </button>
        <button class="search_box_icon fxcol" @click="handleKey">
          <span class="iconfont key_icon" :class="{'key_icon_checked': type === false}"></span>
        </button>
        <button v-show="seaShow === true" class="search_box_icon fxcol" @click="handleSearch">
          <span class="iconfont search_icon" :class="{'key_icon_checked': type === false}"></span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchBox',
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    value: String,
    label: String,
    focused: {
      type: Boolean,
      default: false
    },
    seaShow: {
      type: Boolean,
      default: true
    },
    keyCode: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      placeholder: '',
      type: '',
      cur: ''
    }
  },
  mounted () {
    if (!this.focused) this.handleScan()
  },
  methods: {
    handleScan () {
      this.$refs.scaninput.focus()
      this.placeholder = '请扫码键输入'
      this.type = true
      this.$emit('input', '')
    },
    handleKey () {
      this.$refs.scaninput.focus()
      this.placeholder = '请键盘输入'
      this.type = false
      // this.$emit('input', this.cur)
    },
    handleFocus ($event) {
      this.cur = $event.target.value
      this.placeholder = '请扫码键输入'
      this.type = false
      // $event.target.value = ''
      // this.$emit('input', $event.target.value)
    },
    handleBlur ($event) {
      this.type = ''
      this.placeholder = ''
      // if ($event.target.value === '') {
      //   $event.target.value = this.cur
      // }
      this.$emit('input', $event.target.value)
    },
    handleChange ($event) {
      if ($event.target.value) {
        if (this.type) {
          this.cur = $event.target.value.split('##')[0]
          let _this = this
          setTimeout(() => {
            _this.$emit('input', this.cur)
            _this.$emit('handleChange', this.cur, true)
            _this.$emit('getScanTxt', $event.target.value)
          }, 20)
          this.$refs.scaninput.blur()
        } else if (!this.type) {
          this.cur = $event.target.value
          this.$emit('input', this.cur)
          this.$emit('handleChange', this.cur, false)
        } else {
          this.cur = $event.target.value
        }
      }
    },
    handleSearch () {
      this.$emit('handleChange', this.cur, true)
      this.$refs.scaninput.blur()
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.search_input
 padding-right 2.1rem
.button_box
  _fj()
  position absolute
  top 50%
  transform translateY(-50%)
  right 1px
  // height .9rem
.search_box_icon
  _wh(.7rem, 100%)
  background-color #fff
</style>
