/**
* Created by Xinhe on 2018/2/11.
*/
<template>
  <div>
    <SearchBar placeHolder="placeHolder"
               @SearchBegin="searchBegin"
               :inputStyle="{ width :'400px',}"
               @SearchEnd="searchEnd"
               :showClear="showClear"
               :search="search"/>
    <el-tag :type="isSearching?'success':''"> 正在搜索：{{isSearching}}</el-tag>
    <el-switch
      style="margin-left: 20px"
      v-model="showClear"
      active-text="显示清空">
    </el-switch>
  </div>
</template>

<script>
  import components from '../../components/index'

  export default {
    components,
    data() {
      return {
        isSearching: false,
        showClear: true
      }
    },
    methods: {
      delay(ms) {
        return new Promise(resolve => setTimeout(resolve, ms))
      },
      async search(key) {
        console.log('search key: ', key)
        await this.delay(Math.random() * 5000)
      },
      searchBegin() {
        console.log('searchBegin')
        this.isSearching = true
      },
      searchEnd() {
        console.log('searchEnd')
        this.isSearching = false
      }
    }
  }
</script>

<style>
</style>
