<!-- 主题设置抽屉 license by http://eleadmin.com -->
<template>
  <locale-receiver component-name="ele">
    <template #default="locale">
      <a-drawer
        :width="280"
        :visible="visible"
        :body-style="{padding: 0}"
        @update:visible="updateVisible">
        <div :class="['ele-setting-wrapper', {'ele-setting-dark': darkMode}]">
          <!-- 侧栏风格 -->
          <div class="ele-setting-title">{{ locale.setting.title }}</div>
          <div class="ele-setting-theme ele-text-primary">
            <a-tooltip :title="locale.setting.sideStyles.dark">
              <div class="ele-bg-base ele-side-dark" @click="setSideStyle('dark')">
                <check-outlined v-if="sideStyle === 'dark'"/>
              </div>
            </a-tooltip>
            <a-tooltip :title="locale.setting.sideStyles.light">
              <div class="ele-bg-base" @click="setSideStyle('light')">
                <check-outlined v-if="sideStyle === 'light'"/>
              </div>
            </a-tooltip>
          </div>
          <!-- 顶栏风格 -->
          <div class="ele-setting-theme ele-text-primary">
            <a-tooltip :title="locale.setting.headStyles.light">
              <div class="ele-bg-base ele-head-light" @click="setHeadStyle('light')">
                <check-outlined v-if="headStyle === 'light'"/>
              </div>
            </a-tooltip>
            <a-tooltip :title="locale.setting.headStyles.dark">
              <div class="ele-bg-base ele-head-dark" @click="setHeadStyle('dark')">
                <check-outlined v-if="headStyle === 'dark'"/>
              </div>
            </a-tooltip>
            <a-tooltip :title="locale.setting.headStyles.primary">
              <div class="ele-bg-base ele-head-primary" @click="setHeadStyle('primary')">
                <div class="ele-bg-primary"></div>
                <check-outlined v-if="headStyle === 'primary'"/>
              </div>
            </a-tooltip>
          </div>
          <!-- 主题色 -->
          <div v-if="(typeof themes !== 'undefined') && (themes !== null)" class="ele-setting-colors">
            <template v-if="themes.length">
              <div
                v-for="(t, i) in themes"
                :key="i"
                class="ele-setting-color-item"
                :style="{'background-color': t.color || t.value}"
                @click="changeColor(t.value)">
                <check-outlined v-if="t.value ? (t.value === color) : !color"/>
                <a-tooltip :title="t.name">
                  <div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;"></div>
                </a-tooltip>
              </div>
            </template>
            <template v-else>
              <div
                v-for="(t, i) in defaultThemes"
                :key="i"
                class="ele-setting-color-item"
                :style="{'background-color': t.color || t.value}"
                @click="changeColor(t.value)">
                <check-outlined v-if="t.value ? (t.value === color) : !color"/>
                <a-tooltip :title="locale.setting.colors[t.name]">
                  <div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;"></div>
                </a-tooltip>
              </div>
            </template>
            <ele-color-picker
              v-if="colorPicker"
              v-model:value="chooseColor"
              :predefine="predefineColors"
              custom-class="ele-setting-color-picker"
              @change="changeColor"/>
          </div>
          <div class="ele-setting-item">
            <div class="setting-item-title">{{ locale.setting.darkMode }}</div>
            <div class="setting-item-control">
              <a-switch size="small" :checked="darkMode" @change="setDarkMode"/>
            </div>
          </div>
          <a-divider/>
          <!-- 导航模式 -->
          <div class="ele-setting-title ele-text-secondary">{{ locale.setting.layoutStyle }}</div>
          <div class="ele-setting-theme ele-text-primary">
            <a-tooltip :title="locale.setting.layoutStyles.side">
              <div class="ele-bg-base ele-side-dark" @click="setLayoutStyle('side')">
                <CheckOutlined v-if="layoutStyle === 'side'"/>
              </div>
            </a-tooltip>
            <a-tooltip :title="locale.setting.layoutStyles.top">
              <div class="ele-bg-base ele-head-dark" @click="setLayoutStyle('top')">
                <CheckOutlined v-if="layoutStyle === 'top'"/>
              </div>
            </a-tooltip>
            <a-tooltip :title="locale.setting.layoutStyles.mix">
              <div class="ele-bg-base ele-layout-mix" @click="setLayoutStyle('mix')">
                <CheckOutlined v-if="layoutStyle === 'mix'"/>
              </div>
            </a-tooltip>
          </div>
          <div class="ele-setting-item">
            <div class="setting-item-title">{{ locale.setting.sideMenuStyle }}</div>
            <div class="setting-item-control">
              <a-switch size="small" :checked="sideMenuStyle === 'mix'" @change="setSideMenuStyle"/>
            </div>
          </div>
          <div class="ele-setting-item">
            <div class="setting-item-title">{{ locale.setting.bodyFull }}</div>
            <div class="setting-item-control">
              <a-switch size="small" :checked="bodyFull" @change="setBodyFull"/>
            </div>
          </div>
          <!-- 其它配置 -->
          <a-divider/>
          <div class="ele-setting-title ele-text-secondary">{{ locale.setting.other }}</div>
          <div class="ele-setting-item">
            <div class="setting-item-title">{{ locale.setting.fixedHeader }}</div>
            <div class="setting-item-control">
              <a-switch size="small" :checked="fixedHeader" @change="setFixedHeader"/>
            </div>
          </div>
          <div class="ele-setting-item">
            <div class="setting-item-title">{{ locale.setting.fixedSidebar }}</div>
            <div class="setting-item-control">
              <a-switch size="small" :checked="fixedSidebar" @change="setFixedSidebar"/>
            </div>
          </div>
          <div class="ele-setting-item">
            <div class="setting-item-title">{{ locale.setting.fixedBody }}</div>
            <div class="setting-item-control">
              <a-switch size="small" :checked="fixedBody" @change="setFixedBody"/>
            </div>
          </div>
          <div class="ele-setting-item">
            <div class="setting-item-title">{{ locale.setting.logoAutoSize }}</div>
            <div class="setting-item-control">
              <a-switch size="small" :checked="logoAutoSize" @change="setLogoAutoSize"/>
            </div>
          </div>
          <div class="ele-setting-item">
            <div class="setting-item-title">{{ locale.setting.colorfulIcon }}</div>
            <div class="setting-item-control">
              <a-switch size="small" :checked="colorfulIcon" @change="setColorfulIcon"/>
            </div>
          </div>
          <div class="ele-setting-item">
            <div class="setting-item-title">{{ locale.setting.sideUniqueOpen }}</div>
            <div class="setting-item-control">
              <a-switch size="small" :checked="sideUniqueOpen" @change="setSideUniqueOpen"/>
            </div>
          </div>
          <div class="ele-setting-item">
            <div class="setting-item-title">{{ locale.setting.showFooter }}</div>
            <div class="setting-item-control">
              <a-switch size="small" :checked="showFooter" @change="setShowFooter"/>
            </div>
          </div>
          <div class="ele-setting-item">
            <div class="setting-item-title">{{ locale.setting.weakMode }}</div>
            <div class="setting-item-control">
              <a-switch size="small" :checked="weakMode" @change="setWeakMode"/>
            </div>
          </div>
          <div class="ele-setting-item">
            <div class="setting-item-title">{{ locale.setting.showTabs }}</div>
            <div class="setting-item-control">
              <a-switch size="small" :checked="showTabs" @change="setShowTabs"/>
            </div>
          </div>
          <div class="ele-setting-item">
            <div class="setting-item-title">{{ locale.setting.tabStyle }}</div>
            <div class="setting-item-control">
              <a-select size="small" :value="tabStyle" style="width: 95px;" @change="setTabStyle">
                <a-select-option value="default">{{ locale.setting.tabStyles.default }}</a-select-option>
                <a-select-option value="dot">{{ locale.setting.tabStyles.dot }}</a-select-option>
                <a-select-option value="card">{{ locale.setting.tabStyles.card }}</a-select-option>
              </a-select>
            </div>
          </div>
          <template v-if="(typeof tips !== 'undefined') && (tips !== null)">
            <a-divider/>
            <a-alert show-icon type="warning" :message="tips || locale.setting.tips">
              <template #icon>
                <sound-outlined/>
              </template>
            </a-alert>
          </template>
        </div>
      </a-drawer>
    </template>
  </locale-receiver>
