<template>
  <el-drawer
    v-model="drawerVisible"
    append-to-body
    :title="activeTabLabel"
    header-class="font-bold"
    body-class="flex flex-col"
    size="320px"
    direction="rtl"
    @close="handleClose"
  >
    <div class="setting-tabs">
      <div
        v-for="tab in tabList"
        :key="tab.value"
        class="tab-item"
        :class="{ active: activeTab === tab.value }"
        @click="activeTab = tab.value"
      >
        {{ tab.label }}
      </div>
    </div>
    <el-scrollbar class="flex-1" wrap-class="setting-drawer">
      <template v-if="activeTab === 'appearance'">
        <div class="flex flex-col gap-4">
          <el-divider>
            <span class="text-base font-medium tracking-tight">主题模式</span>
          </el-divider>
          <div class="flex items-center gap-4">
            <div class="flex-1 flex cursor-pointer flex-col" @click="toggleDark('light')">
              <OutlineBox :active="!isDark" hoverEffect="expand" :style="{ width: '100%' }">
                <el-icon size="24">
                  <Moon />
                </el-icon>
              </OutlineBox>
              <span class="mt-2 text-center text-base">浅色</span>
            </div>
            <div class="flex-1 flex cursor-pointer flex-col" @click="toggleDark('dark')">
              <OutlineBox :active="isDark" hoverEffect="expand" :style="{ width: '100%' }">
                <el-icon size="24">
                  <Sunny />
                </el-icon>
              </OutlineBox>
              <span class="mt-2 text-center text-base">深色</span>
            </div>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-base">深色侧边栏</span>
            <el-switch v-model="sideTheme" active-value="dark" inactive-value="light" />
          </div>
          <div class="flex justify-between items-center">
            <span class="text-base">深色顶栏</span>
            <el-switch v-model="headerTheme" active-value="dark" inactive-value="light" />
          </div>
        </div>
        <div class="flex flex-col gap-4">
          <el-divider>
            <span class="text-base font-medium tracking-tight">主题颜色</span>
          </el-divider>
          <div class="setting-color">
            <div
              class="color-item"
              v-for="color in themeColors"
              :title="color.name"
              :key="color.value"
              :style="{ backgroundColor: color.value }"
              @click="changeThemeColor(color.value)"
            >
              <el-icon v-if="themeColor === color.value" class="check-icon">
                <Check />
              </el-icon>
            </div>
            <div class="color-item" title="自定义">
              <el-color-picker class="item-custom" v-model="themeColor" @change="changeThemeColor"></el-color-picker>
            </div>
          </div>
        </div>
        <div class="flex flex-col gap-4">
          <el-divider>
            <span class="text-base font-medium tracking-tight">字体设置</span>
          </el-divider>
          <div class="flex justify-between items-center">
            <span class="text-base">字体大小</span>
            <el-input-number class="w-[160px]" v-model="fontSize" :min="10" :max="20" :step="1" />
          </div>
        </div>
      </template>
      <template v-else>
        <div class="flex flex-col gap-4">
          <el-divider>
            <span class="text-base font-medium tracking-tight">侧边栏设置</span>
          </el-divider>
          <div class="flex justify-between items-center">
            <span class="text-base">显示侧边栏</span>
            <el-switch v-model="showSidebar" />
          </div>
          <div class="flex justify-between items-center">
            <span class="text-base">侧边栏宽度</span>
            <el-input-number class="w-[160px]" v-model="sidebarWidth" :min="120" />
          </div>
          <div class="flex justify-between items-center">
            <span class="text-base">启用侧边栏切换</span>
            <el-switch v-model="showSwitchSidebar" />
          </div>
        </div>
        <div class="flex flex-col gap-4">
          <el-divider>
            <span class="text-base font-medium tracking-tight">面包屑导航</span>
          </el-divider>
          <div class="flex justify-between items-center">
            <span class="text-base">显示面包屑导航</span>
            <el-switch v-model="showBreadcrumb" />
          </div>
          <div class="flex justify-between items-center">
            <span class="text-base">显示面包屑图标</span>
            <el-switch v-model="showBreadcrumbIcon" />
          </div>
        </div>
        <div class="flex flex-col gap-4">
          <el-divider>
            <span class="text-base font-medium tracking-tight">水印设置</span>
          </el-divider>
          <div class="flex justify-between items-center">
            <span class="text-base">显示水印</span>
            <el-switch v-model="showWatermark" />
          </div>
          <div class="flex gap-4 justify-between items-center" v-if="showWatermark">
            <span class="text-base">自定义水印文本</span>
            <div class="w-[160px]">
              <el-input v-model="watermarkText" clearable placeholder="请输入水印文本" />
            </div>
          </div>
        </div>
      </template>
    </el-scrollbar>
    <el-button class="mt-3 w-full" @click="resetTheme">重置主题</el-button>
  </el-drawer>
</template>

<script setup lang="ts">
import { useDark, useToggle } from '@vueuse/core'
import { useConfigStore } from '@/stores/modules/config'
import { useSettingStore } from '@/stores/modules/setting'
import { setThemeColor } from '@/utils/util'
import settings from '@/settings'

