<template>
  <div class="layout-breadcrumb-seting">
    <el-drawer
      title="布局配置"
      v-model="themeConfig.isDrawer"
      direction="rtl"
      destroy-on-close
      size="300px"
      @closed="handleDrawerClosed"
    >
      <el-scrollbar class="layout-breadcrumb-seting-bar">
        <!-- 全局主题 -->
        <GlobalTheme />

        <!-- 菜单 / 顶栏 -->
        <MenuHeaderTheme />

        <!-- 界面设置 -->
        <InterfaceSetting />

        <!-- 界面显示 -->
        <InterfaceAppears />

        <!-- 其它设置 -->
        <OthersTheme />

        <!-- 布局切换 -->
        <LayoutTheme />
      </el-scrollbar>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, nextTick } from "vue";
import GlobalTheme from "./components/global-theme.vue";
import MenuHeaderTheme from "./components/menu-header-theme.vue";
import InterfaceSetting from "./components/interface-settings.vue";
import InterfaceAppears from "./components/interface-appears.vue";
import OthersTheme from "./components/others-theme.vue";
import LayoutTheme from "./components/layout-theme.vue";

import { useStore } from "@/hooks/useStore";
import { Local } from "@/utils/storage";

export default defineComponent({
  name: "theme-settings",

  setup() {
    const store = useStore();

    const themeConfig = computed(() => {
      return store.state.themeConfig;
    });

    const handleDrawerClosed = () => {
      nextTick(() => {
        Local.set("themeConfig", themeConfig.value);
      });
    };

    return {
      themeConfig,
      handleDrawerClosed,
    };
  },

  components: {
    GlobalTheme,
    MenuHeaderTheme,
    InterfaceSetting,
    InterfaceAppears,
    OthersTheme,
    LayoutTheme,
  },
});
</script>

<style scoped lang="scss">
.layout-breadcrumb-seting-bar {
  height: calc(100vh - 50px);
  padding: 0 15px;
  ::v-deep(.el-scrollbar__view) {
    overflow-x: hidden !important;
  }
  .layout-breadcrumb-seting-bar-flex {
    display: flex;
    align-items: center;
    &-label {
      flex: 1;
      color: #666666;
    }
  }
}
</style>
