<template>
  <div>
    <van-search
      v-model="value"
      show-action
      :clearable="false"
      background="#F7F7FA"
      placeholder="请输入关键字"
      @search="onSearch"
    >
      <template #action>
        <img
          v-if="isActive"
          src="../../../../assets/icons/delete_active.png" 
          class=" w-9 h-9"
          @click="onCancel"
        />
         <img
          v-else  
          src="../../../../assets/icons/delete.png" 
          class=" w-9 h-9"
        />
      </template>
    </van-search>
  </div>
</template>

<script lang="ts">
import { defineComponent,ref,computed } from 'vue'

export default defineComponent({
  setup (props,context) {
    const value = ref('')
    const isActive = computed(()=> value.value != '' ? true : false)
    const onSearch = (val:string) => { context.emit('OnSearch',true,val)}
    const onCancel = () =>{
      context.emit('OnCancel',false)
      value.value = ''
    }
    return {
      value,
      onSearch,
      onCancel,
      isActive
    };
  }
})
</script>

<style scoped>

</style>