<template>
  <el-drawer class="setting-drawer" v-model="isDrawer" :title="title" size="320px">
    <div class="drawer">
      <div class="justify-center drawer-setting-item dark-switch">
        <el-tooltip
          placement="bottom"
          :content="designStore.darkTheme ? '切换浅色主题' : '切换深色主题'"
        >
          <el-switch
            size="large"
            v-model="designStore.darkTheme"
            class="dark-theme-switch"
            inline-prompt
            :active-icon="SunnySharp"
            :inactive-icon="Moon"
          />
        </el-tooltip>
      </div>

      <el-divider title-placement="center">自定义主题色</el-divider>

      <div class="flex justify-center color-picker">
        <el-color-picker
          v-model="themeColor"
          :predefine="appThemeList"
          @change="themeColorChange"
        />
      </div>

      <!-- <div class="drawer-setting-item align-items-top">
        <span
          v-for="(item, index) in appThemeList"
          :key="index"
          :style="{ background: item }"
          class="theme-item"
          @click="togTheme(item)"
        >
          <el-icon class="el-input__icon" v-if="item === designStore.appTheme" size="12">
            <CheckOutlined />
          </el-icon>
        </span>
      </div> -->

      <el-divider title-placement="center">导航栏模式</el-divider>

      <div class="drawer-setting-item align-items-top">
        <div class="drawer-setting-item-style align-items-top">
          <el-tooltip placement="top" content="左侧菜单模式">
            <el-button link size="small" class="nav-pattern" @click="togNavMode('vertical')">
              <div class="nav-pattern-item">
                <div class="nav-pattern-item-top light-bg"></div>
                <div class="nav-pattern-item-left dark-bg"></div>
              </div>
            </el-button>
          </el-tooltip>
          <el-badge
            v-show="settingStore.navMode === 'vertical'"
            type="primary"
            :color="getAppTheme"
            is-dot
            class="mt-2"
          />
        </div>

        <div class="drawer-setting-item-style">
          <el-tooltip placement="top" content="顶部菜单模式">
            <el-button link size="small" class="nav-pattern" @click="togNavMode('horizontal')">
              <div class="nav-pattern-item">
                <div class="nav-pattern-item-top dark-bg topfloor"></div>
                <div class="nav-pattern-item-left default-bg"></div>
              </div>
            </el-button>
          </el-tooltip>
          <el-badge
            v-show="settingStore.navMode === 'horizontal'"
            type="primary"
            is-dot
            :color="getAppTheme"
            class="mt-2"
          />
        </div>

        <div class="drawer-setting-item-style">
          <el-tooltip placement="top" content="顶部菜单混合模式，请开启分割菜单，查看效果">
            <el-button link size="small" class="nav-pattern" @click="togNavMode('horizontal-mix')">
              <div class="nav-pattern-item">
                <div class="nav-pattern-item-top dark-bg topfloor"></div>
                <div class="nav-pattern-item-left light-bg"></div>
              </div>
            </el-button>
          </el-tooltip>
          <el-badge
            v-show="settingStore.navMode === 'horizontal-mix'"
            :color="getAppTheme"
            type="primary"
            is-dot
            class="mt-2"
          />
        </div>
      </div>

      <el-divider title-placement="center">导航栏风格</el-divider>

      <div class="drawer-setting-item align-items-top">
        <div class="drawer-setting-item-style">
          <el-tooltip placement="top" content="暗色侧边栏">
            <el-button
              link
              size="small"
              :disabled="designStore.darkTheme"
              class="nav-pattern"
              @click="togNavTheme('dark')"
            >
              <div class="nav-pattern-item">
                <div class="nav-pattern-item-top light-bg"></div>
                <div class="nav-pattern-item-left dark-bg"></div>
              </div>
            </el-button>
          </el-tooltip>
          <el-badge
            v-if="settingStore.navTheme === 'dark'"
            :color="getAppTheme"
            type="primary"
            is-dot
            class="mt-2"
          />
        </div>

        <div class="drawer-setting-item-style">
          <el-tooltip placement="top" content="白色侧边栏">
            <el-button
              link
              size="small"
              :disabled="designStore.darkTheme"
              class="nav-pattern"
              @click="togNavTheme('light')"
            >
              <div class="nav-pattern-item">
                <div class="nav-pattern-item-top light-bg"></div>
                <div class="nav-pattern-item-left light-bg"></div>
              </div>
            </el-button>
          </el-tooltip>
          <el-badge
            v-if="settingStore.navTheme === 'light'"
            :color="getAppTheme"
            type="primary"
            is-dot
            class="mt-2"
          />
        </div>

        <div class="drawer-setting-item-style">
          <el-tooltip placement="top" content="暗色顶栏">
            <el-button
              link
              size="small"
              :disabled="designStore.darkTheme"
              class="nav-pattern"
              @click="togNavTheme('header-dark')"
            >
              <div class="nav-pattern-item">
                <div class="nav-pattern-item-top dark-bg"></div>
                <div class="nav-pattern-item-left dark-bg"></div>
              </div>
            </el-button>
          </el-tooltip>
          <el-badge
            v-if="settingStore.navTheme === 'header-dark'"
            :color="getAppTheme"
            type="primary"
            is-dot
            class="mt-2"
          />
        </div>
      </div>

      <el-divider title-placement="center">界面功能</el-divider>

      <div class="drawer-setting-item">
        <div class="drawer-setting-item-title"> 分割菜单</div>
        <div class="drawer-setting-item-action">
          <el-tooltip trigger="hover" content="顶部菜单混合模式可用">
            <el-switch
              v-model="settingStore.menuSetting.mixMenu"
              :disabled="settingStore.navMode !== 'horizontal-mix'"
            />
          </el-tooltip>
        </div>
      </div>

      <div class="drawer-setting-item">
        <div class="drawer-setting-item-title"> 菜单手风琴 </div>
        <div class="drawer-setting-item-action">
          <el-switch v-model="settingStore.menuSetting.uniqueOpened" />
        </div>
      </div>

      <div class="drawer-setting-item">
        <div class="drawer-setting-item-title"> 固定顶栏</div>
        <div class="drawer-setting-item-action">
          <el-switch v-model="settingStore.headerSetting.fixed" />
        </div>
      </div>

      <div class="drawer-setting-item">
        <div class="drawer-setting-item-title"> 固定侧边栏 </div>
        <div class="drawer-setting-item-action">
          <el-switch v-model="settingStore.menuSetting.fixed" />
        </div>
      </div>

      <!--        <div class="drawer-setting-item">-->
      <!--          <div class="drawer-setting-item-title"> 固定多页签</div>-->
      <!--          <div class="drawer-setting-item-action">-->
      <!--            <el-switch v-model="settingStore.multiTabsSetting.fixed" />-->
      <!--          </div>-->
      <!--        </div>-->

      <el-divider title-placement="center">界面显示</el-divider>

      <div class="drawer-setting-item">
        <div class="drawer-setting-item-title"> 显示重载页面按钮</div>
        <div class="drawer-setting-item-action">
          <el-switch v-model="settingStore.headerSetting.isReload" />
        </div>
      </div>

      <div class="drawer-setting-item">
        <div class="drawer-setting-item-title"> 显示面包屑导航</div>
        <div class="drawer-setting-item-action">
          <el-switch v-model="settingStore.crumbsSetting.show" />
        </div>
      </div>

      <div class="drawer-setting-item">
        <div class="drawer-setting-item-title"> 显示面包屑显示图标</div>
        <div class="drawer-setting-item-action">
          <el-switch v-model="settingStore.crumbsSetting.showIcon" />
        </div>
      </div>

      <div class="drawer-setting-item">
        <div class="drawer-setting-item-title"> 显示多页签</div>
        <div class="drawer-setting-item-action">
          <el-switch v-model="settingStore.multiTabsSetting.show" />
        </div>
      </div>
      <!--1.15废弃，没啥用，占用操作空间-->
      <!--        <div class="drawer-setting-item">-->
      <!--          <div class="drawer-setting-item-title"> 显示页脚 </div>-->
      <!--          <div class="drawer-setting-item-action">-->
      <!--            <el-switch v-model="settingStore.showFooter" />-->
      <!--          </div>-->
      <!--        </div>-->

      <el-divider title-placement="center">动画</el-divider>

      <div class="drawer-setting-item">
        <div class="drawer-setting-item-title"> 切换动画</div>
        <div class="drawer-setting-item-action">
          <el-switch v-model="settingStore.isPageAnimate" />
        </div>
      </div>

      <div class="drawer-setting-item">
        <div class="drawer-setting-item-title"> 动画类型</div>
        <div class="drawer-setting-item-select">
          <el-select v-model="settingStore.pageAnimateType">
            <el-option
              v-for="item in animateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>

      <div class="mt-3 drawer-setting-item">
        <el-alert :showIcon="false" type="warning">
          <p>{{ alertText }}</p>
        </el-alert>
      </div>
    </div>
  </el-drawer>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { useProjectSettingStore } from '@/store/modules/projectSetting';
  import { useDesignSettingStore } from '@/store/modules/designSetting';
  import { Moon, SunnySharp } from '@vicons/ionicons5';
  import { animates as animateOptions } from '@/settings/animateSetting';
  import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
  import colorTool from '@/utils/color';

  defineProps({
    title: {
      type: String,
      default: '项目配置',
    },
    width: {
      type: Number,
      default: 264,
    },
  });
  const { getAppTheme } = useDesignSetting();
  const settingStore = useProjectSettingStore();
  const designStore = useDesignSettingStore();

  const themeColor = ref('#165DFF');
  const isDrawer = ref(false);
  const alertText = ref(
    '该功能主要实时预览各种布局效果，更多完整配置在 /src/settings 中设置，自由搭配，随心所欲，极大程度满足您的个性化需求。',
  );
  const appThemeList = designStore.appThemeList;

  watch(
    () => designStore.darkTheme,
    (to) => {
      settingStore.navTheme = to ? 'header-dark' : 'dark';
      const htmlRoot = document.getElementById('htmlRoot');
      if (!htmlRoot) return;
      const themeModel = to ? 'dark' : 'light';
      htmlRoot.setAttribute('data-theme', themeModel);
      htmlRoot.setAttribute('class', themeModel);
    },
  );

  function openDrawer() {
    isDrawer.value = true;
  }

  function closeDrawer() {
    isDrawer.value = false;
  }

  function togNavTheme(theme) {
    settingStore.navTheme = theme;
    if (settingStore.navMode === 'horizontal' && ['light'].includes(theme)) {
      settingStore.navTheme = 'dark';
    }
  }

  function togNavMode(mode) {
    settingStore.navMode = mode;
    settingStore.menuSetting.mixMenu = false;
  }

  //主题色切换
  function themeColorChange(color) {
    document.documentElement.style.setProperty('--el-color-primary', color);
    document.documentElement.style.setProperty(
      '--el-color-primary-dark-2',
      colorTool.darken(color, 0.2),
    );
    for (let c = 1; c <= 9; c++) {
      document.documentElement.style.setProperty(
        `--el-color-primary-light-${c}`,
        colorTool.lighten(color, c / 10),
      );
    }
    document.documentElement.style.setProperty(
      `--el-color-primary-darken-1`,
      colorTool.darken(color, 0.1),
    );
    designStore.appTheme = color;
  }

  defineExpose({
    themeColorChange,
    openDrawer,
    closeDrawer,
  });
