<template>
  <div id="theme">
    <el-form ref="ruleForm" label-width="80px">
      <el-form-item label="选择主题" prop="grantor" size="small">
        <el-row>
          <el-col :span="12">
            <el-radio v-model="themeColor" label="" class="blue">默认</el-radio>
          </el-col>
          <el-col :span="12">
            <el-radio v-model="themeColor" label="red" class="red">红色</el-radio>
          </el-col>
          <el-col :span="12">
            <el-radio v-model="themeColor" label="orange" class="orange">橙色</el-radio>
          </el-col>
          <el-col :span="12">
            <el-radio v-model="themeColor" label="purple" class="purple">紫色</el-radio>
          </el-col>
        </el-row>
      </el-form-item>
      <div class="text-r">
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex'
const { mapMutations } = createNamespacedHelpers('app')
export default {
  name: 'Theme',
  data() {
    return {
      themeColor: ''
    }
  },
  mounted() {
    this.themeColor = this.$store.state.app.themeColor
  },
  methods: {
    ...mapMutations(['setThemeColor']),
    submit() {
      this.setThemeColor(this.themeColor === 'blue' ? '' : this.themeColor)
      this.$router.go(0)
    }
  }
}
</script>
<style lang="scss" scoped>
#theme {
  .blue {
    color: #0796f9;
  }
  .red {
    color: #ed1111;
  }
  .orange {
    color: #FF7F00;
  }
  .purple {
    color: #AF3BFF;
  }
}
</style>
