<template>
  <div>
    <div class="selector-field-row">
      <el-input
        :model-value="displayText"
        readonly
        :placeholder="placeholder"
        style="flex:1"
      />
      <el-button
        type="primary"
        :disabled="disabled"
        style="margin-left:8px"
        @click="$emit('select')"
      >{{ buttonText }}</el-button>
      <el-button
        v-if="clearable && modelValue"
        style="margin-left:4px"
        @click="$emit('update:modelValue', null); $emit('clear')"
      >清除</el-button>
    </div>
    <div v-if="hint" :style="{ fontSize: '12px', color: hintType === 'disabled' ? '#c0c4cc' : '#909399', marginTop: '4px' }">
      {{ hint }}
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  modelValue: { type: [Number, String, Object], default: null },
  displayText: { type: String, default: '' },
  placeholder: { type: String, default: '请选择' },
  buttonText: { type: String, default: '选择' },
  disabled: { type: Boolean, default: false },
  clearable: { type: Boolean, default: true },
  hint: { type: String, default: '' },
  hintType: { type: String, default: 'normal' }
})

defineEmits(['select', 'clear', 'update:modelValue'])
</script>

<style scoped>
.selector-field-row {
  display: flex;
  align-items: center;
  width: 100%;
}
</style>
