<template>
  <div class="custom-select-container relative group" @click="toggleDropdown" ref="containerRef">
    <!-- 选中值显示区域 -->
    <div class="selected-value flex items-center" :class="{ 'placeholder': !selectedOption }">
      <span class="flex-1 truncate">{{ selectedOption ? selectedOption.label : placeholder }}</span>
    </div>
    
    <!-- 下拉箭头 -->
    <div class="dropdown-arrow ml-2" :class="{ 'open': isDropdownOpen }">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="6 9 12 15 18 9"></polyline>
      </svg>
    </div>
    
    <!-- 下拉选项列表 -->
    <div v-if="isDropdownOpen" class="dropdown-options absolute top-full left-0 right-0 mt-1 z-[9999]" ref="dropdownRef">
      <div 
        v-for="option in options" 
        :key="option.value" 
        class="option-item" 
        :class="{ 'selected': option.value === modelValue }"
        @click.stop="selectOption(option)"
      >
        {{ option.label }}
      </div>
    </div>
  </div>
</template>

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

// Props 定义
interface Option {
  value: string | number
  label: string
}

const props = defineProps<{
  modelValue: string | number
  options: Option[]
  placeholder?: string
}>()

// Emits 定义
const emit = defineEmits<{
  'update:modelValue': [value: string | number]
}>()

// 组件状态
const isDropdownOpen = ref(false)
const containerRef = ref<HTMLDivElement | null>(null)
const dropdownRef = ref<HTMLDivElement | null>(null)

// 计算属性：当前选中的选项
const selectedOption = computed(() => {
  return props.options.find(option => option.value === props.modelValue)
})

// 切换下拉列表显示/隐藏
const toggleDropdown = () => {
  isDropdownOpen.value = !isDropdownOpen.value
}

// 选择选项
const selectOption = (option: Option) => {
  emit('update:modelValue', option.value)
  isDropdownOpen.value = false
}

// 点击外部关闭下拉列表
const handleClickOutside = (event: MouseEvent) => {
  if (containerRef.value && !containerRef.value.contains(event.target as Node)) {
    isDropdownOpen.value = false
  }
}

// 监听modelValue变化，更新选中状态
watch(() => props.modelValue, () => {
  // 当外部更新modelValue时，不需要额外操作，selectedOption会自动更新
})

// 生命周期钩子
onMounted(() => {
  // 添加点击外部关闭事件监听
  document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  // 移除事件监听
  document.removeEventListener('click', handleClickOutside)
})
</script>

<style scoped>
.custom-select-container {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  color: #ececec;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
}

.custom-select-container:hover {
  border-color: #d4b383;
  box-shadow: 0 0 0 3px rgba(212, 179, 131, 0.2);
}

.selected-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selected-value.placeholder {
  color: #888888;
}

.dropdown-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  color: #888888;
}

.dropdown-arrow.open {
  transform: rotate(180deg);
}

.dropdown-options {
  z-index: 99999999999999999999;
  background: rgba(12, 12, 14, 0.72);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  max-height: 200px;
  overflow-y: auto;
}

.option-item {
  padding: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.option-item:hover {
  background: rgba(212, 179, 131, 0.15);
  color: #d4b383;
}

.option-item.selected {
  background: rgba(212, 179, 131, 0.2);
  color: #d4b383;
  font-weight: 500;
}

/* 滚动条样式 */
.dropdown-options::-webkit-scrollbar {
  width: 6px;
}

.dropdown-options::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.dropdown-options::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.dropdown-options::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
</style>