<template>
    <HcCard actionSize="lg" scrollbar>
        <div class="text-lg font-medium mb-4">主题模式<span class="text-sm text-slate-400 font-light ml-4">深色模式还未适配，暂不推荐使用深色模式</span>
        </div>
        <div class="hc-theme-box mb-8">
            <el-radio-group v-model="UserTheme" @change="ThemeTabsUpdate">
                <template v-for="item in ThemeDatas">
                    <div :class="UserTheme === item?.key ? 'active' : ''" class="item">
                        <div :class="item?.key" class="demo">
                            <img :src="ImgTheme" alt="">
                        </div>
                        <div class="action" @click="ThemeConfigClick(item)">
                            <el-radio :label="item?.key" class="size-xl" size="large">{{ item?.name }}</el-radio>
                        </div>
                    </div>
                </template>
            </el-radio-group>
        </div>

        <div class="text-lg font-medium mb-4">主题色</div>
        <div class="hc-theme-box color-box mb-4">
            <template v-for="(item,index) in ColorConfigData">
                <div v-if="index < 5" :class="UserColorNmae === item.name ? 'active' : ''" class="item">
                    <div :class="`bg-${item.name}`" class="demo">
                        <img :src="ImgColor" alt="">
                    </div>
                    <div class="action" @click="ColorConfigClick(item)">
                        <el-radio v-model="UserColorNmae" :label="item?.name" class="size-xl" size="large">
                            {{ item?.label }}
                        </el-radio>
                    </div>
                </div>
            </template>
        </div>
        <div class="hc-theme-box color-box mb-8">
            <template v-for="(item,index) in ColorConfigData">
                <div v-if="index >= 5" :class="UserColorNmae === item.name ? 'active' : ''" class="item">
                    <div :class="`bg-${item.name}`" class="demo">
                        <img :src="ImgColor" alt="">
                    </div>
                    <div class="action" @click="ColorConfigClick(item)">
                        <el-radio v-model="UserColorNmae" :label="item?.name" class="size-xl" size="large">
                            {{ item?.label }}
                        </el-radio>
                    </div>
                </div>
            </template>
        </div>

        <template #action>
            <el-popover :width="180" placement="top" trigger="hover">
                <template #reference>
                    <el-button :loading="saveLoading" hc-btn type="primary" @click="SaveConfigClick">
                        <HcIcon name="save"/>
                        <span>保存配置</span>
                    </el-button>
                </template>
                <div>下次登录后，会自动同步，并启用当前配置</div>
            </el-popover>
            <el-popover :width="180" placement="top-start" trigger="hover">
                <template #reference>
                    <el-button hc-btn @click="CancelClick">
                        <HcIcon name="arrow-go-back"/>
                        <span>取消</span>
                    </el-button>
                </template>
                <div>如果没有保存配置，下次登录后，将恢复到上次保存的配置</div>
            </el-popover>
        </template>
    </HcCard>
</template>

<script setup>
import {ref, nextTick} from "vue";
import {useRouter} from 'vue-router'
import {useAppStore} from "~src/store";
import colorData from '~src/config/color';
import {userConfigSave} from "~api/other";
import ImgTheme from "~src/assets/images/theme.png";
import ImgColor from "~src/assets/images/color.png";
import {setElementMainColor} from "js-fast-way"
import {useOsTheme} from '~src/plugins/useOsTheme';

//初始变量
const router = useRouter()
const useAppState = useAppStore()

//配置变量
const UserTheme = ref(useAppState.getTheme)
const UserColor = ref(useAppState.getColor)
const UserColorNmae = ref(UserColor.value?.name || 'green')

//颜色
const ColorConfigData = ref(colorData)

//更改主色调
const ColorConfigClick = (item) => {
    useAppState.setColor(item)
    UserColorNmae.value = item?.name
    //设置主色调
    setElementMainColor(item?.color)
    nextTick(() => {
        UserColor.value = item
    })
}

//更改主题设置
const ThemeDatas = ref([
    {key: 'auto', name: '跟随系统'},
    {key: 'light', name: '浅色模式'},
    {key: 'dark', name: '深色模式'}
])
const ThemeConfigClick = (item) => {
    ThemeTabsUpdate(item?.key)
}
const ThemeTabsUpdate = (val) => {
    UserTheme.value = val
    useAppState.setTheme(val)
    if (val === 'auto') {
        useAppState.setThemeVal(useOsTheme().value)
    } else {
        useAppState.setThemeVal(val)
    }
    let colorName = UserColorNmae.value || 'green'
    document.documentElement.setAttribute('class', `${val} color-${colorName}`)
}

//取消配置
const CancelClick = () => {
    router.back()
}

//保存配置
const saveLoading = ref(false)
const SaveConfigClick = async () => {
    //发起请求
    saveLoading.value = true
    const {error, code} = await userConfigSave({
        theme: UserTheme.value,
        color: UserColorNmae.value,
    })
    //判断状态
    saveLoading.value = false
    if (!error && code === 200) {
        window?.$message?.success('保存成功')
        router.back()
    } else {
        window?.$message?.error('保存失败，请稍后再试')
    }
}
</script>

<style lang="scss" scoped>
@import "~src/styles/user/config.scss";
</style>

