<template>
  <div class="container">
    <div class="left-search">
      <a-input v-model="keyword" placeholder="请输入关键字进行搜索" allow-clear @keyup.enter="toSearchData"></a-input>
      <a-button style="background-color: #00f; color: #fff" @click="toSearchData">搜索</a-button>
    </div>
    <div class="right-upload">
      <AsyncPath></AsyncPath>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import AsyncPath from './AsyncPath.vue';
import { bus_search } from '../../base/event-bus';

const keyword = ref('');
const toSearchData = () => {
  if (keyword.value.trim().length) {
    bus_search.emit(keyword.value);
  }
};
</script>
<style scoped lang="css">
.container {
  display: flex;
  /* justify-content: space-between; */
  gap: 10px;
  height: 60px;
  padding: 0 20px;
  background-color: #fff;
  .left-search {
    display: flex;
    align-items: center;
    gap: 10px;
    .arco-input-wrapper {
      width: 520px;
    }
  }
}
</style>
