<template>
  <span v-if="themeBar">
    <div class="layout-set-btn" @click="handleOpenThemeBar">
      <i class="icon-nav-skin-select header-btn-icon" title="主题设置"></i>
    </div>
    <el-drawer
      :visible.sync="drawerVisible"
      direction="rtl"
      append-to-body
      size="470px"
    >
      <el-scrollbar style="height: 94vh; overflow: hidden">
        <div class="el-drawer__body">
          <div
            v-for="(item, index) in themeConfigList"
            :key="index"
            class="style-set"
            :class="item.className"
          >
            <h3
              class="style-set-title"
              :class="{ 'no-top-margin': item.key === 'style' }"
            >
              {{ item.title }}
            </h3>
            <ul class="styles">
              <li
                v-for="it in item.styleType"
                :key="it"
                :class="item.itemClassName"
                :style="{
                  background: item.key === 'themeColor' ? it : '',
                }"
                @click="handleClick(item.key, it)"
              >
                <i
                  v-if="it === defaultActiveMap[item.key]"
                  class="el-icon-check"
                  :class="{ 'is-theme-active': item.key === 'themeColor' }"
                ></i>
              </li>
            </ul>
            <div v-if="item.key === 'themeColor'" class="custom-theme-color">
              <span class="custom-text">自定义</span>
              <el-color-picker
                ref="color-picker"
                v-model="theme.themeColor"
                size="mini"
                @change="handleColorChange"
              ></el-color-picker>
            </div>
          </div>
          <el-button
            type="primary"
            class="clear-cache-btn"
            @click="handleSetDefaultTheme"
          >
            清除主题缓存
          </el-button>
          <!-- 其他设置 -->
          <!-- <div class="other-set">
            <h3 class="other-set-title">其他设置</h3>
            <ul class="other-set__ul">
              <li class="other-set-item">
                <span>关闭左侧</span>
                <el-switch
                  v-model="isCloseLeft"
                  active-color="#2F54EB"
                  inactive-color="#BFBFBF"
                ></el-switch>
              </li>
              <li class="other-set-item">
                <span>关闭右侧</span>
                <el-switch
                  v-model="isCloseRight"
                  active-color="#2F54EB"
                  inactive-color="#BFBFBF"
                ></el-switch>
              </li>
              <li class="other-set-item">
                <span>关闭全部</span>
                <el-switch
                  v-model="isCloseAll"
                  active-color="#2F54EB"
                  inactive-color="#BFBFBF"
                ></el-switch>
              </li>
            </ul>
          </div> -->
        </div>
      </el-scrollbar>
    </el-drawer>
  </span>
</template>

<script>
  import { mapActions, mapGetters } from 'vuex'
  import { layout as defaultLayout } from '@/config'
  export default {
    name: 'HtThemeBar',
    data() {
      return {
        isCloseLeft: false,
        isCloseRight: true,
        isCloseAll: false,
        drawerVisible: false,
        customColor: '',
        theme: {
          name: 'default',
          style: 'light',
          layout: 'vertical',
          header: 'fixed',
          themeColor: '#2F54EB',
          // tabsBar: '',
        },
        themeConfigList: [
          {
            title: '风格设置',
            key: 'style',
            itemClassName: 'style-item',
            styleType: ['light', 'mashup', 'dark'],
          },
          {
            title: '主题色',
            key: 'themeColor',
            className: 'theme-color-select',
            itemClassName: 'theme-color-item',
            styleType: [
              '#2F54EB',
              '#F5222D',
              '#FA541C',
              '#FAAD14',
              '#13C2C2',
              '#1890FF',
              '#722ED1',
            ],
          },
          {
            title: '导航模式',
            key: 'layout',
            className: 'nav-set',
            itemClassName: 'nav-item',
            styleType: ['vertical', 'horizontal'],
          },
        ],
        defaultActiveMap: {
          style: 'light',
          themeColor: 'default',
          layout: 'vertical',
        },
      }
    },
    computed: {
      ...mapGetters({
        layout: 'settings/layout',
        header: 'settings/header',
        tabsBar: 'settings/tabsBar',
        themeBar: 'settings/themeBar',
        style: 'settings/style',
        themeColor: 'settings/themeColor',
      }),
    },
    created() {
      this.$baseEventBus.$on('theme', () => {
        this.handleOpenThemeBar()
      })
      const theme = localStorage.getItem('eip-front-theme')
      if (null !== theme) {
        this.theme = JSON.parse(theme)
        // this.handleSetTheme()
      } else {
        this.theme.layout = this.layout
        this.theme.header = this.header
        this.theme.tabsBar = this.tabsBar
        this.theme.style = this.style
        this.defaultActiveMap.style = this.style
        this.defaultActiveMap.layout = this.layout
        this.defaultActiveMap.themeColor = this.themeColor
      }
      this.handleSetTheme()
    },
    mounted() {},
    methods: {
      ...mapActions({
        changeLayout: 'settings/changeLayout',
        changeStyle: 'settings/changeStyle',
        changeThemeColor: 'settings/changeThemeColor',
        changeHeader: 'settings/changeHeader',
        changeTabsBar: 'settings/changeTabsBar',
      }),
      handleClick(key, it) {
        this.defaultActiveMap[key] = it
        this.theme[key] = it
        this.handleSetTheme()
      },
      handleColorChange(val) {
        this.theme.themeColor = val
        this.handleSetTheme()
      },
      handleIsMobile() {
        return document.body.getBoundingClientRect().width - 1 < 992
      },
      handleOpenThemeBar() {
        this.drawerVisible = true
      },
      handleSetTheme() {
        let { name, layout, style, header, tabsBar, themeColor } = this.theme
        const themeConfig = {
          name,
          layout,
          header,
          tabsBar,
          style,
          themeColor,
        }
        localStorage.setItem('eip-front-theme', JSON.stringify(themeConfig))
        this.defaultActiveMap.style = style
        this.defaultActiveMap.layout = layout
        this.defaultActiveMap.themeColor = themeColor
        if (!this.handleIsMobile()) this.changeLayout(layout)
        this.changeHeader(header)
        this.changeTabsBar(tabsBar)
        this.changeStyle(style)
        this.changeThemeColor(themeColor)
        document.getElementsByTagName(
          'body'
        )[0].className = `eip-front-theme-default`
        // this.drawerVisible = false
        document.body.style = `--themeColor:${themeColor}; --leftBarTop:1px; --themeColorRgb:${this.hexToRgba(
          themeColor
        )}`
      },
      handleSaveTheme() {
        this.handleSetTheme()
      },
      handleSetDefaultTheme() {
        document
          .getElementsByTagName('body')[0]
          .classList.remove(`eip-front-theme-default`)
        localStorage.removeItem('eip-front-theme')
        // this.$refs['form'].resetFields()
        Object.assign(this.$data, this.$options.data())
        this.changeHeader(defaultLayout)
        this.theme.themeColor = '#409EFF'
        this.theme.layout = this.layout
        this.theme.style = this.style
        this.theme.header = this.header
        this.theme.tabsBar = this.tabsBar
        this.drawerVisible = false
        location.reload()
      },
      hexToRgba(hex) {
        const red = parseInt(`0x${hex.slice(1, 3)}`)
        const green = parseInt(`0x${hex.slice(3, 5)}`)
        const blue = parseInt(`0x${hex.slice(5, 7)}`)
        return `${red},${green},${blue}`
      },
    },
  }
