<template>
  <div>
    <co-header-search v-model="value" :result="filterResult" @submit="confirm">
      <fallback slot="left"></fallback>
    </co-header-search>
  </div>
</template>

<script type="es6">
export default {
  name: 'header-search',
  data() {
    return {
      value: '',
      defaultResult: [
        'Apple',
        'Banana',
        'Orange',
        'Durian',
        'Lemon',
        'Peach',
        'Cherry',
        'Berry',
        'Core',
        'Fig',
        'Haw',
        'Melon',
        'Plum',
        'Pear',
        'Peanut',
        'Other'
      ]
    };
  },
  computed: {
    filterResult() {
      return this.defaultResult.filter(value => new RegExp(this.value, 'i').test(value));
    }
  },
  methods: {
    confirm() {
      console.log('confirm');
    }
  }
};
</script>

<style scoped>
  .cus-fallback {
    min-width: inherit;
  }
</style>
