<template>
  <el-dropdown trigger="click" @command="handleCommand">
    <el-button type="primary">
      主题切换
      <el-icon class="el-icon--right"><arrow-down /></el-icon>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="(theme, name) in themes" :key="name" :command="name">
          <div class="theme-item">
            <span class="theme-name">{{ name }}</span>
            <div class="theme-colors">
              <span v-for="(color, type) in theme" :key="type" 
                    class="color-dot" 
                    :style="{ backgroundColor: color }">
              </span>
            </div>
          </div>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
import { ArrowDown } from '@element-plus/icons-vue'
import { themes, setTheme } from '@/styles/theme'

const handleCommand = (themeName) => {
  setTheme(themeName)
}
</script>

<style scoped>
.theme-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.theme-name {
  text-transform: capitalize;
}

.theme-colors {
  display: flex;
  gap: 4px;
}

.color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
</style> 