<template>
  <el-drawer v-model="drawerVisible" title="布局设置" size="300px">
    <!-- 布局切换 -->
    <!-- <el-divider class="divider" content-position="center">
      <el-icon><Notification /></el-icon>
      布局切换
    </el-divider>
    <div class="layout-box mb30">
      <el-tooltip effect="dark" content="纵向" placement="top" :show-after="200">
        <div :class="['layout-item layout-vertical', { 'is-active': layout == 'vertical' }]" @click="setLayout('vertical')">
          <div class="layout-dark"></div>
          <div class="layout-container">
            <div class="layout-light"></div>
            <div class="layout-content"></div>
          </div>
          <el-icon v-if="layout == 'vertical'"><CircleCheckFilled /></el-icon>
        </div>
      </el-tooltip>
      <el-tooltip effect="dark" content="经典" placement="top" :show-after="200">
        <div :class="['layout-item layout-classic', { 'is-active': layout == 'classic' }]" @click="setLayout('classic')">
          <div class="layout-dark"></div>
          <div class="layout-container">
            <div class="layout-light"></div>
            <div class="layout-content"></div>
          </div>
          <el-icon v-if="layout == 'classic'"><CircleCheckFilled /></el-icon>
        </div>
      </el-tooltip>
      <el-tooltip effect="dark" content="横向" placement="top" :show-after="200">
        <div :class="['layout-item layout-transverse', { 'is-active': layout == 'transverse' }]" @click="setLayout('transverse')">
          <div class="layout-dark"></div>
          <div class="layout-content"></div>
          <el-icon v-if="layout == 'transverse'"><CircleCheckFilled /></el-icon>
        </div>
      </el-tooltip>
      <el-tooltip effect="dark" content="分栏" placement="top" :show-after="200">
        <div :class="['layout-item layout-columns', { 'is-active': layout == 'columns' }]" @click="setLayout('columns')">
          <div class="layout-dark"></div>
          <div class="layout-light"></div>
          <div class="layout-content"></div>
          <el-icon v-if="layout == 'columns'"><CircleCheckFilled /></el-icon>
        </div>
      </el-tooltip>
    </div> -->

    <!-- 全局主题 -->
    <el-divider class="divider" content-position="center">
      <el-icon><ColdDrink /></el-icon>
      全局主题
    </el-divider>
    <!-- <div class="theme-item">
      <span>主题颜色</span>
      <el-color-picker v-model="primary" :predefine="colorList" @change="changePrimary" />
    </div> -->
    <div class="theme-item">
      <span>暗黑模式</span>
      <SwitchDark />
    </div>
    <div class="theme-item">
      <span>灰色模式</span>
      <el-switch v-model="isGrey" @change="changeGreyOrWeak('grey', !!$event)" />
    </div>
    <div class="theme-item">
      <span>色弱模式</span>
      <el-switch v-model="isWeak" @change="changeGreyOrWeak('weak', !!$event)" />
    </div>
    <div class="theme-item mb40">
      <span>
        侧边栏反转色
        <el-tooltip effect="dark" content="该属性目前只在纵向布局模式下生效" placement="top">
          <el-icon><QuestionFilled /></el-icon>
        </el-tooltip>
      </span>
      <el-switch v-model="asideInverted" :disabled="layout !== 'vertical'" @change="setAsideTheme" />
    </div>

    <!-- 界面设置 -->
    <el-divider class="divider" content-position="center">
      <el-icon><Setting /></el-icon>
      界面设置
    </el-divider>
    <div class="theme-item">
      <span>折叠菜单</span>
      <el-switch v-model="isCollapse" />
    </div>
    <div class="theme-item">
      <span>面包屑</span>
      <el-switch v-model="breadcrumb" :disabled="layout == 'vertical' || layout == 'transverse'" />
    </div>
    <div class="theme-item">
      <span>面包屑图标</span>
      <el-switch v-model="breadcrumbIcon" :disabled="layout == 'vertical' || layout == 'transverse'" />
    </div>
    <div class="theme-item">
      <span>标签栏</span>
      <el-switch v-model="tabs" :disabled="layout == 'vertical'" />
    </div>
    <div class="theme-item">
      <span>标签栏图标</span>
      <el-switch v-model="tabsIcon" />
    </div>
    <div class="theme-item">
      <span>页脚</span>
      <el-switch v-model="footer" />
    </div>
    <div class="theme-item">
      <span>切换动画</span>
      <el-switch v-model="tabsAnimating" />
    </div>
    <div class="theme-item autolock-item">
      <span>
        自动锁屏
        <template v-if="autoLockTime > 0"> (分钟) </template>
      </span>
      <el-switch
        v-model="lockTime"
        v-show="autoLockTime == 0"
        :active-value="1"
        :inactive-value="0"
        @change="handleChangeAutoLock"
      />
      <el-input-number
        v-model="lockTime"
        v-show="Number(autoLockTime) != 0"
        :min="0"
        :max="360"
        controls-position="right"
        :precision="0"
        value-on-clear="min"
        @change="handleChangeInputAutoLock"
      />
    </div>
    <div class="theme-item">
      <span>在新标签页中打开详情页</span>
      <el-switch v-model="detailBlank" />
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { storeToRefs } from "pinia";
import { useTheme } from "@/hooks/useTheme";
import { useGlobalStore } from "@/stores/modules/global";
import { LayoutType } from "@/stores/interface";
import { DEFAULT_PRIMARY } from "@/config";
import mittBus from "@/utils/mittBus";
import SwitchDark from "@/components/SwitchDark/index.vue";
import { ElMessage } from "element-plus";
import { Setting, ColdDrink, QuestionFilled } from "@element-plus/icons-vue";
import { MittEnum } from "@/enums/mittEnum";

