<template>
  <el-dropdown class="el-dropdown-link" @command="handleCommand" trigger="click" placement="bottom-start">
    <span @click.stop>
      {{ displayLabel }}
      <el-icon>
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu class="dropdown-menu-scroll">
        <el-dropdown-item v-for="info in options" :command="info.value" :disabled="info.disabled"> {{ info.label }}</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

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

interface Props {
  modelValue: string,
  options: MetricOptions[]
}
const props = defineProps<Props>()
const data = ref(props.modelValue)
const emits = defineEmits(['update:modelValue', 'change'])
const displayLabel = computed(() => {
  const info = props.options.find(item => item.value === data.value)
  if(!info) return ''
  return info.label ? info.label: data.value
})
const handleCommand = (command: string) => {
  if (command === data.value) return
  const oldVal = data.value
  data.value = command
  emits('update:modelValue', command)
  emits('change', command, oldVal)
}

</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  /* display: flex;
  align-items: center; */
}
.dropdown-menu-scroll {
  max-height: 300px; /* 根据需要调整最大高度 */
  overflow-y: auto;
}
</style>