</template>

<script>
import LocaleReceiver from 'ant-design-vue/es/locale-provider/LocaleReceiver';
import {CheckOutlined, SoundOutlined} from '@ant-design/icons-vue';
import EleColorPicker from '../../ele-color-picker';
// 默认主题色
const DEFAULT_THEMES = [
  {
    name: 'default',
    value: null,
    color: '#1890ff'
  },
  {
    name: 'dust',
    value: '#5f80c7'
  },
  {
    name: 'sunset',
    value: '#faad14'
  },
  {
    name: 'volcano',
    value: '#f5686f'
  },
  {
    name: 'purple',
    value: '#9266f9'
  },
  {
    name: 'green',
    value: '#33cc99'
  },
  {
    name: 'geekblue',
    value: '#32a2d4'
  }
];

export default {
  name: 'EleProSetting',
  components: {
    LocaleReceiver,
    CheckOutlined,
    SoundOutlined,
    EleColorPicker
  },
  emits: [
    'change-style',
    'change-color',
    'change-dark-mode',
    'change-weak-mode',
    'update:visible'
  ],
  props: {
    // 是否显示, 支持 v-model 绑定
    visible: Boolean,
    // 顶栏风格
    headStyle: String,
    // 侧边栏风格
    sideStyle: String,
    // 布局风格
    layoutStyle: String,
    // 侧栏边菜单风格
    sideMenuStyle: String,
    // 内容区域宽度是否铺满
    bodyFull: Boolean,
    // 是否固定顶栏
    fixedHeader: Boolean,
    // 是否固定侧栏
    fixedSidebar: Boolean,
    // 是否固定主体
    fixedBody: Boolean,
    // logo是否自适应宽度
    logoAutoSize: Boolean,
    // 侧栏是否多彩图标
    colorfulIcon: Boolean,
    // 侧边栏是否只保持一个子菜单展开
    sideUniqueOpen: Boolean,
    // 是否开启页脚
    showFooter: Boolean,
    // 是否色弱模式
    weakMode: Boolean,
    // 是否开启多标签
    showTabs: Boolean,
    // 标签页风格
    tabStyle: String,
    // 是否暗黑模式
    darkMode: Boolean,
    // 当前主题色
    color: String,
    // 主题列表
    themes: Array,
    // 提示文字
    tips: String,
    // 是否显示颜色选择器
    colorPicker: Boolean,
    // 颜色选择器预设颜色
    predefineColors: Array
  },
  data() {
    let chooseColor = this.color;
    if (this.color && typeof this.themes !== 'undefined' && this.themes !== null) {
      (this.themes.length ? this.themes : DEFAULT_THEMES).forEach((t) => {
        if (this.color === t.value) {
          chooseColor = null;
        }
      });
    }
    return {
      // 默认的主题色
      defaultThemes: DEFAULT_THEMES,
      // 颜色选择器选中颜色
      chooseColor: chooseColor
    };
  },
  methods: {
    /* 修改visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
    /* 切换主题色 */
    changeColor(value) {
      if (value !== this.color) {
        this.$emit('change-color', value);
      }
    },
    /* 修改主题风格 */
    changeStyle(key, value) {
      this.$emit('change-style', {key: key, value: value});
    },
    setHeadStyle(value) {
      this.changeStyle('headStyle', value);
    },
    setSideStyle(value) {
      this.changeStyle('sideStyle', value);
    },
    setLayoutStyle(value) {
      this.changeStyle('layoutStyle', value);
    },
    setSideMenuStyle(value) {
      this.changeStyle('sideMenuStyle', value ? 'mix' : 'default');
    },
    setBodyFull(value) {
      this.changeStyle('bodyFull', value);
    },
    setFixedHeader(value) {
      this.changeStyle('fixedHeader', value);
    },
    setFixedSidebar(value) {
      this.changeStyle('fixedSidebar', value);
    },
    setFixedBody(value) {
      this.changeStyle('fixedBody', value);
      if (value) {
        document.body.style.width = null;
      }
    },
    setLogoAutoSize(value) {
      this.changeStyle('logoAutoSize', value);
    },
    setColorfulIcon(value) {
      this.changeStyle('colorfulIcon', value);
    },
    setSideUniqueOpen(value) {
      this.changeStyle('sideUniqueOpen', value);
    },
    setWeakMode(value) {
      this.$emit('change-weak-mode', value);
    },
    setDarkMode(value) {
      this.$emit('change-dark-mode', value);
    },
    setShowFooter(value) {
      this.changeStyle('showFooter', value);
      if (!value) {
        document.body.style.width = null;
      }
    },
    setShowTabs(value) {
      this.changeStyle('showTabs', value);
    },
    setTabStyle(value) {
      this.changeStyle('tabStyle', value);
    }
  }
}
</script>

