<template>

    <div class="search" >
      <a-input
          style="width: 150px;"
          v-model:value="searchValue"
          placeholder="搜索点什么"
          enter-button
          @search="onSearch"
          allowClear
      >
        <template #prefix>
          <search-outlined />
        </template>
      </a-input>

      <!-- <div class="search-card">
      </div> -->

    </div>

</template>
<script lang='ts' setup >
import { computed, ref, watch } from 'vue'
import { SearchOutlined } from '@ant-design/icons-vue'

const searchValue = ref('')

const onSearch = () => {}

const data = new Map([
  ['rts', []]
])

const searchKey = ['rts', '物联网', 'iot', '数据中台', 'schedule']

const list = computed(() => data.get(searchKey.find(item => item.includes(searchValue.value))!))

watch(
  () => searchValue.value,
  () => {
    console.log(list.value)
  }
)

</script>
<style lang='less' scoped >
.search {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 12;
  .search-card {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    top: 32px;
    background-color: #fff;
  }
}
</style>
