<template>
  <a-card>
    <a-col
      :xs="{span: 24}"
      :sm="{span: 20}"
      :xl="{span: 18}">
      <a-divider>主题</a-divider>
      <a-radio-group
        name="theme"
        :defaultValue="theme"
        @change="handleThemeChange">
        <a-radio value="light">Light</a-radio>
        <a-radio value="dark">Dark</a-radio>
      </a-radio-group>
    </a-col>
  </a-card>
</template>

<script>
  import { mapActions, mapGetters } from 'vuex'

  export default {
    name: 'Setting',
    data () {
      return {}
    },
    methods: {
      ...mapActions(['ToggleTheme']),
      handleThemeChange (e) {
        this.ToggleTheme(e.target.value)
      }
    },
    computed: {
      ...mapGetters(['theme'])
    }
  }
</script>

<style lang="less" scoped>

</style>