<style>
.ele-setting-wrapper {
  padding: 20px 18px;
}

.ele-setting-wrapper .ele-setting-title {
  font-size: 13px;
  margin-bottom: 15px;
}

/* 主题风格 */
.ele-setting-wrapper .ele-setting-theme > div {
  width: 52px;
  height: 36px;
  line-height: 1;
  border-radius: 3px;
  margin: 0 20px 30px 0;
  padding: 16px 0 0 26px;
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
  display: inline-block;
  vertical-align: top;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: background-color .2s;
}

.ele-setting-wrapper .ele-setting-theme > div:before,
.ele-setting-wrapper .ele-setting-theme > div:after,
.ele-setting-wrapper .ele-setting-theme > div > .ele-bg-primary {
  content: "";
  width: 100%;
  height: 10px;
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
  transition: background-color .2s;
}

.ele-setting-dark .ele-setting-theme > div {
  box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}

.ele-setting-dark .ele-setting-theme > div:before,
.ele-setting-dark .ele-setting-theme > div:after,
.ele-setting-dark .ele-setting-theme > div > .ele-bg-primary {
  background: #1f1f1f;
}

.ele-setting-wrapper .ele-setting-theme > div:after {
  width: 14px;
  height: 100%;
}

.ele-setting-wrapper .ele-setting-theme > div.ele-side-dark:after,
.ele-setting-wrapper .ele-setting-theme > div.ele-head-dark:before,
.ele-setting-wrapper .ele-setting-theme > div.ele-layout-mix:before,
.ele-setting-wrapper .ele-setting-theme > div.ele-layout-mix:after {
  background: #001529;
}

