<template>
  <!-- 创建一个带有 setting-drawer 类名的 div 容器，并添加 ref 属性为 settingDrawer，方便后续在 JavaScript 代码中通过 $refs 获取该元素 -->
  <div class="setting-drawer" ref="settingDrawer">
    <!-- 使用 a-drawer 组件（可能来自 Ant Design Vue 等相关 UI 组件库）创建一个抽屉式的侧边栏组件，以下是对其属性的配置 -->
    <a-drawer
      width="300"
      placement="right"
      @close="onClose"
      :closable="false"
      :visible="visible"
      :getContainer="() => $refs.settingDrawer"
      :style="{}"
    >
      <!-- 创建一个名为 setting-drawer-index-content 的 div 容器，用于放置抽屉内的各种设置内容 -->
      <div class="setting-drawer-index-content">

        <!-- 创建一个 div 容器，设置底部外边距为 24px，用于对整体风格设置部分进行整体布局 -->
        <div :style="{ marginBottom: '24px' }">
          <!-- 创建一个 h3 标题元素，展示“整体风格设置”的标题内容 -->
          <h3 class="setting-drawer-index-title">整体风格设置</h3>

          <!-- 创建一个名为 setting-drawer-index-blockChecbox 的 div 容器，用于放置与整体风格相关的选项元素，设置为弹性布局（display: flex）方便内部元素排列 -->
          <div class="setting-drawer-index-blockChecbox">
            <!-- 使用 a-tooltip 组件（用于展示提示信息的工具提示组件），当鼠标悬停在对应元素上时显示提示内容 -->
            <a-tooltip>
              <!-- 定义 a-tooltip 组件的提示内容插槽 -->
              <template slot="title">
                暗色菜单风格
              </template>
              <!-- 创建一个名为 setting-drawer-index-item 的 div 容器，用于单个风格选项的展示，添加点击事件，点击时调用 handleMenuTheme 方法并传入 'dark' 参数 -->
              <div class="setting-drawer-index-item" @click="handleMenuTheme('dark')">
                <!-- 展示对应风格的图片，设置图片的源地址 -->
                <img src="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" alt="dark">
                <!-- 创建一个名为 setting-drawer-index-selectIcon 的 div 容器，用于显示选中图标（当 navTheme 为 'dark' 时显示），通过 v-if 指令进行条件渲染 -->
                <div class="setting-drawer-index-selectIcon" v-if="navTheme === 'dark'">
                  <a-icon type="check"/>
                </div>
              </div>
            </a-tooltip>

            <a-tooltip>
              <template slot="title">
                亮色菜单风格
              </template>
              <div class="setting-drawer-index-item" @click="handleMenuTheme('light')">
                <img src="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" alt="light">
                <div class="setting-drawer-index-selectIcon" v-if="navTheme!== 'dark'">
                  <a-icon type="check"/>
                </div>
              </div>
            </a-tooltip>
          </div>
        </div>

        <!-- 再创建一个 div 容器，设置底部外边距为 24px，用于对主题色设置部分进行整体布局 -->
        <div :style="{ marginBottom: '24px' }">
          <h3 class="setting-drawer-index-title">主题色</h3>

          <!-- 创建一个高度为 20px 的 div 容器，用于放置主题色相关的选项元素 -->
          <div style="height: 20px">
            <!-- 使用 v-for 指令遍历 colorList 数组，为每个颜色选项创建一个 a-tooltip 组件，用于展示颜色名称的提示信息 -->
            <a-tooltip class="setting-drawer-theme-color-colorBlock" v-for="(item, index) in colorList" :key="index">
              <template slot="title">
                {{ item.key }}
              </template>
              <!-- 使用 a-tag 组件展示每个颜色选项，设置颜色属性为当前颜色项的 color 值，添加点击事件，点击时调用 changeColor 方法并传入当前颜色值 -->
              <a-tag :color="item.color" @click="changeColor(item.color)">
                <!-- 如果当前颜色项的 color 值与 primaryColor 相等，则显示一个选中图标（a-icon） -->
                <a-icon type="check" v-if="item.color === primaryColor"></a-icon>
              </a-tag>
            </a-tooltip>

          </div>
        </div>
        <!-- 使用 a-divider 组件绘制一条分割线，用于区分不同的设置板块 -->
        <a-divider />

        <!-- 创建一个 div 容器，设置底部外边距为 24px，用于对导航模式设置部分进行整体布局 -->
        <div :style="{ marginBottom: '24px' }">
          <h3 class="setting-drawer-index-title">导航模式</h3>

          <!-- 创建一个名为 setting-drawer-index-blockChecbox 的 div 容器，用于放置与导航模式相关的选项元素，设置为弹性布局方便内部元素排列 -->
          <div class="setting-drawer-index-blockChecbox">
            <a-tooltip>
              <template slot="title">
                侧边栏导航
              </template>
              <div class="setting-drawer-index-item" @click="handleLayout('sidemenu')">
                <img src="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" alt="sidemenu">
                <div class="setting-drawer-index-selectIcon" v-if="layoutMode === 'sidemenu'">
                  <a-icon type="check"/>
                </div>
              </div>
            </a-tooltip>

            <a-tooltip>
              <template slot="title">
                顶部栏导航
              </template>
              <div class="setting-drawer-index-item" @click="handleLayout('topmenu')">
                <img src="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" alt="topmenu">
                <div class="setting-drawer-index-selectIcon" v-if="layoutMode!== 'sidemenu'">
                  <a-icon type="check"/>
                </div>
              </div>
            </a-tooltip>
          </div>
          <!-- 创建一个 div 容器，设置顶部外边距为 24px，用于放置导航模式相关的更多设置选项 -->
          <div :style="{ marginTop: '24px' }">
            <!-- 使用 a-list 组件（可能用于展示列表形式的设置项），设置 split 属性为 false，表示列表项之间不显示分割线 -->
            <a-list :split="false">
              <a-list-item>
                <!-- 使用 a-tooltip 组件为当前设置项添加提示信息，鼠标悬停时显示 -->
                <a-tooltip slot="actions">
                  <template slot="title">
                    该设定仅 [顶部栏导航] 时有效
                  </template>
                  <!-- 使用 a-select 组件创建一个下拉选择框，设置尺寸为 small，宽度为 80px，默认值为 contentWidth，添加 change 事件，当选项改变时调用 handleContentWidthChange 方法 -->
                  <a-select size="small" style="width: 80px;" :defaultValue="contentWidth" @change="handleContentWidthChange">
                    <a-select-option value="Fixed">固定</a-select-option>
                    <a-select-option value="Fluid" v-if="layoutMode!== 'sidemenu'">流式</a-select-option>
                  </a-select>
                </a-tooltip>
                <!-- 使用 a-list-item-meta 组件展示列表项的元信息，这里主要是设置标题内容 -->
                <a-list-item-meta>
                  <div slot="title">内容区域宽度</div>
                </a-list-item-meta>
              </a-list-item>
              <a-list-item>
                <!-- 使用 a-switch 组件创建一个开关按钮，设置尺寸为 small，默认选中状态为 fixedHeader 的值，添加 change 事件，当开关状态改变时调用 handleFixedHeader 方法 -->
                <a-switch slot="actions" size="small" :defaultChecked="fixedHeader" @change="handleFixedHeader" />
                <a-list-item-meta>
                  <div slot="title">固定 Header</div>
                </a-list-item-meta>
              </a-list-item>
              <a-list-item>
                <a-switch slot="actions" size="small" :disabled="!fixedHeader" :defaultChecked="autoHideHeader" @change="handleFixedHeaderHidden" />
                <a-list-item-meta>
                  <a-tooltip slot="title" placement="left">
                    <template slot="title">固定 Header 时可配置</template>
                    <div :style="{ opacity:!fixedHeader? '0.5' : '1' }">下滑时隐藏 Header</div>
                  </a-tooltip>
                </a-list-item-meta>
              </a-list-item>
              <a-list-item >
                <a-switch slot="actions" size="small" :disabled="(layoutMode === 'topmenu')" :defaultChecked="fixSiderbar" @change="handleFixSiderbar" />
                <a-list-item-meta>
                  <div slot="title" :style="{ textDecoration: layoutMode === 'topmenu'? 'line-through' : 'unset' }">固定侧边菜单</div>
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </div>
        </div>
        <a-divider />

        <!-- 创建一个 div 容器，设置底部外边距为 24px，用于对其他设置部分进行整体布局 -->
        <div :style="{ marginBottom: '24px' }">
          <h3 class="setting-drawer-index-title">其他设置</h3>
          <div>
            <a-list :split="false">
              <a-list-item>
                <a-switch slot="actions" size="small" :defaultChecked="colorWeak" @change="onColorWeak" />
                <a-list-item-meta>
                  <div slot="title">色弱模式</div>
                </a-list-item-meta>
              </a-list-item>
              <a-list-item>
                <a-switch slot="actions" size="small" :defaultChecked="multiTab" @change="onMultiTab" />
                <a-list-item-meta>
                  <div slot="title">多页签模式</div>
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </div>
        </div>
        <a-divider />
        <div :style="{ marginBottom: '24px' }">
          <!-- 使用 a-button 组件创建一个按钮，添加点击事件，点击时调用 doCopy 方法，设置显示图标为 'copy'，并设置按钮占满父元素宽度（block 属性），按钮文本为“拷贝设置” -->
          <a-button
            @click="doCopy"
            icon="copy"
            block
          >拷贝设置</a-button>
          <!-- 使用 a-alert 组件创建一个警告提示框，设置提示类型为 'warning'，设置顶部外边距为 24px -->
          <a-alert type="warning" :style="{ marginTop: '24px' }">
            <span slot="message">
              配置栏只在开发环境用于预览，生产环境不会展现，请手动修改配置文件
              <a href="https://github.com/sendya/ant-design-pro-vue/blob/master/src/config/defaultSettings.js" target="_blank">src/config/defaultSettings.js</a>
            </span>
          </a-alert>
        </div>
      </div>
      <!-- 创建一个名为 setting-drawer-index-handle 的 div 容器，用于控制抽屉的显示和隐藏，添加点击事件，点击时调用 toggle 方法 -->
      <div class="setting-drawer-index-handle" @click="toggle">
        <!-- 如果抽屉当前不可见（visible 为 false），则显示设置图标（a-icon） -->
        <a-icon type="setting" v-if="!visible"/>
        <!-- 如果抽屉当前可见（visible 为 true），则显示关闭图标（a-icon） -->
        <a-icon type="close" v-else/>
      </div>
    </a-drawer>
  </div>
