<template>
  <span class="i-layout-header-trigger i-layout-header-trigger-min" @click="showSetting">
    <Icon type="md-more" />

    <Drawer v-model="visible" width="280">
      <Divider size="small">主题风格设置</Divider>

      <div class="i-layout-header-setting-item">
        <div class="i-layout-header-setting-item-radio" :class="{ on: siderTheme === 'dark' }" @click="handleChangeSetting('siderTheme', 'dark')">
          <Tooltip content="暗色侧边栏" placement="top" transfer>
            <img src="../../../assets/svg/nav-theme-dark.svg" />
          </Tooltip>
        </div>
        <div class="i-layout-header-setting-item-radio" :class="{ on: siderTheme === 'light' }" @click="handleChangeSetting('siderTheme', 'light')">
          <Tooltip content="亮色侧边栏" placement="top" transfer>
            <img src="../../../assets/svg/nav-theme-light.svg" />
          </Tooltip>
        </div>
      </div>
      <div class="i-layout-header-setting-item">
        <div class="i-layout-header-setting-item-radio" :class="{ on: headerTheme === 'light' }" @click="handleChangeSetting('headerTheme', 'light')">
          <Tooltip content="亮色顶栏" placement="top" transfer>
            <img src="../../../assets/svg/nav-theme-dark.svg" />
          </Tooltip>
        </div>
        <div class="i-layout-header-setting-item-radio" :class="{ on: headerTheme === 'dark' }" @click="handleChangeSetting('headerTheme', 'dark')">
          <Tooltip content="暗色顶栏" placement="top" transfer>
            <img src="../../../assets/svg/header-theme-dark.svg" />
          </Tooltip>
        </div>
        <div class="i-layout-header-setting-item-radio" :class="{ on: headerTheme === 'primary' }" @click="handleChangeSetting('headerTheme', 'primary')">
          <Tooltip content="主色顶栏" placement="top" transfer>
            <img src="../../../assets/svg/header-theme-primary.svg" />
          </Tooltip>
        </div>
      </div>

      <Divider size="small">导航设置</Divider>

      <div class="i-layout-header-setting-item">
        <span class="i-layout-header-setting-item-desc">固定侧边栏</span>
        <span class="i-layout-header-setting-item-action">
          <Switch size="small" :value="siderFix" @on-change="val => handleChangeSetting('siderFix', val)" />
        </span>
      </div>
      <div class="i-layout-header-setting-item">
        <span class="i-layout-header-setting-item-desc">固定顶栏</span>
        <span class="i-layout-header-setting-item-action">
          <Switch size="small" :value="headerFix" @on-change="val => handleChangeSetting('headerFix', val)" />
        </span>
      </div>
      <div class="i-layout-header-setting-item" :class="{ 'i-layout-header-setting-item-disabled': !headerFix }">
        <span class="i-layout-header-setting-item-desc">
          下滑时隐藏顶栏
          <Tooltip placement="top" content="需开启固定顶栏" transfer>
            <Icon type="ios-help-circle-outline" />
          </Tooltip>
        </span>
        <span class="i-layout-header-setting-item-action">
          <Switch size="small" :value="headerHide" :disabled="!headerFix" @on-change="val => handleChangeSetting('headerHide', val)" />
        </span>
      </div>
      <div class="i-layout-header-setting-item" :class="{ 'i-layout-header-setting-item-disabled': !headerFix }">
        <span class="i-layout-header-setting-item-desc">
          置顶顶栏
          <Tooltip placement="top" content="需开启固定顶栏" transfer>
            <Icon type="ios-help-circle-outline" />
          </Tooltip>
        </span>
        <span class="i-layout-header-setting-item-action">
          <Switch size="small" :value="headerStick" :disabled="!headerFix" @on-change="val => handleChangeSetting('headerStick', val)" />
        </span>
      </div>
      <div class="i-layout-header-setting-item">
        <span class="i-layout-header-setting-item-desc">侧边栏开启手风琴模式</span>
        <span class="i-layout-header-setting-item-action">
          <Switch size="small" :value="menuAccordion" @on-change="val => handleChangeSetting('menuAccordion', val)" />
        </span>
      </div>
      <div class="i-layout-header-setting-item">
        <span class="i-layout-header-setting-item-desc">显示折叠侧边栏按钮</span>
        <span class="i-layout-header-setting-item-action">
          <Switch size="small" :value="showSiderCollapse" @on-change="val => handleChangeSetting('showSiderCollapse', val)" />
        </span>
      </div>
      <div class="i-layout-header-setting-item">
        <span class="i-layout-header-setting-item-desc">侧边栏折叠时显示父级菜单名</span>
        <span class="i-layout-header-setting-item-action">
          <Switch size="small" :value="showCollapseMenuTitle" @on-change="val => handleChangeSetting('showCollapseMenuTitle', val)" />
        </span>
      </div>
      <div class="i-layout-header-setting-item">
        <span class="i-layout-header-setting-item-desc">
          显示全局面包屑导航
          <Tooltip placement="top" content="headerMenu 开启时无效" transfer>
            <Icon type="ios-help-circle-outline" />
          </Tooltip>
        </span>
        <span class="i-layout-header-setting-item-action">
          <Switch size="small" :value="showBreadcrumb" @on-change="val => handleChangeSetting('showBreadcrumb', val)" />
        </span>
      </div>
      <div class="i-layout-header-setting-item" :class="{ 'i-layout-header-setting-item-disabled': !showBreadcrumb }">
        <span class="i-layout-header-setting-item-desc">
          全局面包屑显示图标
          <Tooltip placement="top" content="需开启全局面包屑导航" transfer>
            <Icon type="ios-help-circle-outline" />
          </Tooltip>
        </span>
        <span class="i-layout-header-setting-item-action">
          <Switch size="small" :value="showBreadcrumbIcon" :disabled="!showBreadcrumb" @on-change="val => handleChangeSetting('showBreadcrumbIcon', val)" />
        </span>
      </div>
      <div class="i-layout-header-setting-item">
        <span class="i-layout-header-setting-item-desc">显示重载页面按钮</span>
        <span class="i-layout-header-setting-item-action">
          <Switch size="small" :value="showReload" @on-change="val => handleChangeSetting('showReload', val)" />
        </span>
      </div>
      <div class="i-layout-header-setting-item">
        <span class="i-layout-header-setting-item-desc">显示多语言选择</span>
        <span class="i-layout-header-setting-item-action">
          <Switch size="small" :value="showI18n" @on-change="val => handleChangeSetting('showI18n', val)" />
        </span>
      </div>

      <Divider size="small">其它设置</Divider>

      <div class="i-layout-header-setting-item">
        <span class="i-layout-header-setting-item-desc">开启多页签</span>
        <span class="i-layout-header-setting-item-action">
          <Switch size="small" :value="tabs" @on-change="val => handleChangeSetting('tabs', val)" />
        </span>
      </div>
      <div class="i-layout-header-setting-item" :class="{ 'i-layout-header-setting-item-disabled': !tabs }">
        <span class="i-layout-header-setting-item-desc">
          多页签显示图标
          <Tooltip placement="top" content="需开启多页签" transfer>
            <Icon type="ios-help-circle-outline" />
          </Tooltip>
        </span>
        <span class="i-layout-header-setting-item-action">
          <Switch size="small" :value="showTabsIcon" :disabled="!tabs" @on-change="val => handleChangeSetting('showTabsIcon', val)" />
        </span>
      </div>
      <div class="i-layout-header-setting-item" :class="{ 'i-layout-header-setting-item-disabled': !tabs }">
        <span class="i-layout-header-setting-item-desc">
          固定多页签
          <Tooltip placement="top" content="需开启多页签" transfer>
            <Icon type="ios-help-circle-outline" />
          </Tooltip>
        </span>
        <span class="i-layout-header-setting-item-action">
          <Switch size="small" :value="tabsFix" :disabled="!tabs" @on-change="val => handleChangeSetting('tabsFix', val)" />
        </span>
      </div>
      <Alert type="warning">
        <div slot="desc">
          该功能主要实时预览各种布局效果，更多完整配置在
          <strong>setting.js</strong>
          中设置。建议在生产环境关闭该布局预览功能。
        </div>
      </Alert>
    </Drawer>
  </span>
</template>
<script>
  import { mapState, mapMutations } from 'vuex';

  export default {
    name: 'iHeaderSetting',
    data() {
      return {
        visible: false
      };
    },
    computed: {
      ...mapState('admin/layout', [
        'siderTheme',
        'headerTheme',
        'headerStick',
        'siderFix',
        'headerFix',
        'headerHide',
        'menuAccordion',
        'showSiderCollapse',
        'tabs',
        'showTabsIcon',
        'tabsFix',
        'showBreadcrumb',
        'showBreadcrumbIcon',
        'showReload',
        'showI18n',
        'showCollapseMenuTitle'
      ])
    },
    methods: {
      ...mapMutations('admin/layout', ['updateLayoutSetting']),
      showSetting() {
        this.visible = true;
      },
      handleChangeSetting(key, value) {
        this.updateLayoutSetting({
          key,
          value
        });
      }
    }
  };
</script>
