<template>
  <el-col :span="colSpan">
    <el-form-item :label="label" :prop="prop">
      <el-select v-bind="$attrs">
        <el-option v-for="item in computedItems" :value="item[props.value]" :label="item[props.label]"></el-option>
        <template v-for="(_value, name) in $slots" #[name]="scopeData">
          <slot :name="name" v-bind="scopeData"></slot>
        </template>
      </el-select>
    </el-form-item>
  </el-col>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

const _props = defineProps({
  label: String,
  prop: String,

  /**
   * 每行显示几个, 默认24
   */
  colSpan: {
    type: Number,
    default: 24
  },
  /**
   * 传入的标准数据项
   */
  items: {
    type: Array as () => any[],
    default: () => []
  },
  /**
   * 传入的字典数据
   */
  dicts: {
    type: Array as () => any[],
    default: () => []
  },
  /**
   * 自定义配置项，仅当 dicts 为空时使用
   * 默认配置: { label: 'label', value: 'value' }
   */
  props: {
    type: Object,
    default: () => ({
      label: 'label',
      value: 'value'
    })
  }
})

// 使用计算属性统一管理显示数据
const computedItems = computed(() => {
  if (_props.dicts.length > 0) {
    return _props.dicts.map((dict) => ({
      label: dict.label,
      value: dict.value
    }))
  } else {
    return _props.items.map((item) => ({
      label: item[_props.props.label],
      value: item[_props.props.value]
    }))
  }
})
</script>
