/**
* Created by zengjie on 16/9/23.
*/
<template>
  <div v-if="isInline" class="form-search form-search--inline"
       :class="{'is-empty' : !searchKey ,'form-item--small' : isSmall}" data-module="form.search">
    <input id="search-inline" type="search" placeholder="Search" :value="value" @input="onInput" @keyup.enter="search">
    <button type="button" tabindex="-1" class="form-search__clear  icon-clear" data-list-clear=""
            @click="clear"><span class="aria--visible">Clear filter</span></button>
  </div>

  <div v-else class="form-search " :class="{'is-empty' : !searchKey ,'form-item--small' : isSmall}"
       data-module="form.search">
    <label class="aria--visible" for="search">Search</label>
    <input id="search" type="search" placeholder="Search" :value="value" @input="onInput" @keyup.enter="search">
    <button type="button" tabindex="-1" class="form-search__clear  icon-clear" @click="clear">
      <span class="aria--visible">Clear filter</span>
    </button>
    <button id="search-button" class="form-search__submit" tabindex="-1" @click="search">
      <span class="icon-search"></span>
      <span class="aria--visible">Search</span>
    </button>
  </div>

</template>

<script>
  /**
   * 构建search组件
   * 触发搜索有3种方式：1 keyup默认延迟10毫秒；2.回车；3.点击按钮
   * options:{
   *  delay : 延迟触发，默认300毫秒
   *  isSmall：是否采用 small 的 size
   *  isInline： 是否采用 inline 的样式
   * }
   * 回调：search() 回传搜索的key去调用远程服务或者本地搜索
   */
  module.exports = {
    data: function () {
      return {
        searchKey: ''
      };
    },
    props: {
      value: String,
      delay: { // search 延迟
        type: Number,
        default: 300
      },
      isSmall: {
        type: Boolean,
        default: false
      },
      isInline: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      searchKeyWord: function () {
        return this.searchKey.replace(/(^\s*)|(\s*$)/g, '');
      }
    },
    methods: {
      clear: function () {
        this.searchKey = '';
      },
      onInput: function (e) {
        var vm = this;
        vm.searchKey = e.target.value || '';
        vm.$emit('input', vm.searchKeyWord);
        if (vm.delayTimeout) {
          clearTimeout(vm.delayTimeout);
        }
        vm.delayTimeout = setTimeout(function () {
          vm.search();
        }, vm.delay);
      },
      search: function () {
        this.$emit('sf-search', this.searchKeyWord);
      }
    }
  };
</script>