// 组件显示状态
const props = defineProps<{
  visible: boolean
}>()
const emit = defineEmits<{
  'update:visible': [value: boolean]
}>()
const drawerVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})
const handleClose = () => {
  emit('update:visible', false)
}

// 组件参数
const settingStore = useSettingStore()
const configStore = useConfigStore()
const isDark = useDark()
const tabList = [
  { label: '外观设置', value: 'appearance' },
  { label: '布局设置', value: 'layout' }
]
const activeTab = ref('appearance')
const activeTabLabel = computed(() => {
  return tabList.find((tab: any) => tab.value === activeTab.value)?.label || ''
})

// 主题模式
const toggleDark = (state: 'light' | 'dark') => {
  useToggle(isDark)(state === 'dark')
  setThemeColor(themeColor.value, isDark.value ? 'dark' : 'light')
}
const sideTheme = computed({
  get() {
    return settingStore.sideTheme
  },
  set(value) {
    settingStore.setSetting('sideTheme', value)
  }
})
const headerTheme = computed({
  get() {
    return settingStore.headerTheme
  },
  set(value) {
    settingStore.setSetting('headerTheme', value)
  }
})

// 主题颜色
const themeColors = reactive([
  { name: '默认蓝', value: settings.theme },
  { name: '清新绿', value: '#67c23a' },
  { name: '活力橙', value: '#e6a23c' },
  { name: '热情红', value: '#f56c6c' },
  { name: '优雅紫', value: '#a663cc' },
  { name: '科技青', value: '#40d0ff' },
  { name: '温馨粉', value: '#f072af' },
  { name: '深沉蓝', value: '#667eea' },
  { name: '活力绿', value: '#85ce61' },
  { name: '温暖橙', value: '#fb923c' },
  { name: '沉稳灰', value: '#909399' }
])
const themeColor = ref<string>(settingStore.theme)
const changeThemeColor = (color: string | null) => {
  if (color) {
    themeColor.value = color
    setThemeColor(color, isDark.value ? 'dark' : 'light')
  } else {
    const defaultColor = themeColors[0]?.value || ''
    themeColor.value = defaultColor
    setThemeColor(defaultColor, isDark.value ? 'dark' : 'light')
  }
  settingStore.setSetting('theme', themeColor.value)
}

// 字体大小设置
const fontSize = computed({
  get() {
    return settingStore.fontSize
  },
  set(value) {
    settingStore.setSetting('fontSize', value)
  }
})

// 侧边栏设置
const showSidebar = computed({
  get() {
    return settingStore.showSidebar
  },
  set(value) {
    settingStore.setSetting('showSidebar', value)
  }
})
const sidebarWidth = computed({
  get() {
    return settingStore.sidebarWidth
  },
  set(value) {
    if (value !== null) {
      settingStore.setSetting('sidebarWidth', value)
    }
  }
})
const showSwitchSidebar = computed({
  get() {
    return settingStore.showSwitchSidebar
  },
  set(value) {
    settingStore.setSetting('showSwitchSidebar', value)
  }
})

// 面包屑导航设置
const showBreadcrumb = computed({
  get() {
    return settingStore.showBreadcrumb
  },
  set(value) {
    settingStore.setSetting('showBreadcrumb', value)
  }
})
const showBreadcrumbIcon = computed({
  get() {
    return settingStore.showBreadcrumbIcon
  },
  set(value) {
    settingStore.setSetting('showBreadcrumbIcon', value)
  }
})

// 水印设置
const showWatermark = computed({
  get() {
    return settingStore.showWatermark
  },
  set(value) {
    settingStore.setSetting('showWatermark', value)
  }
})
const watermarkText = computed({
  get() {
    return settingStore.watermarkText
  },
  set(value) {
    settingStore.setSetting('watermarkText', value)
  }
})

// 重置主题
const resetTheme = () => {
  toggleDark('light')
  if (!showSidebar.value) configStore.toggleCollapsed(false)
  settingStore.resetSetting()
  setThemeColor(themeColor.value, isDark.value ? 'dark' : 'light')
}
</script>

<style lang="scss" scoped>
.setting-tabs {
  @apply flex justify-center gap-1.5 rounded-md p-1;
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color);

  .tab-item {
    @apply flex-1 p-2 py-1 rounded-md cursor-pointer text-base leading-6 text-center duration-300;
    color: var(--el-text-color-primary);

    &:hover {
      background: var(--el-fill-color-dark);
    }

    &.active {
      color: #fff;
      background: var(--el-color-primary);
    }
  }
}

.setting-drawer {
  @apply h-full flex flex-col gap-6;

  .setting-color {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;

    .color-item {
      @apply w-12 h-12 rounded-md cursor-pointer relative;
      transition: all 0.3s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      overflow: hidden;

      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }

      :deep(.item-custom) {
        @apply w-full h-full;

        .el-color-picker__trigger {
          @apply p-2;
          border: 2px dashed var(--el-border-color);
          background-color: var(--el-fill-color-light);
          transition: all 0.3s;
        }

        &:hover .el-color-picker__trigger {
          border-color: var(--el-color-primary);
          background-color: var(--el-color-primary-light-9);
        }
      }
    }

    .check-icon {
      @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-lg;
    }
  }
}
</style>
