<!--
 * @Author: xiejiang
 * @Date: 2023-07-13 10:27:58
 * @LastEditors: xiejiang
 * @LastEditTime: 2024-12-11 21:54:54
 * @Description: 搜索组件
-->
<template>
  <div class="sreach-with-button-wrap" :style="{ width }">
    <t-input
      v-model.trim="searchKey"
      clearable
      :placeholder="placeholder"
      borderless
      @enter="handleFullySearch"
      :on-clear="handleClearSearch"
    >
      <template #prefix-icon>
        <SearchIcon />
      </template>
    </t-input>
    <t-button class="search-btn !ml-[8px]" :loading="loading" @click="handleFullySearch"> 搜索 </t-button>
  </div>
</template>

<script setup name="SearchWithButton" lang="ts">
const emit = defineEmits<{
  'update:modelValue': [value: string]
  onSearch: [value: string]
  clear: []
}>()
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  // 搜索栏占位符
  placeholder: {
    type: String,
    required: false,
    default: '搜索'
  },
  // 搜索栏宽度
  width: {
    type: String,
    required: false,
    default: '320px'
  },
  loading: {
    type: Boolean,
    default: false
  }
})
const searchKey = ref('')
const handleClearSearch = () => {
  emit('update:modelValue', searchKey.value)
  emit('clear')
}
const handleFullySearch = () => {
  emit('onSearch', searchKey.value)
}
watch(
  () => searchKey.value,
  () => {
    emit('update:modelValue', searchKey.value)
  }
)
watch(
  () => props.modelValue,
  () => {
    searchKey.value = props.modelValue
  }
)
</script>

<style lang="less" scoped>
.sreach-with-button-wrap {
  display: flex;
  align-items: center;
  padding: 0 4px;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid var(--td-gray-color-1);
  border-radius: 3px;
  background-color: var(--td-gray-color-1);

  .search-btn {
    height: 24px;
    padding: 5px 15px;
    border-radius: 3px;
  }

  :deep(.t-input__wrap) {
    max-width: calc(100% - 68px);
  }

  :deep(.t-input) {
    background-color: var(--td-gray-color-1);
    border: none;
    box-shadow: none;

    &:hover,
    &:focus {
      border: none;
      box-shadow: none;
    }

    .t-icon {
      color: var(--td-font-gray-4);
    }
  }
}
</style>
