<template>
  <div @click="drawer = true">
    <div title="系统设置">
      <i class="sfont system-shezhi"></i>
    </div>


    <el-drawer v-model="drawer" title="系统设置" custom-class="herder_height">
      <!--     这里是否需要开启黑夜模式   -->
      <!--      <el-button @click="toggleDark(false) ">黑夜模式</el-button>-->
      <el-collapse v-model="activeNames">
        <el-collapse-item title="菜单配置" name="0">
          <el-form>
            <el-form-item label="侧边菜单栏背景色">
              <el-color-picker v-model="theme['--el-menu-bg-color']"/>
            </el-form-item>

            <el-form-item label="侧边菜单文字颜色">
              <el-color-picker v-model="theme['--el-menu-text-color']"/>
            </el-form-item>

            <el-form-item label="侧边菜单激活项背景色">
              <el-color-picker v-model="theme['--el-menu-active-color']"/>
            </el-form-item>
          </el-form>
        </el-collapse-item>

        <el-collapse-item title="顶部配置" name="1">
          <el-form>
            <el-form-item label="激活菜单背景颜色">
              <el-color-picker v-model="theme['--xc-header-active-bg-color']"/>
            </el-form-item>

            <el-form-item label="激活菜单文字颜色">
              <el-color-picker v-model="theme['--xc-header-active-text-color']"/>
            </el-form-item>
          </el-form>
        </el-collapse-item>

        <el-collapse-item title="按钮配置" name="2">
          <el-form>
            <el-form-item label="默认按钮颜色">
              <el-color-picker v-model="theme['--el-color-primary']"/>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </el-drawer>
  </div>
</template>

<script setup name="Theme">
import {theme} from "@/theme";
import {useDark, useToggle} from '@vueuse/core'

const tabsHook = {
  setItem: function (val) {
    localStorage.setItem('theme', JSON.stringify(val))
  },
  getItem: function () {
    return JSON.parse(localStorage.getItem('theme') || '{}')
  },
}

const isDark = useDark()
const toggleDark = useToggle(isDark)


let drawer = $ref(false)
let activeNames = $ref(['0', '1', '2'])


watch(() => theme.value, () => {
  const el = document.documentElement
  for (let key in theme.value) {
    el.style.setProperty(key, theme.value[key])
  }
  tabsHook.setItem(theme.value)
}, {deep: true})

onMounted(() => {
  const el = document.documentElement
  for (let key in theme.value) {
    el.style.setProperty(key, theme.value[key])
  }
  if (localStorage.getItem('theme') == null) {
    tabsHook.setItem(theme.value)
  } else {
    theme.value = tabsHook.getItem()
  }
})

</script>

<style lang="scss" scoped>
.herder_height {
  :deep(.el-drawer__header ) {
    margin-bottom: 10px !important;
  }
}
</style>
