<template>
  <div class="header-filter">
    <div class="header-filter-input">
      <slot name="filterInput">
        <el-input
          class="header-filter-input"
          size="small"
          :placeholder="placeholder"
          @keyup.enter.native="search"
          v-model.trim="keyword"
          @input="auto && search"
          @clear="search"
          @blur="blur"
          clearable
        >
          <el-button type="primary" slot="append" icon="el-icon-search" @click="search()"></el-button>
        </el-input>
      </slot>
    </div>
    <div class="header-filter-btns">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { debounce } from 'throttle-debounce'

// 简单搜索组件
export default {
  name: 'SySimpleSearchBar',
  data() {
    return {
      keyword: this.value
    }
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入搜索关键字'
    },
    // 在input框输入是否自动搜索->也即，是否会自动触发@input事件
    auto: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    value(nVal) {
      this.keyword = nVal
    }
  },
  methods: {
    search: debounce(200, function() {
      // 执行搜索事件
      this.$emit('input', this.keyword)
      this.$emit('search', this.keyword)
    }),
    blur() {
      if (!this.auto) {
        this.$emit('input', this.keyword)
        this.$emit('search', this.keyword)
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