.ele-setting-dark .ele-setting-theme > div.ele-side-dark:after,
.ele-setting-dark .ele-setting-theme > div.ele-head-dark:before,
.ele-setting-dark .ele-setting-theme > div.ele-layout-mix:before,
.ele-setting-dark .ele-setting-theme > div.ele-layout-mix:after {
  background: #262626;
}

.ele-setting-wrapper .ele-setting-theme > div.ele-head-light:before,
.ele-setting-wrapper .ele-setting-theme > div.ele-head-dark:before,
.ele-setting-wrapper .ele-setting-theme > div > .ele-bg-primary {
  z-index: 1;
}

/* 主题色选择 */
.ele-setting-wrapper .ele-setting-colors {
  color: #fff;
  margin-bottom: 20px;
}

.ele-setting-wrapper .ele-setting-color-item {
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 2px;
  margin: 8px 8px 0 0;
  display: inline-block;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
  vertical-align: top;
  position: relative;
  text-align: center;
  cursor: pointer;
}

/* 主题配置项 */
.ele-setting-wrapper .ele-setting-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.ele-setting-wrapper .ele-setting-item .setting-item-title {
  flex: 1;
  line-height: 28px;
}

.ele-setting-wrapper .ele-setting-item .setting-item-control {
  line-height: 1;
}

.ele-setting-wrapper .ant-divider {
  margin-bottom: 20px;
}

/* 颜色选择器 */
.ele-setting-color-picker {
  padding: 0;
  width: 20px;
  height: 20px;
  margin-top: 8px;
  border: none !important;
  background: none !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

.ele-setting-color-picker > .ele-color-picker-trigger-inner {
  background: none;
}

.ele-setting-color-picker > .ele-color-picker-trigger-inner.is-empty {
  background: linear-gradient(45deg, #00dbde 5%, #fc00ff 105%);
}

.ele-setting-color-picker > .ele-color-picker-trigger-inner.is-empty + .ele-color-picker-trigger-arrow {
  display: none;
}
</style>
