<template>
    <!-- <div>
        1
    </div> -->

    <el-button type="primary" @click="toggle1">
        <el-icon class="tjm_btn_icon_right"><tjm-icon-ep-setting /></el-icon>
        新增
    </el-button>
    <el-config-provider :locale="localeLang">
        <el-drawer title="主题设置" v-model="drawerVisible" size="300px">
            <el-switch  @change="toggle" />
            <el-switch v-model="theme1" @change="toggle2" />
            <el-color-picker
                :predefine="colorList"
                @change="changePrimary"
                v-model="color2"
            />
        </el-drawer>
        {{ $t('noep.test.home') }}
        <el-row class="mb-4">
            <el-button>Default</el-button>
            <el-button type="primary">Primary</el-button>
            <el-button type="success">Success</el-button>
            <el-button type="info">Info</el-button>
            <el-button type="warning">Warning</el-button>
            <el-button type="danger">Danger</el-button>
        </el-row>
        <el-date-picker type="date" size="small" />
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="Date" width="180" />
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="address" label="Address" />
        </el-table>
        <!-- <div class="warp">
            <router-view></router-view>
        </div> -->
        <el-pagination background layout="total,sizes,prev, pager, next," :total="20"  :page-sizes="[20, 30, 100]"  />
    </el-config-provider>
</template>

<script setup>
import { getConfig, setConfig } from '@/config/config'
import { getDarkColor, getLightColor } from '@/utils/color.js'
import { useI18n } from 'vue-i18n'
const { messages, locale, t } = useI18n()
const localeLang = ref(messages[getConfig('globalI18n')])
const tableData = []
const drawerVisible = ref(false)
const value1 = ref(true)
const color2 = ref(null)
// 修改element 和 i18n 默认语言
const changeLanguage = () => {
    locale.value = getConfig('globalI18n')
    localeLang.value = messages.value[locale.value]
}
const colorList = [
    '#DAA96E',
    '#0C819F',
    '#722ed1',
    '#27ae60',
    '#ff5c93',
    '#e74c3c',
    '#fd726d',
    '#f39c12',
    '#9b59b6'
]
const changePrimary = val => {
    if (!val) {
        val = '#9b59b6'
        ElMessage({
            type: 'success',
            message: `主题颜色已重置为 #9b59b6`
        })
    }
    console.log(val)
    // return
    document.documentElement.style.setProperty('--el-color-primary', val)
    // 颜色加深或变浅
    for (let i = 1; i <= 9; i++) {
        document.documentElement.style.setProperty(
            `--el-color-primary-light-${i}`,
            theme1.value
                ? `${getDarkColor(val, i / 10)}`
                : `${getLightColor(val, i / 10)}`
        )
        document.documentElement.style.setProperty(
            `--el-color-primary-dark-${i}`,
            theme1.value
                ? `${getDarkColor(val, i / 10)}`
                : `${getLightColor(val, i / 10)}`
        )
    }
}

const switchDark = () => {
    const body = document.documentElement
    if (theme1.value) body.setAttribute('class', 'dark')
    else body.setAttribute('class', '')
}
const toggle2 = e => {
    console.log(e)
    switchDark()
}


const theme1 = ref(false)
const isDark = useDark({
    // 存储到localStorage/sessionStorage中的Key 根据自己的需求更改
    storageKey: 'useDarkKEY',
    // 暗黑class名字
    valueDark: 'dark',
    // 高亮class名字
    valueLight: 'light'
})

// const toggle2 = useToggle(isDark)

const toggle1 = () => {
    drawerVisible.value = true
}
const toggle = () => {
    setConfig({
        globalI18n: getConfig('globalI18n') == 'en' ? 'zh-cn' : 'en'
    })
    changeLanguage()
}
// 监听修改语言实现element
watchEffect(changeLanguage)
</script>

<style lang="scss" scoped></style>