<template>
  <div class="pull-right theme-setting m-r-lg">
    <el-dropdown trigger="click">
      <span>
          <Icon type="icon-huanfu"></Icon>
      </span>
      <el-dropdown-menu slot="dropdown" class="theme-container">
        <el-dropdown-item style="padding: 0">
          <el-card >
            <div slot="header" class="clearfix">
              <span>主题设置</span>
            </div>
            <el-row :gutter="20">
              <el-col :span="12" v-for="item in themeData" :key="item.theme">
                <div class="theme-cell" @click="selectTheme(item)">
                  <span v-show="item.selected">
                   <Icon type="icon-ok"></Icon>
                  </span>
                  <b class="t-header" :style="{background: item.logoColor}"></b>
                  <b class="t-header"  :style="{background: item.headerColor}"></b>
                  <b  :style="{background: item.sidebarColor}"></b>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
import themeData from './themeData.js';
export default {
    data () {
        return {
            themeData
        };
    },
    computed: {
        theme () {
            return this.$store.state.app.theme;
        }
    },
    created () {
        let item = JSON.parse(localStorage.getItem('theme')) || this.themeData[0];
        this.selectTheme(item);
    },
    methods: {
        selectTheme (item) {
            if (item.selected) return;
            this.themeData.forEach((row) => {
                this.$set(row, 'selected', false);
                if (row.name === item.name) row.selected = true;
            });
            this.$store.commit('SETTING_THEME', {
                name: item.name,
                sidebarColor: item.sidebarColor
            });
            localStorage.setItem('theme', JSON.stringify(this.theme));
      // 对模态框 append-to-body的自定义颜色做处理
            document.getElementsByTagName('body')[0].className = this.theme.name;
        }
    }
};
</script>
