<template>
  <el-drawer v-model="showSettings" :withHeader="false" direction="rtl" size="300px">
    <!-- 导航栏模式 -->
    <div>
      <div class="setting-drawer-title">
        <el-divider>
          <h3 class="drawer-title">导航栏模式</h3>
        </el-divider>
      </div>
      <div class="setting-drawer-block-checbox">
        <el-tooltip v-for="(nav, index) in navigationTypeArray" :key="index" class="item" effect="dark" :content="nav.content" placement="bottom">
          <div class="setting-drawer-block-checbox-item" @click="handleMenuType(nav.boolean)">
            <svg-icon :icon-class="nav.svg" class="svg" />
            <div v-if="navigationType === nav.boolean" class="setting-drawer-block-checbox-selectIcon" style="display: block">
              <i aria-label="图标: check" class="anticon anticon-check">
                <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" aria-hidden="true" focusable="false" class style="fill: #000000 !important">
                  <path
                    d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
                  />
                </svg>
              </i>
            </div>
          </div>
        </el-tooltip>
      </div>
    </div>
    <!-- 主题风格设置 -->
    <div>
      <div class="setting-drawer-title">
        <el-divider>
          <h3 class="drawer-title">主题风格设置</h3>
        </el-divider>
      </div>
      <div class="setting-drawer-block-checbox">
        <el-tooltip v-for="arr in themeTypeArray" :key="arr" class="item" effect="dark" :content="arr.content" placement="bottom">
          <div class="setting-drawer-block-checbox-item" @click="handleTheme(arr.boolean)">
            <svg-icon :icon-class="arr.svg" class="svg" />
            <div v-if="sideTheme === arr.boolean" class="setting-drawer-block-checbox-selectIcon" style="display: block">
              <i aria-label="图标: check" class="anticon anticon-check">
                <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" aria-hidden="true" focusable="false" class style="fill: #000000 !important">
                  <path
                    d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
                  />
                </svg>
              </i>
            </div>
          </div>
        </el-tooltip>
      </div>
    </div>
    <!-- 顶栏主题设置 -->
    <div>
      <div class="setting-drawer-title">
        <el-divider>
          <span class="drawer-title">顶栏主题</span>
        </el-divider>

        <div class="drawer-item">
          <span>顶栏背景</span>
          <div style="margin: auto"></div>
          <span class="comp-style">
            <el-color-picker v-model="settingsStore.topTheme" show-alpha :predefine="predefineColors" />
          </span>
        </div>
        <div class="drawer-item">
          <span>顶栏默认字体颜色</span>
          <div style="margin: auto"></div>
          <span class="comp-style">
            <el-color-picker v-model="settingsStore.topFontColor" show-alpha :predefine="predefineColors" />
          </span>
        </div>
      </div>
    </div>

    <!-- 系统布局配置 -->
    <div>
      <div class="setting-drawer-title">
        <el-divider>
          <span class="drawer-title">系统布局配置</span>
        </el-divider>

        <div class="drawer-item">
          <span>开启 Tags-Views</span>
          <div style="margin: auto"></div>
          <span class="comp-style">
            <el-switch v-model="tagsView" class="drawer-switch" />
          </span>
        </div>
        <div class="drawer-item">
          <span>动态标题</span>
          <div style="margin: auto"></div>
          <span class="comp-style">
            <el-switch v-model="dynamicTitle" class="drawer-switch" />
          </span>
        </div>
      </div>
    </div>
    <el-divider />
    <!-- 保存设置 -->
    <div>
      <el-button type="primary" plain icon="DocumentAdd" @click="saveSetting">保存配置</el-button>
      <el-button plain icon="Refresh" @click="resetSetting">重置配置</el-button>
    </div>
  </el-drawer>
</template>

<script setup>
import axios from "axios";
import variables from "@/assets/styles/variables.module.scss";
import { ElLoading, ElMessage } from "element-plus";
import "element-plus/theme-chalk/index.css";
import { useDynamicTitle } from "@/utils/dynamicTitle";
import { usePermissionStore, useUserStore, useSettingsStore, useAppStore } from "@/store/modules/index";

const userStore = useUserStore();
const { proxy } = getCurrentInstance();
const appStore = useAppStore();
const settingsStore = useSettingsStore();
const permissionStore = usePermissionStore();
const showSettings = ref(false);
const storeSettings = computed(() => settingsStore);
const topNav = ref(false);
/**
 * @是否需要tagview
 */
const tagsView = computed({
  get: () => storeSettings.value.tagsView,
  set: (val) => {
    settingsStore.changeSetting({ key: "tagsView", value: val });
  },
});

