<template>
  <a-select
    style="width: 100%"
    v-model:value="localValue"
    allowClear
    :placeholder="`列表项类型，默认${CommonListPageItemTypeOptions[0].label}`"
    :options="CommonListPageItemTypeOptions"
    @change="updateValue"
  />
</template>

<script setup lang="ts">
import { CommonListPageItemTypeOptions } from '@/pages/article/common/CommonListPage';
import { ref, watch } from 'vue';

const props = defineProps<{
  modelValue?: string;
}>();
const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void;
}>();

const localValue = ref<string>(props.modelValue || '');

watch(
  () => props.modelValue,
  (newValue) => {
    localValue.value = newValue || '';
  },
  { deep: true, immediate: true }
);

const updateValue = () => {
  emit('update:modelValue', localValue.value);
};
</script>