<template>
  <div class="searchClass" :style="width?('width: '+(width-37)+'px;'):'width:100%;'">
    <iInput
      class="searchInputClass"
      :placeholder="placeholder"
      @on-clear="clear"
      @on-enter="search"
      @on-change="change"
      @on-focus="focus"
      @on-blur="blur"
      @on-keyup="keyup"
      @on-keypress="keypress"
      @on-keydown="keydown"
      :disabled="disabled"
      v-model="inputValue"
      clearable/>
    <Button type="primary" @click="search" class="searchButtonClass">
        <Icon :custom="'fa '+custom+' fa-fw'" aria-hidden="true"/>
    </Button>
  </div>
</template>
<script>

export default {
  name: 'SearchInput',
  props: {
    custom: {
      type: String,
      default: 'fa-search'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请输入搜索内容'
    },
    width: {
      type: Number,
      default: null
    },
    value: {
      type: String,
      default: ''
    },
    original: {// 是否不处理输入的内容，即：不将单引号转换为两个单引号
      type: Boolean,
      defalut: false,
    }
  },
  computed: {
  },
  data() {
    return {
      inputValue: this.getValue(this.value)
    }
  },
  methods: {
    /**
     * @description: // CP-1820 替换一个单引号为两个单引号 huwenbin 2020/12/21
     * @author: huwenbin
     * @Date: 2020/12/21 11:35
     */
    getValue(value) {
      if (value != null && !this.original) {
        return value.replace(/''/g, "'")
      }
      return value
    },
    /**
     * @description: // CP-1820 替换一个单引号为两个单引号 huwenbin 2020/12/21
     * @author: huwenbin
     * @Date: 2020/12/21 11:35
     */
    convertValue(value) {
      if (value != null && !this.original) {
        return value.replace(/'/g, "''")
      }
      return value
    },
    focus() {
      this.$emit('on-focus')
    },
    blur() {
      this.$emit('on-blur')
    },
    enter() {
      this.$emit('on-enter')
    },
    keyup() {
      this.$emit('on-keyup')
    },
    keypress() {
      this.$emit('on-keypress')
    },
    keydown() {
      this.$emit('on-keydown')
    },
    change() {
      this.$emit('update:value', this.convertValue(this.inputValue))
      this.$emit('on-change')
    },
    clear() {
      this.$emit('on-clear')
    },
    search() {
      this.$emit('on-click')
    }
  }
}
</script>
<style>
.searchClass {
  display: inline-flex;
  border-radius: 5px;
  border: 1px solid rgba(200, 200, 200, 0);
}
.searchClass:hover{
  border-color: #57a3f3;
  -webkit-transition: all .5s;
  transition: all .5s;
}
.searchClass:focus-within{
  border-color: #57a3f3;
  -webkit-box-shadow: 0 0 0 2px rgba(45,140,240,.2);
  box-shadow: 0 0 0 2px rgba(45,140,240,.2);
  background-position: 0 0%;
  -webkit-transition: all .5s;
  transition: all .5s;
}
.searchClass .searchButtonClass {
  width: 35px;
  text-align: center;
  padding-left: 7px;
  background: #fff;
  color: #808695;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
  border: 1px solid #dcdee2;
  border-left: 0px;
}
.searchClass .searchButtonClass:focus {
  outline: none;
  box-shadow: none;
}
.searchClass .searchInputClass .ivu-input-icon {
  right: 0px;
}
.searchClass  .searchInputClass input{
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
  border-right: 0px;
}
.searchClass .searchInputClass input:focus{
  outline: none;
  border: 1px solid #dcdee2;
  border-right: 0px;
  box-shadow: none;
}
.searchClass  .searchInputClass input:hover{
  border: 1px solid #dcdee2;
  border-right: 0px;
}
</style>
