<script lang="ts" setup>
import { viewTransitionTheme } from 'antdv-pro-layout';
import useLayoutStore from '@/store/modules/layout';
import useI18n from '@/hooks/useI18n';
const { t } = useI18n();
const { proConfig, changeConf, themeConfig, changePrimaryColor } =
  useLayoutStore();

let timerId: any = null;

/**改变主题色 */
function fnColorChange(e: Event) {
  const target = e.target as HTMLInputElement;
  // 需要防抖函数处理
  clearTimeout(timerId);
  timerId = setTimeout(() => {
    if (target.nodeName === 'INPUT') {
      changePrimaryColor(target.value ?? '#1890ff');
    } else {
      changePrimaryColor();
    }
  }, 300);
}

/**手动变更主题-过渡动画 */
function changeTheme(e: any) {
  viewTransitionTheme(isDarkMode => {
    changeConf('theme', isDarkMode ? 'light' : 'dark');
  }, e);
}
</script>

<template>
  <a-divider orientation="left">
    {{ t('views.account.settings.area1') }}
  </a-divider>
  <a-list item-layout="vertical" size="large" row-key="title">
    <a-list-item>
      {{ t('views.account.settings.layout') }}
      <template #actions>
        {{ t('views.account.settings.layoutActions') }}
      </template>
      <template #extra>
        <a-radio-group
          style="margin-bottom: 12px"
          :value="proConfig.layout"
          @change="(e:any) => changeConf('layout', e.target.value)"
        >
          <a-radio value="side">
            {{ t('views.account.settings.layoutSide') }}
          </a-radio>
          <a-radio value="top">
            {{ t('views.account.settings.layoutTop') }}
          </a-radio>
          <a-radio value="mix">
            {{ t('views.account.settings.layoutMix') }}
          </a-radio>
        </a-radio-group>
      </template>
    </a-list-item>
    <a-list-item>
      {{ t('views.account.settings.color') }}
      <template #actions>
        {{ t('views.account.settings.colorActions') }}
      </template>
      <template #extra>
        <a-space :size="16" align="end" direction="horizontal">
          <a-button type="primary" size="small" @click="fnColorChange">
            {{ t('views.account.settings.colorRandomly') }}
          </a-button>
          <input
            type="color"
            :value="themeConfig?.token?.colorPrimary"
            @input="fnColorChange"
          />
        </a-space>
      </template>
    </a-list-item>
    <a-list-item>
      {{ t('views.account.settings.theme') }}
      <template #actions>
        {{ t('views.account.settings.themeActions') }}
      </template>
      <template #extra>
        <a-button
          :type="proConfig.theme === 'dark' ? 'primary' : 'default'"
          size="small"
          @click="changeTheme"
        >
          {{ proConfig.theme }}
        </a-button>
      </template>
    </a-list-item>
    <a-list-item>
      {{ t('views.account.settings.navTheme') }}
      <template #actions>
        {{ t('views.account.settings.navThemeActions') }}
      </template>
      <template #extra>
        <a-switch
          :checked-children="t('common.switch.open')"
          :un-checked-children="t('common.switch.shut')"
          :checked="proConfig.menuTheme === 'dark'"
          @change="
            (checked:any) => changeConf('menuTheme', checked ? 'dark' : 'light')
          "
        ></a-switch>
      </template>
    </a-list-item>
    <a-list-item>
      {{ t('views.account.settings.fixedHeader') }}
      <template #actions>
        {{ t('views.account.settings.fixedHeaderActions') }}
      </template>
      <template #extra>
        <a-switch
          :checked-children="t('common.switch.open')"
          :un-checked-children="t('common.switch.shut')"
          :checked="proConfig.fixedHeader"
          @change="(checked:any) => changeConf('fixedHeader', checked)"
        ></a-switch>
      </template>
    </a-list-item>
    <a-list-item>
      {{ t('views.account.settings.fixSiderbar') }}
      <template #actions>
        {{ t('views.account.settings.fixSiderbarActions') }}
      </template>
      <template #extra>
        <a-switch
          :checked-children="t('common.switch.open')"
          :un-checked-children="t('common.switch.shut')"
          :checked="proConfig.fixSiderbar"
          @change="(checked:any) => changeConf('fixSiderbar', checked)"
        ></a-switch>
      </template>
    </a-list-item>
    <a-list-item>
      {{ t('views.account.settings.splitMenus') }}
      <template #actions>
        {{ t('views.account.settings.splitMenusActions') }}
      </template>
      <template #extra>
        <a-switch
          :checked-children="t('common.switch.open')"
          :un-checked-children="t('common.switch.shut')"
          :checked="proConfig.splitMenus"
          @change="(checked:any) => changeConf('splitMenus', checked)"
        ></a-switch>
      </template>
    </a-list-item>
  </a-list>
  <a-divider orientation="left">
    {{ t('views.account.settings.area2') }}
  </a-divider>
  <a-list item-layout="vertical" size="large" row-key="title">
    <a-list-item>
      {{ t('views.account.settings.headerRender') }}
      <template #actions>
        {{ t('views.account.settings.headerRenderActions') }}
      </template>
      <template #extra>
        <a-switch
          :checked-children="t('common.switch.show')"
          :un-checked-children="t('common.switch.hide')"
          :checked="proConfig.headerRender === undefined"
          @change="
            (checked:any) => changeConf('headerRender', checked === true && undefined)
          "
        ></a-switch>
      </template>
    </a-list-item>
    <a-list-item>
      {{ t('views.account.settings.footerRender') }}
      <template #actions>
        {{ t('views.account.settings.footerRenderActions') }}
      </template>
      <template #extra>
        <a-switch
          :checked-children="t('common.switch.show')"
          :un-checked-children="t('common.switch.hide')"
          :checked="proConfig.footerRender === undefined"
          @change="
            (checked:any) => changeConf('footerRender', checked === true && undefined)
          "
        ></a-switch>
      </template>
    </a-list-item>
    <a-list-item>
      {{ t('views.account.settings.menuHeaderRender') }}
      <template #actions>
        {{ t('views.account.settings.menuHeaderRenderActions') }}
      </template>
      <template #extra>
        <a-switch
          :checked-children="t('common.switch.show')"
          :un-checked-children="t('common.switch.hide')"
          :checked="proConfig.menuHeaderRender === undefined"
          @change="
            (checked:any) => changeConf('menuHeaderRender', checked === true && undefined)
          "
        ></a-switch>
      </template>
    </a-list-item>
    <a-list-item>
      {{ t('views.account.settings.tabRender') }}
      <template #actions>
        {{ t('views.account.settings.tabRenderActions') }}
      </template>
      <template #extra>
        <a-switch
          :checked-children="t('common.switch.show')"
          :un-checked-children="t('common.switch.hide')"
          :checked="proConfig.tabRender === undefined"
          @change="
            (checked:any) => changeConf('tabRender', checked === true && undefined)
          "
        ></a-switch>
      </template>
    </a-list-item>
  </a-list>
</template>

<style lang="less" scoped></style>
