<template>
  <div class="search"
       @click="searchFocus">
    <div class="search__wrapper">

      <form action="javascript:void 0;">
        <input ref="search__inp"
               :class="['search__inp',{tc:isTC}]"
               type="search"
               v-model="searchValue"
               @input="searchInp"
               @blur="searchBlur"
               @keyup.enter="submit">
      </form>
      <div v-if="isShow"
           class="search-placeholder zui-table">
        <span class="search-placeholder__name zui-cell">{{placeholder}}</span>
        <i class="search-placeholder__icon zui-cell"></i>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Search',
  props: {
    placeholder: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    isTC: {
      type: Boolean,
      default: false
    }
  },
  components: {},
  data() {
    return {
      isShow: true,
      searchValue: this.value
    };
  },
  computed: {
  },
  created() {
  },
  methods: {
    searchFocus() {
      this.isShow = false;
      this.$refs['search__inp'].focus();
    },
    searchInp() {

    },
    searchBlur() {
      if (!this.searchValue) {
        this.isShow = true;
      }
    },
    submit() {
      this.$emit('update:value', this.searchValue);
      this.$emit('submit');
    }
  }

};
</script>

