<template>
  <el-drawer
    v-model="themeStore.showThemeDrawer"
    title="主题设置"
    direction="rtl"
    size="300px"
    :show-close="true"
  >
    <div class="theme-drawer">
      <!-- 预设主题 -->
      <div class="theme-section">
        <h4 class="section-title">系统主题</h4>
        <div class="theme-grid">
          <div
            v-for="theme in presetThemes"
            :key="theme.name"
            class="theme-item"
            :class="{ active: themeStore.currentTheme === theme.name }"
            @click="themeStore.setTheme(theme.name)"
          >
            <div 
              class="theme-preview"
              :style="{ backgroundColor: theme.primaryColor }"
            >
              <el-icon v-if="themeStore.currentTheme === theme.name" class="check-icon">
                <Check />
              </el-icon>
            </div>
            <span class="theme-label">{{ theme.label }}</span>
          </div>
        </div>
      </div>

      <!-- 自定义主题 -->
      <div class="theme-section">
        <h4 class="section-title">自定义主题</h4>
        <div class="custom-theme">
          <div class="color-item">
            <span class="color-label">主色调</span>
            <el-color-picker v-model="customColors.primaryColor" @change="onCustomColorChange" />
          </div>
          <div class="color-item">
            <span class="color-label">侧边栏背景</span>
            <el-color-picker v-model="customColors.sidebarBg" @change="onCustomColorChange" />
          </div>
          <div class="color-item">
            <span class="color-label">页面背景</span>
            <el-color-picker v-model="customColors.bgPage" @change="onCustomColorChange" />
          </div>
          <el-button 
            type="primary" 
            class="apply-btn"
            @click="applyCustomTheme"
          >
            应用自定义主题
          </el-button>
        </div>
      </div>

      <!-- 快速预览 -->
      <div class="theme-section">
        <h4 class="section-title">预览效果</h4>
        <div class="preview-box">
          <div class="preview-sidebar" :style="{ backgroundColor: previewColors.sidebarBg }">
            <div class="preview-logo" :style="{ backgroundColor: previewColors.primaryColor }"></div>
            <div class="preview-menu">
              <div class="preview-menu-item"></div>
              <div class="preview-menu-item active" :style="{ backgroundColor: previewColors.primaryBg }"></div>
              <div class="preview-menu-item"></div>
            </div>
          </div>
          <div class="preview-main" :style="{ backgroundColor: previewColors.bgPage }">
            <div class="preview-header"></div>
            <div class="preview-content">
              <div class="preview-card"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { reactive, computed, watch } from 'vue'
import { Check } from '@element-plus/icons-vue'
import { useThemeStore, presetThemes } from '@/store/modules/theme'

const themeStore = useThemeStore()

// 自定义颜色
const customColors = reactive({
  primaryColor: '#4A90D9',
  sidebarBg: '#F0F7FF',
  bgPage: '#F5F9FC'
})

// 预览颜色
const previewColors = computed(() => {
  if (themeStore.currentTheme === 'custom' && themeStore.customTheme) {
    return {
      primaryColor: themeStore.customTheme.primaryColor || customColors.primaryColor,
      sidebarBg: themeStore.customTheme.sidebarBg || customColors.sidebarBg,
      bgPage: themeStore.customTheme.bgPage || customColors.bgPage,
      primaryBg: themeStore.customTheme.primaryBg || lightenColor(customColors.primaryColor, 0.9)
    }
  }
  const theme = presetThemes.find(t => t.name === themeStore.currentTheme)
  if (theme) {
    return {
      primaryColor: theme.primaryColor,
      sidebarBg: theme.sidebarBg,
      bgPage: theme.bgPage,
      primaryBg: theme.primaryBg
    }
  }
  return {
    primaryColor: customColors.primaryColor,
    sidebarBg: customColors.sidebarBg,
    bgPage: customColors.bgPage,
    primaryBg: lightenColor(customColors.primaryColor, 0.9)
  }
})

