<template>
  <vui-input
    v-model="keyword"
    :placeholder="placeholder"
    v-bind="$attrs"
    class="search"
    clearable
    @input="debounceSearch"
  >
    <i slot="prefix" class="el-input__icon search-icon" @click="goSearch"></i>
  </vui-input>
</template>

<script>
import {debounce} from '@/utils/common'

export default {
  name: 'Search',
  props: {
    placeholder: {
      type: String,
      default: '筛选工程名称',
    },
  },
  data() {
    return {
      keyword: '',
    }
  },
  methods: {
    goSearch() {
      this.$emit('on-search', this.keyword)
    },
    debounceSearch: debounce(function() {
      this.goSearch()
    }),
  },
}
</script>

<style lang="less">
.search {
  width: 180px;
  z-index: 10;
  border-radius: 20px !important;

  .search-icon {
    cursor: pointer;
    display: inline-block;
    width: 18px;
    margin-left: 5px;
    background: url('https://deepexi.oss-cn-shenzhen.aliyuncs.com/deepexi-services/common/search.svg')
      center / contain no-repeat;
    background-size: 16px auto;
  }

  .el-input__inner {
    border: 1px solid #cad1e8;
  }

  input {
    border-radius: 16px !important;
  }
}
</style>