<script setup lang="ts">
import { useThemeStore } from '@/stores/theme'
import { themeStyleList, themeNavList } from '@/utils/constants'

const props = defineProps({
  modelValue: Boolean
})
const emits = defineEmits(['update:modelValue'])

const visible = computed({
  get: () => props.modelValue,
  set: value => emits('update:modelValue', value)
})

const themeStore = useThemeStore()
const themeColor = computed(() => themeStore.themeColor)
const themeColors = [
  '#1890ff',
  '#409EFF',
  '#2d8cf0',
  '#007AFF',
  '#5ac8fa',
  '#5856D6',
  '#536dfe',
  '#9c27b0',
  '#AF52DE',
  '#0096c7',
  '#00C1D4',
  '#34C759',
  '#43a047',
  '#7cb342',
  '#c0ca33',
  '#78DEC7',
  '#e53935',
  '#d81b60',
  '#f4511e',
  '#fb8c00',
  '#ffb300',
  '#fdd835',
  '#6d4c41',
  '#546e7a'
]

const themeStyle = computed(() => themeStore.themeStyle)
const themeNav = computed(() => themeStore.themeNav)
</script>

<template>
  <el-drawer class="setting-drawer" v-model="visible" title="主题配置" size="350px">
    <el-divider>系统主题</el-divider>
    <el-space wrap>
      <div
        class="flex items-center justify-center w-30px h-30px"
        v-for="item in themeColors"
        :key="item"
        :style="{ background: item }"
        @click="themeStore.setThemeColor(item)"
      >
        <el-icon size="22" color="#fff" v-if="themeColor === item"><icon-check></icon-check></el-icon>
      </div>
      <el-color-picker
        :model-value="themeColor"
        :predefine="themeColors"
        @change="(value: string) => themeStore.setThemeColor(value)"
      />
    </el-space>

    <el-divider>导航栏模式</el-divider>
    <el-space wrap :size="20">
      <div
        class="relative"
        v-for="(item, index) in themeNavList"
        :key="index"
        @click="themeStore.setThemeNav(item.name)"
      >
        <img :src="item.img" alt="" />
        <div class="absolute right-10px bottom-10px" v-if="item.name === themeNav">
          <el-icon :color="themeColor" size="18"><Check /></el-icon>
        </div>
      </div>
    </el-space>

    <el-divider>整体风格</el-divider>
    <el-space wrap :size="20">
      <div
        class="relative"
        v-for="(item, index) in themeStyleList"
        :key="index"
        @click="themeStore.setThemeStyle(item.name)"
      >
        <img :src="item.img" alt="" />
        <div class="absolute right-10px bottom-10px" v-if="item.name === themeStyle.name">
          <el-icon :color="themeColor" size="18"><Check /></el-icon>
        </div>
      </div>
    </el-space>

    <el-divider>界面显示</el-divider>
    <div class="flex justify-between items-center mb-4">
      <el-text>显示标签页</el-text>
      <el-switch v-model="themeStore.showTabs"></el-switch>
    </div>
    <div class="flex justify-between items-center mb-4">
      <el-text>标签页持久化</el-text>
      <el-switch v-model="themeStore.keepAliveTabs"></el-switch>
    </div>
    <div class="flex justify-between items-center">
      <el-text>LOGO置于顶部</el-text>
      <el-switch v-model="themeStore.logoInHeader"></el-switch>
    </div>
  </el-drawer>
</template>

<style lang="scss">
.setting-drawer .el-drawer__header {
  margin-bottom: 0;
}
</style>
