/**
* @Description:
* @author cxg
* @date 2022/06/06
*/
<template>
  <div class="theme-com">
    <div v-for="(item,index) in themeList" :key="index" :class="{'active': activeTheme === item.value}" class="theme-box-item" @click="setThemeEvent(item)">
      <div class="theme-img-box">
        <img :src="'/images/theme/' + item.value + '.png'" alt="">
      </div>
      <div class="theme-title-box">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      activeTheme: '',
      themeList: [
        {
          name: '星空蓝',
          value: 'blue'
        },
        {
          name: '丁香紫',
          value: 'Purple'
        },
        {
          name: '玫瑰金',
          value: 'roseGold'
        },
        {
          name: '草原绿',
          value: 'green'
        },
        {
          name: '土豪金',
          value: 'localTyrantGold'
        },
        {
          name: '喜庆红',
          value: 'festiveRed'
        },
        {
          name: '水墨黑',
          value: 'inkBlack'
        },
        {
          name: '迷雾森林',
          value: 'mistyForest'
        },
        {
          name: '梦幻紫',
          value: 'dreamPurple'
        }
      ]
    }
  },

  computed: {},
  mounted() {},
  methods: {
    setThemeEvent(item) {
      this.activeTheme = item.value
      document.getElementsByTagName('body')[0].className = `dee-theme-${this.activeTheme}`
      this.$store.dispatch('theme/setTheme', this.activeTheme)
      this.$emit('setThemeEvent', item.value)
    }
  }
}

</script>
<style lang='scss'>
.theme-com{
    padding: 6px;
    display: flex;
    flex-wrap: wrap;
    .theme-box-item{
        padding: 11px;
        width: 100px;
        .theme-img-box{
            cursor: pointer;
            width: 100%;
            padding: 8px;
        }
        .theme-title-box{
            text-align: center
        }
        &:hover{
           background: #F4F4F4
        }
        &.active{
            background: #F4F4F4;
            border:solid 1px #BCBCBC
        }
    }

}
</style>