<template>
  <div class="setting-container">
    <div class="nav-setting">
      <el-divider>{{ $t('ec.settings.navSetting') }}</el-divider>
      <div class="nav-style visual-list">
        <el-row :gutter="40">
          <el-col :span="8">
            <VisualItem
              title="混合导航"
              :img="require('ecip-web/assets/img/layout-mixed.svg')"
              :selected="defaultLayout==='top'"
              @click.native="changeDefaultLayout('top')"
            />
          </el-col>
          <el-col :span="8">
            <VisualItem
              title="左侧导航"
              :img="require('ecip-web/assets/img/layout-left.svg')"
              :selected="defaultLayout==='left'"
              @click.native="changeDefaultLayout('left')"
            />
          </el-col>
          <!--          <el-col :span="8">
            <VisualItem title="顶部导航" :img="require('@/assets/img/layout-top.svg')" :selected="defaultLayout==='topOnly'" @click.native="changeDefaultLayout('top')" />
          </el-col>-->
        </el-row>
      </div>
    </div>

    <div class="theme-setting">
      <el-divider>{{ $t('ec.settings.themeStyle') }}</el-divider>
      <div class="theme-mode visual-list">
        <el-row :gutter="40">
          <el-col :span="8">
            <VisualItem
              title="主色顶部"
              :img="require('ecip-web/assets/img/navbar-primary.svg')"
              :selected="navbarLayoutType==='primary'"
              @click.native="changeNavbarLayout('primary')"
            />
          </el-col>
          <el-col :span="8">
            <VisualItem
              title="亮色顶部"
              :img="require('ecip-web/assets/img/navbar-bright.svg')"
              :selected="navbarLayoutType==='bright'"
              @click.native="changeNavbarLayout('bright')"
            />
          </el-col>
          <el-col :span="8">
            <VisualItem
              title="暗色顶部"
              :img="require('ecip-web/assets/img/navbar-dark.svg')"
              :selected="navbarLayoutType==='dark'"
              @click.native="changeNavbarLayout('dark')"
            />
          </el-col>
        </el-row>

        <el-row :gutter="40">
          <el-col :span="8">
            <VisualItem
              title="主色侧边"
              :img="require('ecip-web/assets/img/sibar-primary.svg')"
              :selected="sidebarLayoutSkin==='primary'"
              @click.native="changeSidebarLayoutSkin('primary')"
            />
          </el-col>
          <el-col :span="8">
            <VisualItem
              title="亮色侧边"
              :img="require('ecip-web/assets/img/sibar-bright.svg')"
              :selected="sidebarLayoutSkin==='bright'"
              @click.native="changeSidebarLayoutSkin('bright')"
            />
          </el-col>
          <el-col :span="8">
            <VisualItem
              title="暗色侧边"
              :img="require('ecip-web/assets/img/sibar-dark.svg')"
              :selected="sidebarLayoutSkin==='dark'"
              @click.native="changeSidebarLayoutSkin('dark')"
            />
          </el-col>
        </el-row>
      </div>

      <div class="theme-color">
        <div class="tag-group">
          <el-tooltip
            v-for="(item, index) in colorList"
            :key="index"
            effect="dark"
            :content="item.key"
            placement="top-start"
          >
            <el-tag
              :color="item.color"
              class="theme-color-tag"
              @click="defaultTheme = item.color"
            >
              <i
                v-if="item.color === defaultTheme"
                class="el-icon-check"
              />
            </el-tag>
          </el-tooltip>
        </div>

        <div class="jf-setting-list">
          <div class="jf-setting-item">
            <label class="setting-item-title">{{ $t('ec.settings.moreColor') }}</label>
            <div class="setting-item-control">
              <theme-picker @change="themeChange" />
            </div>
          </div>
          <!-- <div class="jf-setting-item">
            <label class="setting-item-title">{{ $t('ec.settings.styleHeader') }}</label>
            <div class="setting-item-control">
              <el-select v-model="styleHeader">
                <el-option
                  v-for="item in styleHeaderList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div> -->

          <div
            v-if="gradientShowBol"
            class="jf-setting-item"
          >
            <label class="setting-item-title">{{ $t('ec.settings.gradientBol') }}</label>
            <div class="setting-item-control">
              <el-switch
                v-model="gradientBol"
                @change="gradientBolchange"
                active-value="2"
                inactive-value="1"
              />
            </div>
          </div>

          <template v-if="gradientShowBol && gradientBol === '2'">
            <el-divider>{{ $t('ec.settings.gradientSetting') }}</el-divider>
            <div class="jf-setting-item">
              <label class="setting-item-title">{{ $t('ec.settings.startColor') }}</label>
              <div class="setting-item-control">
                <!-- <theme-picker @change="themeChange" /> -->

                <el-color-picker
                  v-model="startColor"
                  @change="colorchange('startColor',$event)"
                ></el-color-picker>
              </div>
            </div>
            <div class="jf-setting-item">
              <label class="setting-item-title">{{ $t('ec.settings.endColor') }}</label>
              <div class="setting-item-control">
                <el-color-picker
                  v-model="endColor"
                  @change="colorchange('endColor',$event)"
                ></el-color-picker>
                <!-- <theme-picker @change="themeChange" /> -->
              </div>
            </div>

            <!-- <div class="jf-setting-item">
              <label class="setting-item-title">{{ $t('ec.settings.headerColordirection') }}</label>
              <div class="setting-item-control">
                <el-select v-model="headerColordirection">
                  <el-option
                    v-for="item in headerColordirectionList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div> -->
          </template>

        </div>
      </div>
    </div>

    <div class="other-setting">
      <el-divider>{{ $t('ec.settings.otherSetting') }}</el-divider>
      <div class="jf-setting-list">
        <div class="jf-setting-item">
          <label class="setting-item-title">{{ $t('ec.settings.darkTheme') }}</label>
          <div class="setting-item-control">
            <el-switch v-model="darkTheme" />
          </div>
        </div>
        <div class="jf-setting-item">
          <label class="setting-item-title">{{ $t('ec.settings.sidebarLogo') }}</label>
          <div class="setting-item-control">
            <el-switch v-model="sidebarLogo" />
          </div>
        </div>
        <div class="jf-setting-item">
          <label class="setting-item-title">{{ $t('ec.settings.fixedHeader') }}</label>
          <div class="setting-item-control">
            <el-switch v-model="fixedHeader" />
          </div>
        </div>
        <div class="jf-setting-item">
          <label class="setting-item-title">{{ $t('ec.settings.contentFull') }}</label>
          <div class="setting-item-control">
            <el-switch v-model="contentFull" />
          </div>
        </div>
        <div class="jf-setting-item">
          <label class="setting-item-title">{{ $t('ec.settings.tagsView') }}</label>
          <div class="setting-item-control">
            <el-switch v-model="tagsView" />
          </div>
        </div>
        <div class="jf-setting-item">
          <label class="setting-item-title">{{ $t('ec.settings.tagStyle') }}</label>
          <div class="setting-item-control">
            <el-select v-model="tagStyle">
              <el-option
                v-for="item in tagStyleList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ThemePicker from 'ecip-web/components/ThemePicker'
