<template>
  <div class="search-wrapper">
    <div class="search-main" :class="{ 'search-main-with-tabs': enableBillTypeSwitch }">
      <input v-model="inputValue" :placeholder="placeholder" @keyup.enter="handleSearch" class="search-input" />
      <div class="search-btn" @click="handleSearch">
        <img src="@/assets/icons/search-icon.png" alt />
        搜索
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  searchText: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: ''
  },
})

const emit = defineEmits(['search', 'update:searchText'])

const inputValue = computed({
  get: () => props.searchText,
  set: (value) => emit('update:searchText', value)
})



const handleSearch = () => {
  emit('search')
}

</script>

<style lang="scss" scoped>
.search-wrapper {
  width: 960px;
  height: 48px;
  .search-main {
    display: flex;
    padding-right: 3px;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
    width: 960px;
    height: 48px;
    background-color: rgba(255, 255, 255, 0.65);
    border-radius: 10px;
    border: 1px solid #fff;

    &:hover {
      border: 1px solid var(--color-main-active);
    }

    .search-input {
      border: none;
      outline: none;
      width: 838px;
      height: 48px;
      background-color: transparent;
      font-size: 14px;
      padding: 12px 16px;
      font-weight: 400;
      font-family: "Microsoft YaHei";
      line-height: 22px;
      color: rgba(59, 65, 75, 1);

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

    .search-btn {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 120px;
      height: 46px;
      margin-right: -3px;
      border-radius: 8px;
      background-color: rgb(5, 95, 194);
      font-size: 16px;
      font-weight: 400;
      font-family: "Microsoft YaHei";
      line-height: 22px;
      color: #fff;

      img {
        width: 18px;
        height: 18px;
        margin-right: 8px;
      }
    }
  }
}
</style>