</script>

<style lang="scss" scoped>
  @mixin right-bar {
    position: fixed;
    right: 0;
    z-index: $base-z-index;
    width: 60px;
    min-height: 60px;
    text-align: center;
    cursor: pointer;
    background: $base-color-blue;
    border-radius: $base-border-radius;

    > div {
      padding-top: 10px;
      border-bottom: 0 !important;

      &:hover {
        opacity: 0.9;
      }

      & + div {
        border-top: 1px solid $base-color-white;
      }

      p {
        padding: 0;
        margin: 0;
        font-size: $base-font-size-small;
        line-height: 30px;
        color: $base-color-white;
      }
    }
  }
  @mixin set-theme-item-after {
    &::after {
      position: absolute;
      content: '';
      width: 25px;
      height: 72px;
      background: $base-color-light-black;
      border-radius: 6px 0px 0px 0px;
    }
  }
  @mixin style-item {
    margin-left: 20px;
    width: 83px;
    height: 72px;
    border-radius: 6px 6px 0px 6px;
    background-color: $base-color-white;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    position: relative;
  }
  @mixin style-item-before {
    &::before {
      position: absolute;
      content: '';
      width: 58px;
      height: 54px;
      background: #f0f2f5;
      right: 0;
      bottom: 0;
    }
  }
  .el-drawer__body {
    padding: 0 20px 20px 20px;
  }

  .el-drawer__wrapper {
    outline: none !important;

    * {
      outline: none !important;
    }
    ::v-deep {
      .el-drawer__header {
        margin-bottom: 0;
      }
    }
    .style-set {
      position: relative;
      border-bottom: 1px solid $base-light-border-color;
      padding-bottom: 32px;
      .style-set-title {
        margin: 32px 0 23px 0;
      }
      .no-top-margin {
        margin-top: 0;
      }
      .el-icon-check {
        font-size: 20px;
        position: absolute;
        right: 21px;
        bottom: 21px;
        color: $base-color-default;
        font-weight: bold;
      }
      .styles {
        display: flex;
        list-style: none;
        .style-item {
          cursor: pointer;
          @include style-item;
          @include style-item-before;
          &:first-child {
            margin-left: 0;
          }
          &:last-child {
            background-color: $base-color-light-black;
            &::before {
              background: $base-color-black;
            }
          }
          &:nth-child(2) {
            @include set-theme-item-after;
          }
        }
        .nav-item {
          cursor: pointer;
          @include style-item;
          &:first-child {
            @include style-item-before;
            @include set-theme-item-after;
          }
          &:last-child {
            background: #f0f2f5;
            &::after {
              position: absolute;
              content: '';
              width: 83px;
              height: 18px;
              border-radius: 6px 6px 0px 0px;
              background: $base-color-light-black;
            }
          }
        }
      }
    }
    .theme-color-select {
      .theme-color-item {
        position: relative;
        cursor: pointer;
        width: 23px;
        height: 23px;
        border-radius: $base-border-radius;
        margin-right: 12px;
        .is-theme-active {
          color: $base-color-white;
          right: 2px;
          bottom: 2px;
        }
      }
      .custom-theme-color {
        padding-top: 25px;
        .custom-text {
          vertical-align: 0.6em;
          margin-right: 9px;
        }
      }
    }
    .other-set {
      .other-set-title {
        margin: 32px 0 6px 0;
      }
      .other-set__ul {
        list-style: none;
        margin-right: 10px;
        .other-set-item {
          display: flex;
          justify-content: space-between;
          margin-top: 26px;
        }
      }
    }
  }

  .app-color-picker {
    .el-color-dropdown__link-btn {
      display: none;
    }
  }
  .clear-cache-btn {
    margin-top: 40px;
  }
</style>
