<template>
  <el-autocomplete
    v-model="inputValue"
    :fetch-suggestions="fetchSuggestions"
    placeholder="请输入商品编码"
    :trigger-on-focus="false"
    :debounce="300"
    :clearable="true"
    @select="handleSelect"
    @clear="handleClear"
    @input="handleInput"
    :style="{ width: inputWidth }"
    size="small"
    class="product-code-autocomplete"
    popper-class="product-code-autocomplete-popper"
  >
    <template #default="{ item }">
      <div class="suggestion-item">
        <div class="product-code">{{ item.value }}</div>
        <div class="product-info" :title="item.label">{{ item.label }}</div>
      </div>
    </template>
  </el-autocomplete>
</template>

<script>
import { getProductCodeSuggestions } from "@/api/sales-analysis";
export default {
  name: 'ProductCodeAutocomplete',
  props: {
    value: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '200px'
    },
    placeholder: {
      type: String,
      default: '请输入商品编码'
    }
  },
  data() {
    return {
      inputValue: this.value,
      isLoading: false
    }
  },
  computed: {
    inputWidth() {
      return this.width
    }
  },
  watch: {
    value(newVal) {
      this.inputValue = newVal
    }
  },
  methods: {
    /**
     * 获取联想建议
     */
    async fetchSuggestions(queryString, callback) {
      if (!queryString || queryString.trim().length < 1) {
        callback([])
        return
      }

      try {
        this.isLoading = true
        const response = await getProductCodeSuggestions({ keyword: queryString.trim() })

        if (response.code === 200) {
          callback(response.data || [])
        } else {
          callback([])
        }
      } catch (error) {
        console.error('获取商品编码联想数据失败:', error)
        callback([])
      } finally {
        this.isLoading = false
      }
    },

    /**
     * 选择建议项
     */
    handleSelect(item) {
      this.inputValue = item.value
      this.$emit('input', item.value)
      this.$emit('select', item)
    },

    /**
     * 清空输入
     */
    handleClear() {
      this.inputValue = ''
      this.$emit('input', '')
      this.$emit('clear')
    },

    /**
     * 输入变化
     */
    handleInput(value) {
      this.inputValue = value
      this.$emit('input', value)
    }
  }
}
</script>

<style scoped>
.product-code-autocomplete {
  width: 100%;
}

.suggestion-item {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}

.product-code {
  font-weight: 500;
  font-size: 14px;
  color: #303133;
  margin-bottom: 4px;
}

.product-info {
  font-size: 12px;
  color: #909399;
  line-height: 1.4;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
</style>

<style>
.product-code-autocomplete-popper {
  max-width: 400px;
}

.product-code-autocomplete-popper .el-autocomplete-suggestion__wrap {
  max-height: 280px;
}

.product-code-autocomplete-popper .el-autocomplete-suggestion__list {
  padding: 0;
}

.product-code-autocomplete-popper .el-autocomplete-suggestion__item {
  padding: 8px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.product-code-autocomplete-popper .el-autocomplete-suggestion__item:last-child {
  border-bottom: none;
}

.product-code-autocomplete-popper .el-autocomplete-suggestion__item.highlighted {
  background-color: #f5f7fa;
}
</style> 