<template>
  <Select showSearch v-model:value="selectedValue" placeholder="请选择计划" allowClear filterable @change="handleChange">
    <Option v-for="item in listData" :key="item.id" :value="item.id" :label="item.name">
      {{ item.name }}
    </Option>
  </Select>
</template>

<script setup lang="ts">
import { Select } from 'ant-design-vue';
const { Option } = Select;
import { ref, computed, onMounted, type PropType } from 'vue';
import { getplacementAccountProjectsLlist } from '@/api/all/propertyMarketing';

interface Account {
  id: number;
  name: string;
}

const props = defineProps({
  modelValue: {
    type: Array as PropType<number[]>,
    default: () => [],
  },
});

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

// 响应式数据
const selectedValue = ref<number | undefined>(props.modelValue?.[0]);
const allAccounts = ref<Account[]>([]);
const listData = ref<Account[]>([]);
const loading = ref(false);
const searchKeyword = ref('');

const fetchData = async () => {
  try {
    loading.value = true;
    const { code, data } = await getplacementAccountProjectsLlist({
      names: searchKeyword.value,
    });
    if (code === 200) {
      allAccounts.value = data;
      listData.value = data;
    }
  } catch (error) {
    console.error('获取账号列表失败:', error);
  } finally {
    loading.value = false;
  }
};
const handleChange = (value: any) => {
  let data = [];
  if (value === '') {
    data = [];
  } else {
    data = [value];
  }
  emit('update:modelValue', data);
};

onMounted(fetchData);
</script>
