<template>
  <div class="comp-content">
    <div class="bread-crumb" />
    <div class="options">
      <div class="icon-btn lang" @click="langToggleFun">
        <span v-if="lang === 'ZH'"><span class="active">中/</span>EN</span>
        <span v-else><span class="active">EN/</span>中</span>
      </div>
      <div class="icon-btn" @click="drawerToggleFun">
        <el-icon :size="20"><Setting /></el-icon>
      </div>
    </div>
    <el-drawer v-model="drawer" :size="300" :title="$t('主题.主题')">
      <div class="setting">
        <el-form label-width="auto">
          <el-form-item :label="$t('主题.黑夜模式')">
            <el-switch v-model="isDark" @change="darkToggleFun" />
          </el-form-item>
          <el-form-item :label="`${$t('主题.主题色')}：${$t('主题.默认')}`">
            <el-color-picker
              v-model="colors.primary"
              @change="(color: string) => changeColorFun('--el-color-primary', color)"
            />
          </el-form-item>
          <el-form-item :label="`${$t('主题.主题色')}：${$t('主题.成功')}`">
            <el-color-picker
              v-model="colors.success"
              @change="(color: string) => changeColorFun('--el-color-success', color)"
            />
          </el-form-item>
          <el-form-item :label="`${$t('主题.主题色')}：${$t('主题.警告')}`">
            <el-color-picker
              v-model="colors.warning"
              @change="(color: string) => changeColorFun('--el-color-warning', color)"
            />
          </el-form-item>
          <el-form-item :label="`${$t('主题.主题色')}：${$t('主题.错误')}`">
            <el-color-picker
              v-model="colors.danger"
              @change="(color: string) => changeColorFun('--el-color-danger', color)"
            />
          </el-form-item>
          <el-form-item :label="`${$t('主题.主题色')}：${$t('主题.信息')}`">
            <el-color-picker
              v-model="colors.info"
              @change="(color: string) => changeColorFun('--el-color-info', color)"
            />
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { VxeUI } from 'vxe-table';
import { useDark, useToggle } from '@vueuse/core';
import { getThemeColor, setThemeColor } from '@/utils/theme';
import i18n from '@/utils/i18n';

const lang = ref(i18n.global.locale);
const isDark = useDark();
const drawer = ref(false);

const colors = ref({
  primary: getThemeColor('--el-color-primary'),
  success: getThemeColor('--el-color-success'),
  warning: getThemeColor('--el-color-warning'),
  danger: getThemeColor('--el-color-danger'),
  info: getThemeColor('--el-color-info'),
});

const changeColorFun = (colorName: string, color: string) => {
  setThemeColor(colorName, color);
};

const drawerToggleFun = () => {
  drawer.value = !drawer.value;
};

const darkToggleFun = () => {
  useToggle(isDark);
  VxeUI.setTheme(isDark.value ? 'dark' : 'light');
};

const langToggleFun = () => {
  if (lang.value === 'ZH') {
    lang.value = 'EN';
    i18n.global.locale = 'EN';
  } else {
    lang.value = 'ZH';
    i18n.global.locale = 'ZH';
  }
  localStorage.setItem('LANG_LOCALE', i18n.global.locale);
};
</script>

<style lang="scss" scoped>
.comp-content {
  width: 100%;
  height: 100%;
  border-bottom: solid 1px var(--el-border-color-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  .options {
    display: flex;
    align-items: center;
    .icon-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4px;
      border-radius: 4px;
      margin-left: 15px;
      cursor: pointer;
      &:hover {
        background-color: var(--el-border-color-hover);
      }
      &.lang {
        height: 28px;
        font-size: 12px;
        color: var(--el-text-color-regular);
        .active {
          color: var(--el-text-color-primary);
          font-weight: bold;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
