<template>
  <div class="search flex items-center shadow-shadow1 overflow-hidden">
    <input
      type="text"
      :value="value"
      @input="(e) => setValue(e.target.value)"
      class="flex-grow outline-none"
      :placeholder="placeholder"
    />
    <div
      class="btn flex items-center justify-center cursor-pointer"
      @click="!loading && searchResult(value)"
      v-loading="loading"
    >
      {{ $t('lang.search') }}
    </div>
  </div>
</template>

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

<style scoped lang="scss">
.search {
  height: 50px;
  background: #ffffff;
  border-radius: 39px;
}

input {
  padding: 0 22px;
}

input::placeholder {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #7c88ad;
}

.btn {
  width: 132px;
  height: 44px;
  background: linear-gradient(90deg, #3892f4 0%, #2545cb 100%);
  border-radius: 39px;
  font-size: 20px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  ::v-deep .el-loading-spinner {
    display: flex;
    justify-content: center;
  }
}
</style>