const { changePrimary, changeGreyOrWeak, setAsideTheme } = useTheme();

const globalStore = useGlobalStore();
const {
  layout,
  primary,
  isGrey,
  isWeak,
  asideInverted,
  isCollapse,
  breadcrumb,
  breadcrumbIcon,
  tabs,
  tabsIcon,
  footer,
  tabsAnimating,
  autoLockTime,
  detailBlank
} = storeToRefs(globalStore);

// 预定义主题颜色
const colorList = [
  DEFAULT_PRIMARY,
  "#daa96e",
  "#0c819f",
  "#409eff",
  "#27ae60",
  "#ff5c93",
  "#e74c3c",
  "#fd726d",
  "#f39c12",
  "#9b59b6"
];

// 设置布局方式
const setLayout = (val: LayoutType) => {
  globalStore.setGlobalState("layout", val);
  setAsideTheme();
};

// 打开主题设置
const drawerVisible = ref(false);
mittBus.on(MittEnum.ThemeDrawer, () => (drawerVisible.value = true));

// 打开自动锁屏
const lockTime = ref(0);
lockTime.value = autoLockTime.value;
const handleChangeAutoLock = (val: string | number | boolean) => {
  autoLockTime.value = lockTime.value;
  globalStore.setGlobalState("autoLockTime", autoLockTime.value);
};
const handleChangeInputAutoLock = (cur: number | undefined, prev: number | undefined) => {
  let valueArr: any = [];
  let _val = cur?.toString();
  valueArr.push(_val);
  console.log("cur :>> ", cur);
  if (_val && !new RegExp(/^\d+$/g).test(_val)) {
    ElMessage.error("仅可输入数值");
    valueArr = _val && _val.match(/\d+(.\d+)?/g);
    console.log("valueArr :>> ", valueArr);
  }
  autoLockTime.value = Number(valueArr[0]);
  // globalStore.setGlobalState("autoLockTime", autoLockTime.value);
};

// const handleTest = (val: any) => {
//   console.log("val :>> ", val);
//   let valueArr: any = [];
//   let _val = val.key;
//   valueArr.push(_val);
//   if (_val && !new RegExp(/^\d+$/g).test(_val)) {
//     ElMessage.error("仅可输入数值");
//     valueArr = _val && _val.match(/\d+(.\d+)?/g);
//     console.log("valueArr eee :>> ", valueArr);
//   }
//   // autoLockTime.value = Number(valueArr[0]);
//   console.log("handleTest valueArr.value :>> ", valueArr);
// };
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