/**
 * @是否需要侧边栏的动态网页的title
 */
const dynamicTitle = computed({
  get: () => storeSettings.value.dynamicTitle,
  set: (val) => {
    settingsStore.changeSetting({ key: "dynamicTitle", value: val });
    // 动态设置网页标题
    useDynamicTitle();
  },
});

const predefineColors = ref(["#FFFFFF", "#151515", "#009688", "#5172dc", "#018ffb", "#409eff", "#e74c3c", "#24292e", "#394664", "#001529", "#383f45"]);

/**
 * @主题风格设置
 */
const themeTypeArray = ref([
  {
    content: "深色主题",
    boolean: "theme-dark",
    svg: "dark",
    images: "/assets/icons/svg/dark.svg",
  },
  {
    content: "浅色主题",
    boolean: "theme-light",
    svg: "light",
    images: "/assets/icons/svg/light.svg",
  },
]);
const sideTheme = ref(settingsStore.sideTheme);
function handleTheme(val) {
  window.document.documentElement.setAttribute("data-theme", val);
  settingsStore.changeSetting({ key: "sideTheme", value: val });
  sideTheme.value = val;
}
/**
 * @导航栏模式
 */
const navigationTypeArray = ref([
  {
    content: "左侧菜单模式",
    boolean: "left-menu-type",
    svg: "dark",
    images: "/assets/icons/svg/dark.svg",
  },
  {
    content: "顶部菜单混合模式",
    boolean: "top-menuMix-type",
    svg: "dark",
    images: "/assets/icons/svg/dark.svg",
  },
  {
    content: "顶部菜单模式",
    boolean: "top-menu-type",
    svg: "dark",
    images: "/assets/icons/svg/dark.svg",
  },
]);
const navigationType = ref(settingsStore.navigationType);
function handleMenuType(val) {
  settingsStore.changeSetting({ key: "navigationType", value: val });
  navigationType.value = val;
}

function saveSetting() {
  proxy.$modal.loading("正在保存到本地，请稍候...");
  let layoutSetting = {
    tagsView: storeSettings.value.tagsView,
    dynamicTitle: storeSettings.value.dynamicTitle,
    sideTheme: storeSettings.value.sideTheme,
    topTheme: storeSettings.value.topTheme,
    topFontColor: storeSettings.value.topFontColor,
    navigationType: storeSettings.value.navigationType,
    topThemeArray: settingsStore.topThemeArray,
  };
  localStorage.setItem("layout-setting", JSON.stringify(layoutSetting));

  setTimeout(proxy.$modal.closeLoading(), 1000);
}

function resetSetting() {
  proxy.$modal.loading("正在清除设置缓存并刷新，请稍候...");
  localStorage.removeItem("layout-setting");
  setTimeout("window.location.reload()", 1000);
}

function openSetting() {
  showSettings.value = true;
}

defineExpose({
  openSetting,
});
</script>

<style lang="scss" scoped>
.setting-drawer-title {
  margin-bottom: 12px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 22px;
  font-weight: bold;
  .drawer-title {
    white-space: nowrap;
    font-size: 16px;
  }
}
.setting-drawer-block-checbox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 20px;

  .setting-drawer-block-checbox-item {
    position: relative;
    margin-right: 16px;
    border-radius: 2px;
    cursor: pointer;

    .svg {
      width: 48px;
      height: 48px;
    }

    .custom-img {
      width: 48px;
      height: 38px;
      border-radius: 5px;
      box-shadow: 1px 1px 2px #898484;
    }

    .setting-drawer-block-checbox-selectIcon {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      padding-top: 15px;
      padding-left: 24px;
      color: #1890ff;
      font-weight: 700;
      font-size: 14px;
    }
  }
}

.drawer-item {
  color: rgba(0, 0, 0, 0.65);
  // padding: 12px 0;
  margin: 12px 0;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  height: 32px;
  line-height: 32px;

  // .comp-style {
  //   float: right;
  //   margin: -3px 8px 0px 0px;
  // }
}
</style>

<style lang="scss" scoped>
//顶栏主题模块样式
.vben-setting-theme-picker {
  display: flex;
  flex-wrap: wrap;
  margin: 16px 0;
  justify-content: space-around;

  .vben-setting-theme-picker__item {
    width: 20px;
    height: 20px;
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 2px;
    display: flex;

    span {
      text-align: center;
      margin: auto;
    }
  }
  .vben-setting-theme-picker__item--active {
    border: 1px solid #6a9eff;
  }
}
</style>