</template>

<script>
// 从项目相对路径 '../../components' 导入 DetailList 模块（具体功能取决于该模块的定义，可能是一个组件或者功能函数集合等）
import { DetailList } from '../../components';
// 从当前目录下的 SettingItem 文件（可能是一个 Vue 组件定义文件）导入 SettingItem 模块
import SettingItem from './SettingItem';
// 从项目相对路径 '../../config/defaultSettings' 导入 config 模块（可能包含了项目的一些默认配置信息）
import config from '../../config/defaultSettings';
// 从当前目录下的 settingConfig 文件中导入 updateTheme、updateColorWeak、colorList 这几个函数或变量（可能与主题设置、颜色设置相关的功能模块）
import { updateTheme, updateColorWeak, colorList } from './settingConfig';
// 从项目相对路径 '../../utils/mixin' 导入 mixin 和 mixinDevice 模块（可能是 Vue 中的混入对象，用于在组件中混入一些通用的方法、数据等）
import { mixin, mixinDevice } from '../../utils/mixin';

export default {
  components: {
    // 在组件内部注册 DetailList 和 SettingItem 组件，使其可以在模板中使用
    DetailList,
    SettingItem
  },
  mixins: [mixin, mixinDevice],
  data () {
    return {
      // 定义 visible 属性，用于控制抽屉组件（a-drawer）的显示与隐藏，初始值为 true
      visible: true,
      // 将导入的 colorList 赋值给组件内的 colorList 属性，用于存储颜色选项列表（可能在模板中用于展示主题色等相关设置选项）
      colorList,
      // 通过 Object.assign 创建一个 baseConfig 对象，将导入的 config 对象进行深拷贝（浅拷贝的一种模拟方式，实际不完全等同于深拷贝，但对于简单对象通常能满足需求），用于存储组件内的基础配置信息，后续对配置的修改会基于这个对象进行，避免直接修改原始的 config 对象
      baseConfig: Object.assign({}, config)
    }
  },
  watch: {

  },
  mounted () {
    const vm = this;
    // 使用 setTimeout 设置一个延迟为 16 毫秒的定时器，在定时器回调函数中将 visible 属性设置为 false，可能用于初始时短暂展示抽屉后自动隐藏，或者是等待某些资源加载完成后再隐藏等操作
    setTimeout(() => {
      vm.visible = false;
    }, 16);
    // 当组件内的 primaryColor 属性与导入的 config 中的 primaryColor 不相等时（即主题色不是默认色时），调用 updateTheme 函数更新主题，传入当前的 primaryColor 值来改变主题颜色相关的样式
    if (this.primaryColor!== config.primaryColor) {
      updateTheme(this.primaryColor);
    }
    // 当组件内的 colorWeak 属性与导入的 config 中的 colorWeak 不相等时，调用 updateColorWeak 函数更新色弱模式相关的样式，传入当前的 colorWeak 值来切换色弱模式的应用
    if (this.colorWeak!== config.colorWeak) {
      updateColorWeak(this.colorWeak);
    }
  },
  methods: {
    showDrawer () {
      // 用于将抽屉组件设置为显示状态，通过将 visible 属性设置为 true 来实现
      this.visible = true;
    },
    onClose () {
      // 当抽屉关闭时调用的方法，将 visible 属性设置为 false，隐藏抽屉组件
      this.visible = false;
    },
    toggle () {
      // 用于切换抽屉组件的显示与隐藏状态，通过对 visible 属性取反来实现
      this.visible =!this.visible;
    },
    onColorWeak (checked) {
      // 当色弱模式开关（可能是一个 a-switch 组件触发的事件）状态改变时调用的方法，接收当前开关的选中状态（checked 参数）
      // 将 baseConfig 对象中的 colorWeak 属性更新为当前开关的状态值，用于记录配置信息的变化
      this.baseConfig.colorWeak = checked;
      // 调用 $store.dispatch 方法触发一个名为 'ToggleWeak' 的 Vuex 动作（假设项目使用了 Vuex 进行状态管理），并传入当前的开关状态值，用于在全局状态中更新色弱模式相关的状态
      this.$store.dispatch('ToggleWeak', checked);
      // 调用 updateColorWeak 函数根据当前开关状态更新页面的色弱模式相关样式
      updateColorWeak(checked);
    },
    onMultiTab (checked) {
      // 当多页签模式开关状态改变时调用的方法，类似 onColorWeak 方法的逻辑
      // 更新 baseConfig 对象中的 multiTab 属性记录配置变化
      this.baseConfig.multiTab = checked;
      // 通过 $store.dispatch 触发 'ToggleMultiTab' 动作在全局状态中更新多页签模式相关状态
      this.$store.dispatch('ToggleMulti