<template>
  <div :class="className">
    <input
      type="text"
      :placeholder="placeholder"
      :value="searchValue"
      :disabled="disabled"
      @input="onSearch(index,$event)"
    >
    <span :class="iconClassName">
      <Icon
        icon="zoom"
        v-if="searchValue.length<=0"
      />
      <!-- <Icon icon="circle_clear" v-else /> -->
    </span>
  </div>
</template>

<script>
import FormSize from '../scripts/mixins/form-size';
import WatchCurValue from '../scripts/mixins/wacth-cur-value';
import Icon from '../icon';

const name = 'hive-transfer-selectsearch';

export default {
  name,
  components: {
    Icon
  },
  mixins: [FormSize, WatchCurValue],
  props: {
    prefixClass: {
      type: String
    },
    disabled: {
      type: Boolean,
      default: false
    },
    searchValue: {
      type: String
    },
    placeholder: {
      type: String,
      default: '请输入搜索内容'
    },
    index: {
      type: Number
    },
    onSearch: {
      type: Function
    }
  },
  data() {
    return {
      prefixClassName: `${this.prefixClass}__search`,
      curSearchValue: this.searchValue
    };
  },
  computed: {
    className() {
      return [
        `${this.prefixClassName}`,
        {
          [`${this.prefixClassName}--disabled`]: this.disabled
        }
      ];
    },
    iconClassName() {
      return [
        `${this.prefixClassName}-icon-search`,
        {
          [`${this.prefixClassName}-icon--hide`]: this.value
        }
      ];
    }
  },
  watch: {},

  methods: {}
};
</script>
