<template>
  <view class="search-input-container">
    <input
      class="search-input"
      v-model="searchKeyword"
      :placeholder="placeholder"
      @focus="inputFocus"
      @blur="inputBlur"
      @input="searchUsers"
    />
  </view>
</template>

<script>
import { debounce } from '@/utils/handler'
export default {
  props: {
    placeholder: {
      type: String,
      default: '请输入人员姓名'
    },
    
  },
  data () {
    this.searchUsers = debounce(() => {
      this.$emit('search', this.searchKeyword);
    }, 200);
    return {
      searchKeyword: '',
    }
  },
  
  methods: {
    inputFocus () {
      this.$emit('searchViewShowEvent', true)
    },
    inputBlur () {
      const searchViewShow = this.searchKeyword ? true : false
      this.$emit('searchViewShowEvent', searchViewShow)
    },
    clearInput () {
      this.searchKeyword = ''
    }
  },
}
</script>

<style lang="scss" scoped>

.search-input-container {
  position: relative;

  .search-input {
    width: 100%;
    height: 35px;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0 40px 0 12px;
    font-size: 14px;
    color: #333;

    &::placeholder {
      color: #999;
    }
  }

  .search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
  }
}
</style>