</script>

<style lang="scss">
  .setting-drawer {
    .el-drawer__header {
      margin-bottom: 10px;
    }
    .el-drawer__body {
      padding-top: 0;
    }
  }
</style>

<style lang="scss" scoped>
  .drawer {
    .n-divider:not(.n-divider--vertical) {
      margin: 10px 0;
    }

    &-setting-item {
      display: flex;
      align-items: center;
      padding: 3px 0;
      flex-wrap: wrap;

      &-style {
        display: inline-block;
        position: relative;
        margin-right: 16px;
        cursor: pointer;
        text-align: center;

        img {
          display: block;
        }
      }

      &-title {
        flex: 1 1;
        font-size: 14px;
      }

      &-action {
        flex: 0 0 auto;
      }

      &-select {
        flex: 1;
      }

      .theme-item {
        width: 20px;
        min-width: 20px;
        height: 20px;
        cursor: pointer;
        border: 1px solid #eee;
        border-radius: 2px;
        margin: 0 5px 5px 0;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;

        .n-icon {
          color: #fff;
        }
      }
    }

    .align-items-top {
      align-items: flex-start;
      justify-content: space-around;
      padding: 2px 0;
    }

    .justify-center {
      justify-content: center;
    }

    .dark-switch .n-switch {
      :deep(.n-switch__rail) {
        background-color: #000e1c;
      }
    }

    //css 实现导航栏风格切换
    .nav-pattern {
      display: block;
      padding: 0;
      margin: 0;
      border: none;
      height: auto;
      &-item {
        width: 50px;
        height: 40px;
        position: relative;
        background-color: #f5f7f9;
        border-radius: 3px;
        overflow: hidden;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        &-left {
          width: 13px;
          height: 40px;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
        }
        &-top {
          width: 50px;
          height: 13px;
          position: absolute;
          top: 0;
          z-index: 1;
        }
        .light-bg {
          background-color: #fff;
        }
        .dark-bg {
          background-color: #001428;
        }
        .default-bg {
          background-color: #f5f7f9;
        }
        //顶层
        .topfloor {
          z-index: 2;
        }
      }
    }
  }
</style>
