<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-07-03 15:35:41
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-07-03 15:39:09
 * @FilePath: \Robot-Al-Platform-Web\src\renderer\src\components\Theme\themeSwitcher.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="theme-switcher">
    <h3>选择主题</h3>
    <el-select v-model="selectedTheme" @change="changeTheme">
      <el-option
        v-for="theme in themes"
        :key="theme.name"
        :label="theme.name"
        :value="theme.name"
      />
    </el-select>
    <h3>自定义颜色</h3>
    <input type="color" v-model="customColor" @input="changePrimaryColor" />
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const selectedTheme = ref('default')
    const customColor = ref('#154DDD')
    const themes = [
      {
        name: '默认',
        colors: {
          primary: '#154DDD',
          success: '#67c23a',
          warning: '#e6a23c',
          danger: '#f56c6c',
          info: '#909399'
        }
      },
      {
        name: '深色',
        colors: {
          primary: '#2b5876',
          success: '#3a5045',
          warning: '#7a4e35',
          danger: '#6c4843',
          info: '#5b6064'
        }
      },
      {
        name: '浅色',
        colors: {
          primary: '#64b5f6',
          success: '#a5d6b0',
          warning: '#f5c588',
          danger: '#f08475',
          info: '#b3bec3'
        }
      }
    ]

    const changeTheme = (themeName) => {
      const theme = themes.find((t) => t.name === themeName)
      if (theme) {
        Object.entries(theme.colors).forEach(([key, value]) => {
          document.documentElement.style.setProperty(`--el-color-${key}`, value)
        })
        selectedTheme.value = themeName
      }
    }

    const changePrimaryColor = () => {
      document.documentElement.style.setProperty('--el-color-primary', customColor.value)
    }

    return {
      selectedTheme,
      customColor,
      themes,
      changeTheme,
      changePrimaryColor
    }
  }
}
</script>

<style scoped>
.theme-switcher {
  padding: 20px;
  margin: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

h3 {
  margin-bottom: 10px;
}

.el-select {
  width: 200px;
  margin-bottom: 20px;
}

input[type='color'] {
  width: 100%;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>
