<template>
  <van-search
    v-model="keyword"
    class="bgo-search"
    v-bind="$attrs"
    @search="forward('search', $event)"
    @input="forward('input', $event)"
    @focus="forward('focus', $event)"
    @blur="forward('blur', $event)"
    @clear="forward('clear', $event)"
    @cancel="forward('cancel', $event)"
  >
    <template #left-icon>
      <bgo-font-icon icon="fas search" color="#BFC1C2" />
    </template>
    
    <template #action>
      <slot name="action"></slot>
    </template>
  </van-search>
</template>

<script>
export default {
  name: "BgoSearch",
  props: {
    value: {
      type: String,
    },
  },
  data() {
    return {
      keyword: null,
    };
  },
  watch: {
    value(newVal) {
      this.keyword = newVal;
    },
    keyword(newVal) {
      this.$emit("input", newVal);
    },
  },
  methods: {
    forward(event, data) {
      this.$emit(event, data);
    },
  },
};
</script>

<style lang="scss">
@import "./index.scss";
</style>
