<template>
  <div class="inputp">
    <div class="inputs" :class="{'disabled': disabled}">
      <u-icon name="search" size="35" class='searchimg' @click='search'/>
      <input type="text" v-model="value" :placeholder="placeholder" confirm-type="search" :disabled="disabled"
             inputmode="search" ref='searchinput' :focus='isfocus' class='scaninput' @input='search'>
      <u-icon name="scan" size="35" class="scanimg" @click='clickscan'/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchInput',
  props: {
    hasscanbtn: Boolean,
    isfocus: Boolean,
		disabled: Boolean,
    hasgosearch: Boolean,
    types: Number,
    placeholder: {
      type: String,
      default: '搜索车辆编号'
    },
    gourl: {
      type: String,
      default: '/pages/scan/scan'
    },
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    clickinput() {
      // var me = this;
      // if (me.hasgosearch) {
      //   console.log('需要跳转')
      //   uni.navigateTo({
      //     url: `${me.gourl}?type=${me.types}`
      //   })
      // }
    },
    search() {
			if(this.disabled) return
      var me = this;
      if (me.value === '') {
        uni.showToast({
          icon: 'none',
          title: '请先输入搜索内容'
        })
        return;
      }
      me.$emit('serach', me.value)
    },
    clickscan() {
			if(this.disabled) return
      var me = this;
      if (me.hasscanbtn) {
        uni.navigateTo({
          url: `${me.gourl}?cameratype=scan&type=${me.types}`
        })
        return;
      }
      uni.scanCode({
        success(res) {
          var result = res.result;
          var arrs = result.split('?')[1].split('&')
          var code = '';
          arrs.forEach(e => {
            var arr = e.split('=')
            if (arr[0] === 'code') {
              code = arr[1];
            }
          })
          me.$emit('inputchange', code);
        }
      })
    }
  },
  watch: {
    value(v) {
      var me = this;
      me.$emit('input', v)
    }
  }
}
</script>
<style lang="less" scoped>
.inputp {
  padding: 20upx;

  .inputs {
    background: #F2F2F2;
    border-radius: 20upx;
    position: relative;
		&.disabled {
			background-color: #f5f7fa;
			cursor: not-allowed;
		}

    .scaninput {
      padding: 20upx 80upx 20upx 80upx;
      line-height: 1em;
      height: 1em;
      min-height: 1em;
    }

    .searchimg {
      width: 1em;
      height: 1em;
      position: absolute;
      top: 25upx;
      left: 20upx;
    }

    .scanimg {
      width: 1em;
      height: 1em;
      position: absolute;
      top: 25upx;
      right: 20upx;
    }

    .searchbtn {
      position: absolute;
      right: 20upx;
      top: 15upx;
      border-radius: 5upx;
      background: #007AFF;
      color: #fff;
      width: 4em;
      line-height: 2em;
      text-align: center;
      font-size: 0.8em;
    }
  }
}
</style>
