<script setup lang="ts">
import { UploadFilled, Search } from '@element-plus/icons-vue';
import { ElIcon } from 'element-plus';
import { defineProps, defineEmits, ref } from 'vue'

interface HomeTopSearchProps {
  placeholder: string;
}

interface HomeTopSearchEvents {
  (event: 'search', input: string): void
}

const { placeholder = '请输入' } = defineProps<HomeTopSearchProps>();

const emit = defineEmits<HomeTopSearchEvents>()

const inputRef = ref('')

const handleSearch = () => {
  emit('search', inputRef.value)
}
</script>

<template>
  <div class="home-top-search-block">
    <div class="custom-home-top-search">
      <el-input v-model="inputRef" :placeholder="placeholder"></el-input>
      <div class="ya-btn-icon upload-icon">
        <ElIcon>
          <UploadFilled />
        </ElIcon>
      </div>

      <div class="ya-btn-icon search-icon" @click="handleSearch">
        <ElIcon>
          <Search />
        </ElIcon>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home-top-search-block {
  display: flex;
}

.custom-home-top-search {
  width: 60%;
  min-width: 600px;
  display: flex;

  :deep(.el-input__wrapper) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .ya-btn-icon {
    width: 45px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    cursor: pointer;
  }

  .upload-icon {
    color: #0095FF;
    border: 1px solid var(--el-border-color);
    border-left: none;
    border-right: none;
    background: #fff;
  }

  .search-icon {
    background: #0095FF;
    color: #fff;
    border: 1px solid transparent;
    border-top-right-radius: var(--el-border-radius-base);
    border-bottom-right-radius: var(--el-border-radius-base);
  }
}
</style>
