<template>
  <a-select
    v-model="selectedValue"
    placeholder="请选择账号"
    allow-clear
    filterable
    @change="handleChange"
  >
    <a-option v-for="account in filteredAccounts" :key="account.id" :value="account.id" :label="account.name">
      {{ account.name }}
    </a-option>
  </a-select>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { getPlacementAccountsList } from '@/api/all/propertyMarketing';

// 定义账号对象类型
interface Account {
  id: number;
  name: string;
}

const props = defineProps<{
  modelValue?: number | string;
}>();

const emit = defineEmits(['update:modelValue', 'change']);

// 响应式数据
const selectedValue = ref(props.modelValue);
const allAccounts = ref<Account[]>([]);
const filteredAccounts = ref<Account[]>([]);
const loading = ref(false);
const searchKeyword = ref('');

// 获取账号列表
const fetchAccounts = async () => {
  try {
    loading.value = true;
    const { code, data } = await getPlacementAccountsList({
      names: searchKeyword.value,
    });
    if (code === 200) {
      allAccounts.value = data;
      filteredAccounts.value = data;
    }
  } catch (error) {
    console.error('获取账号列表失败:', error);
  } finally {
    loading.value = false;
  }
};

// 搜索处理
const handleSearch = (value: string) => {

};

// 值变化处理
const handleChange = (value: number | string) => {
  emit('update:modelValue', [value]);
};

// 初始化获取数据
onMounted(fetchAccounts);
</script>
