<template>
  <div class="c-search flex items-center justify-between">
    <input
      type="text"
      class="outline-none w-full mx-3"
      v-model="searchValue"
      :placeholder="placeholder"
    />
    <div
      class="btn-search flex-shrink-0"
      @click="
        !loading && searchResult(searchValue)
        searchValue = ''
      "
      v-loading="loading"
    >
      <img
        class="w-4 h-4"
        style="margin-top: 11px; margin-left: 13px;"
        src="@/assets/images/blockChainBrowser/home/search.png"
      />
    </div>
  </div>
</template>

<script lang="ts">
import VueTypedMixins from 'vue-typed-mixins'
import ChainSearchMixin from '@/mixin/componentsMixin/ChainSearch'
export default VueTypedMixins(ChainSearchMixin).extend({
  data() {
    return {
      searchValue: '',
    }
  },
})
</script>

<style scoped>
.c-search {
  height: 38px;
  background: #ffffff;
  border-radius: 25px;
  border: 1px solid #dee1e6;
}
.btn-search {
  width: 49px;
  height: 38px;
  background: #2545cb;
  border-radius: 0px 25px 25px 0px;
}
</style>