// 颜色变浅
const lightenColor = (hex: string, ratio: number): string => {
  const color = hex.replace('#', '')
  const r = parseInt(color.substring(0, 2), 16)
  const g = parseInt(color.substring(2, 4), 16)
  const b = parseInt(color.substring(4, 6), 16)
  const lr = Math.round(r + (255 - r) * ratio)
  const lg = Math.round(g + (255 - g) * ratio)
  const lb = Math.round(b + (255 - b) * ratio)
  return `rgb(${lr}, ${lg}, ${lb})`
}

// 颜色变深
const darkenColor = (hex: string, ratio: number): string => {
  const color = hex.replace('#', '')
  const r = parseInt(color.substring(0, 2), 16)
  const g = parseInt(color.substring(2, 4), 16)
  const b = parseInt(color.substring(4, 6), 16)
  const dr = Math.round(r * (1 - ratio))
  const dg = Math.round(g * (1 - ratio))
  const db = Math.round(b * (1 - ratio))
  return `rgb(${dr}, ${dg}, ${db})`
}

const onCustomColorChange = () => {
  // 实时预览可以在这里添加
}

const applyCustomTheme = () => {
  themeStore.saveCustomTheme({
    primaryColor: customColors.primaryColor,
    primaryLight: lightenColor(customColors.primaryColor, 0.3),
    primaryDark: darkenColor(customColors.primaryColor, 0.2),
    primaryBg: lightenColor(customColors.primaryColor, 0.9),
    sidebarBg: customColors.sidebarBg,
    sidebarLogoBg: customColors.primaryColor,
    sidebarTextActive: customColors.primaryColor,
    bgPage: customColors.bgPage,
    bgLight: lightenColor(customColors.bgPage, 0.5),
    bgHover: lightenColor(customColors.primaryColor, 0.85),
    loginBgStart: lightenColor(customColors.primaryColor, 0.2),
    loginBgEnd: customColors.primaryColor
  })
}

// 初始化自定义颜色
watch(() => themeStore.customTheme, (val) => {
  if (val) {
    customColors.primaryColor = val.primaryColor || '#4A90D9'
    customColors.sidebarBg = val.sidebarBg || '#F0F7FF'
    customColors.bgPage = val.bgPage || '#F5F9FC'
  }
}, { immediate: true })
</script>

<style scoped>
.theme-drawer {
  padding: 0 10px;
}

.theme-section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-lighter);
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.theme-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--border-radius-base);
  transition: all 0.2s;
}

.theme-item:hover {
  background-color: var(--bg-hover);
}

.theme-item.active {
  background-color: var(--primary-bg);
}

.theme-preview {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 6px;
}

.check-icon {
  color: #fff;
  font-size: 20px;
}

.theme-label {
  font-size: 12px;
  color: var(--text-regular);
}

.custom-theme {
  background-color: var(--bg-light);
  padding: 16px;
  border-radius: var(--border-radius-base);
}

.color-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.color-label {
  font-size: 13px;
  color: var(--text-regular);
}

.apply-btn {
  width: 100%;
  margin-top: 8px;
}

.preview-box {
  display: flex;
  height: 120px;
  border-radius: var(--border-radius-base);
  overflow: hidden;
  box-shadow: var(--box-shadow-light);
}

.preview-sidebar {
  width: 60px;
  padding: 8px 6px;
}

.preview-logo {
  height: 20px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.preview-menu-item {
  height: 12px;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
  margin-bottom: 6px;
}

.preview-menu-item.active {
  background-color: rgba(0, 0, 0, 0.08);
}

.preview-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.preview-header {
  height: 24px;
  background-color: #fff;
  border-bottom: 1px solid var(--border-lighter);
}

.preview-content {
  flex: 1;
  padding: 8px;
}

.preview-card {
  height: 100%;
  background-color: #fff;
  border-radius: 4px;
}
</style>
