<template>
  <div class="autocomplete-container">
    <div class="input-group">
      <span class="input-label">单元名称：</span>
      <el-autocomplete
        v-model="build.unitName"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入单元名称"
        @select="handleSelect"
        class="autocomplete-input"
      
      />
    </div>

    <div class="input-group">
      <span class="input-label">建筑楼层：</span>
      <el-autocomplete
        v-model="build.unitFloor"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入建筑楼层"
        @select="handleSelect"
        class="custom-autocomplete"
        
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const props = defineProps(['build'])

// 响应式数据
const links = ref([])

// 初始化数据
const loadAll = () => [
  { value: '建筑2', link: '#' },
  { value: '2号楼', link: '#' },
  { value: '3号楼', link: '#' },
  { value: 'A单元', link: '#' },
  { value: 'B单元', link: '#' },
  { value: 'C单元', link: '#' },
  { value: '一层', link: '#' },
  { value: '二层', link: '#' },
  { value: '三层', link: '#' }
]

// 搜索过滤函数
const createFilter = (queryString) => (item) => 
  item.value.toLowerCase().includes(queryString.toLowerCase())

// 异步查询方法
let timeout
const querySearchAsync = (queryString, cb) => {
  const results = queryString 
    ? links.value.filter(createFilter(queryString))
    : links.value

  clearTimeout(timeout)
  timeout = setTimeout(() => cb(results), 300 * Math.random())
}

// 选择处理
const handleSelect = (item) => {
  console.log('选中项:', item)
}

// 生命周期钩子
onMounted(() => {
  links.value = loadAll()
})
</script>

<style scoped>
.autocomplete-container {
  padding: 20px;
  color: azure;
  width: 90%;
  /* max-width: 600px; */
  margin: 0 auto;
}

.input-group {
  margin-top: 6%;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.input-label {
  width: 120px;
  font-size: 17px;
  color: #fff;
}

.autocomplete-input {
  width: 10%;
  margin-left: 10px;
  
}

.autocomplete-input .el-input__inner {
  background-color: #b41c1c;  /* 背景色 */
  color: #910000;               /* 文字颜色 */
  border-color: #dd0808;       /* 边框颜色 */
}

@media (max-width: 768px) {
  .input-group {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .input-label {
    margin-bottom: 8px;
    width: auto;
  }
  
  .autocomplete-input {
    width: 100%;
    margin-left: 0;
  }
}
</style>