<template>
  <div class="search-bar">
    <search
      v-model="value"
      placeholder="输入教师姓名搜索"
      :auto-fixed="false"
      @on-submit="onSubmit"
      @on-cancel="onCancel"
    ></search>
  </div>
</template>

<script>
import { Search } from 'vux'
export default {
    name: 'SearchBar',
    components: {
        Search
    },
    data () {
        return {
            value: '',
            hasSearch: false
        }
    },
    methods: {
        onSubmit () {
            if (this.value.trim() === '') {
                this.$vux.toast.text('请输入教师姓名', 'middle')
                return
            }
            this.hasSearch = true
            this.$emit('submit', this.value)
        },
        onCancel () {
            this.value = ''
            if (this.hasSearch) { this.$emit('cancel') }
        }
    // onClear () {
    //   this.value = ''
    //   this.$emit('clear')
    // }
    }
}
</script>

<style lang="stylus" scoped>
.search-bar
  background-color #fff
  >>> input[type='search']
    border-radius 0
    margin-bottom 0
    text-align left
  >>> .weui-search-bar__label
    line-height 26px
</style>
