<template>
  <div class='search flex items-center bg-app-dark-2 bg-opacity-30 text-sm px-3 py-1 rounded-3xl border border-app-blue-3 hover:border-app-blue-2'>
    <div class='search-input flex-grow'>
      <input type="text" class=" w-full bg-transparent" placeholder="输入项目名称/ID" v-model="text" @input="handleInput">
    </div>
    <template v-if="!showClear">
      <div class="flex items-center" @click="search">
        <app-icon size="20px" class="flex-grow-0" color="#ffffff" type='icon-sousuo'></app-icon>
      </div>
    </template>
    <template v-else>
      <div v-show="!isFocus" class="flex items-center" @click="search">
        <app-icon size="20px" class="flex-grow-0" color="#ffffff" type='icon-sousuo'></app-icon>
      </div>
      <div v-show="isFocus" class="flex items-center" @click="clean">
        <app-icon size="14px" class="flex-grow-0" color="#ffffff" type='icon-guanbi'></app-icon>
      </div>
    </template>
  </div>
</template>

<script lang="ts">
import Vue,{Component} from 'vue';
import { Icon } from 'ant-design-vue';

Vue.use(Icon)
const AppIcon = Icon.createFromIconfontCN({
  scriptUrl:'/iconfont.js'  // generated by iconfont.cn
});
export default Vue.extend({
  props: {
    showClear: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      text: '',
      isFocus: false
    }
  },
  components:{
    'app-icon':AppIcon as Component
  },
  methods: {
    search() {
      this.$nextTick(() => {
        this.$emit('search', this.text)
      })
    },
    clean() {
      this.text = ''
      this.isFocus = false
      this.$emit('clean')
    },
    handleInput() {
      // if (this.text !== '') {
      //   this.isFocus = true
      // }
    }
  }
});
</script>

