<template>
  <div>
    <h1>基础用法</h1>
    <bxs-search
      v-model="value"
      placeholder="请输入关键字"
      @search="onSearch"
      />
    <h1>监听对应事件（配置公共历史搜索记录）</h1>
    <bxs-search
      v-model="value"
      placeholder="请输入关键字"
      show-action
      history
      @search="onSearch"
      @clear="onClear"
      @keypress="onKeyPress"
      @cancel="onCancel"
      />
    <h1>自定义行动按钮（配置交易模块历史搜索记录）</h1>
    <bxs-search
      v-model="value"
      show-action
      history="trade"
      @search="onSearch"
      @clear="onClear"
      @keypress="onKeyPress"
      @cancel="onCancel"
      @focus="onFocus"
      >
      <div 
        slot="action" 
        slot-scope="fn" 
        @click="onSearch(fn)"
        >
        搜索
      </div>
    </bxs-search>
    <p class="tip-text">
      {{ inputText }}<br>{{ keypressText }}
    </p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: '',
      inputText: '',
      keypressText: '',
    }
  },
  methods: {
    onSearch(o) {
      this.inputText = `搜索中..${this.value}`
      this.keypressText = ''
      if (o && o.addHistory) {
        o.addHistory(true)
      }
    },
    onFocus() {
      this.inputText = `得到焦点..${this.value}`
    },
    onCancel() {
      this.inputText = '取消 cancel'
      this.keypressText = ''
      this.value = ''
    },
    onClear() {
      this.inputText = '清空 clear'
      this.keypressText = ''
      this.value = ''
    },
    onKeyPress(ev) {
      this.keypressText = ev.code
      this.inputText = this.value
    },
  },
}
</script>
<style>
h1 {
  color: #999;
  font-size: 14px;
  margin: 30px 0 10px 10px;
}
.tip-text {
  text-align: center;
  margin-top: 20px;
}
</style>
