<template>
  <a-input-group compact style="display: flex; width: 100%">
    <a-input v-model:value="model[field]" read-only :placeholder="placeholder" style="flex: 1" />
    <a-button type="primary" @click="emit('open')">选择</a-button>
    <a-button v-if="showClear" @click="emit('clear')">清除</a-button>
  </a-input-group>
</template>

<script lang="ts" setup>
  defineProps<{
    model: Recordable;
    field: string;
    placeholder?: string;
    showClear?: boolean;
  }>();

  const emit = defineEmits<{ (e: 'open'): void; (e: 'clear'): void }>();
</script>