import { colorList } from '@/settings'
import VisualItem from './visualItem'
import {
  DEFAULT_LAYOUT,
  DEFAULT_THEME,
  FIXED_HEADER,
  NAVBAR_LAYOUT_TYPE,
  SIDEBAR_LAYOUT_SKIN,
  DARK_THEME,
  SIDEBAR_LOGO,
  SUPPORT_PINYIN_SEARCH,
  TAGS_VIEW
} from '@/store/mutation-types'

export default {
  components: { ThemePicker, VisualItem },
  data() {
    return {
      isRightVisible: false,
      direction: 'rtl',
      colorList: colorList,
      tagStyle: 1,
      styleHeader: 1,
      headerColordirection: 0,
      tagStyleList: [
        { label: '默认', value: 1 },
        { label: '圆点', value: 2 },
        { label: '卡片', value: 3 }
      ],
      styleHeaderList: [
        { label: '纯色', value: 1 },
        { label: '渐变', value: 2 }
      ],
      headerColordirectionList: [
        { label: '0度', value: 0 },
        { label: '45度', value: 45 },
        { label: '90度', value: 90 },
        { label: '135度', value: 135 }
      ],
      contentFull: true
    }
  },
  computed: {
    defaultLayout: {
      get() {
        return this.$store.state.settings.defaultLayout
      },
      set(val) {
        this.changeVal(DEFAULT_LAYOUT, val)
        // this.$store.commit('setting/SET_DEFAULT_LAYOUT', val)
      }
    },
    navbarLayoutType: {
      get() {
        return this.$store.state.settings.navbarLayoutType
      },
      set(val) {
        this.changeVal(NAVBAR_LAYOUT_TYPE, val)
      }
    },
    sidebarLayoutSkin: {
      get() {
        return this.$store.state.settings.sidebarLayoutSkin
      },
      set(val) {
        this.changeVal(SIDEBAR_LAYOUT_SKIN, val)
      }
    },
    gradientShowBol: {
      get() {
        let b = ''
        const gradientShowBol = this.$store.state.settings.gradientShowBol

        if (gradientShowBol === 'undefined') {
          return false
        }

        if (
          typeof gradientShowBol === 'string' &&
          gradientShowBol.includes('value')
        ) {
          const obj = JSON.parse(gradientShowBol)

          b = obj.value
        } else {
          b = gradientShowBol
        }

        return b
      },
      set(val) {
        this.changeVal('startColor', val)
      }
    },
    startColor: {
      get() {
        let sc = ''
        const startColor = this.$store.state.settings.startColor || ''

        if (startColor.includes('value')) {
          const obj = JSON.parse(startColor)

          sc = obj.value
        } else {
          sc = startColor
        }

        return sc
      },
      set(val) {
        this.changeVal('startColor', val)
      }
    },
    endColor: {
      get() {
        let ec = ''
        const endColor = this.$store.state.settings.endColor || ''

        if (endColor.includes('value')) {
          const obj = JSON.parse(endColor)

          ec = obj.value
        } else {
          ec = endColor
        }

        return ec
      },
      set(val) {
        this.changeVal('endColor', val)
      }
    },
    directionColor: {
      get() {
        return this.$store.state.settings.directionColor || 90
      },
      set(val) {
        this.changeVal('directionColor', val)
      }
    },
    gradientBol: {
      get() {
        const gradientBol = this.$store.state.settings.gradientBol || ''
        let r = ''
        if (gradientBol.includes('value')) {
          const obj = JSON.parse(gradientBol)

          r = obj.value
        } else {
          r = gradientBol
        }

        return r
        // return this.$store.state.settings.gradientBol
      },
      set(val) {
        this.changeVal('gradientBol', val)
      }
    },
    defaultTheme: {
      get() {
        return this.$store.state.settings.defaultTheme
      },
      set(val) {
        this.$events.$emit('updateTheme', val)
        this.changeVal(DEFAULT_THEME, val)
      }
    },
    fixedHeader: {
      get() {
        return this.$store.state.settings.fixedHeader
      },
      set(val) {
        this.changeVal(FIXED_HEADER, val)
      }
    },
    tagsView: {
      get() {
        return this.$store.state.settings.tagsView
      },
      set(val) {
        this.changeVal(TAGS_VIEW, val)
      }
    },
    darkTheme: {
      get() {
        return this.$store.state.settings.darkTheme
      },
      set(val) {
        this.changeVal(DARK_THEME, val)
      }
    },
    sidebarLogo: {
      get() {
        return this.$store.state.settings.sidebarLogo
      },
      set(val) {
        this.changeVal(SIDEBAR_LOGO, val)
      }
    },
    supportPinyinSearch: {
      get() {
        return this.$store.state.settings.supportPinyinSearch
      },
      set(val) {
        this.changeVal(SUPPORT_PINYIN_SEARCH, val)
      }
    },
    lang() {
      return this.$store.getters.language
    }
  },
  methods: {
    changeDefaultLayout(type) {
      this.defaultLayout = type
      // this.changeVal(NAVBAR_LAYOUT_TYPE, type)
    },
    changeNavbarLayout(type) {
      this.navbarLayoutType = type
      // this.changeVal(NAVBAR_LAYOUT_TYPE, type)
    },
    changeSidebarLayoutSkin(type) {
      this.sidebarLayoutSkin = type
      // this.changeVal(SIDEBAR_LAYOUT_SKIN, type)
    },
    colorchange(key, val) {
      this.$store.dispatch('settings/changeSetting', {
        key: key,
        value: val
      })
    },
    gradientBolchange(val) {
      this.$store.dispatch('settings/changeSetting', {
        key: 'gradientBol',
        value: val
      })
    },
    themeChange(val) {
      this.$store.dispatch('settings/changeSetting', {
        key: 'theme',
        value: val
      })
    },
    changeVal(key, val) {
      this.$store.dispatch('settings/changeSetting', {
        key: key,
        value: val
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.setting-container {
  padding: 0 24px 24px 24px;

  .visual-list {
    ::v-deep .visual-item {
      margin-bottom: 5px;
    }
  }

  .jf-setting-list {
    .jf-setting-item {
      display: flex;
      margin-bottom: 20px;
      line-height: 28px;

      .setting-item-title {
        flex: 1 1 0%;
        font-size: 14px;
        font-weight: normal;
      }

      .setting-item-control {
        max-width: 80px;
      }
    }
  }

  .theme-color-tag {
    width: 21px;
    height: 21px;
    padding: 0;
    margin: 0 3px 5px;
    line-height: 21px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
  }
}
</style>
