<template>
  <el-divider content-position="left">界面设置</el-divider>
  <div class="flex-between">
    <div>菜单水平折叠</div>
    <div>
      <el-switch
        v-model="themeConfig.isCollapse"
        @change="handleThemeConfigChange"
      ></el-switch>
    </div>
  </div>
  <div class="flex-between">
    <div>菜单手风琴</div>
    <div>
      <el-switch
        v-model="themeConfig.isUniqueOpened"
        @change="handleThemeConfigChange"
      ></el-switch>
    </div>
  </div>
  <div class="flex-between">
    <div>固定 Header</div>
    <div>
      <el-switch
        v-model="themeConfig.isFixedHeader"
        @change="handleThemeConfigChange"
      ></el-switch>
    </div>
  </div>
  <div class="flex-between">
    <div>经典布局分割菜单</div>
    <div>
      <el-switch
        v-model="themeConfig.isClassicSplitMenu"
        @change="handleThemeConfigChange"
      >
      </el-switch>
    </div>
  </div>
  <div class="flex-between mt15">
    <div>开启锁屏</div>
    <div>
      <el-switch
        v-model="themeConfig.isLockScreen"
        @change="handleThemeConfigChange"
      ></el-switch>
    </div>
  </div>
  <div class="flex-between">
    <div>自动锁屏(s/秒)</div>
    <div>
      <el-input-number
        v-model="themeConfig.lockScreenTime"
        controls-position="right"
        :min="0"
        :max="9999"
        @change="handleThemeConfigChange"
        size="mini"
        style="width: 90px"
      >
      </el-input-number>
    </div>
  </div>
</template>

script
<script lang="ts">
import { defineComponent, computed } from "vue";
import { useStore } from "@/hooks/useStore";
import { setLocalThemeConfig } from "@/utils/theme";

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

  setup() {
    const store = useStore();

    const themeConfig = computed(() => {
      return store.state.themeConfig;
    });
    /**
     * 监听界面设置变化
     */
    const handleThemeConfigChange = () => {
      // 本地保存主题配置
      setLocalThemeConfig(themeConfig.value);
    };

    return {
      themeConfig,
      handleThemeConfigChange,
    };
  },
});
</script>

<style lang="scss" scoped>
.flex-between {
  display: flex;
  justify-content: space-between;
  margin: 15px 0;
}
</style>
