<template>
  <Tooltip content="换肤">
    <Icon size="32" color="#e8e8e8" type="md-color-palette" @click="show = !show"/>
    <Drawer title="换肤" :closable="false" v-model="show" width="500">
      <RadioGroup v-model="value">
        <Radio label="">
          <img src="./assets/colorDefault.jpg"/>
        </Radio>
        <Radio label="blue">
          <img src="./assets/colorBlue.jpg"/>
        </Radio>
        <Radio label="green">
          <img src="./assets/colorGreen.jpg"/>
        </Radio>
        <Radio label="red" >
          <img src="./assets/colorRed.jpg"/>
        </Radio>
      </RadioGroup>
    </Drawer>
  </Tooltip>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'SkinTool',
  data () {
    return {
      show: false,
      value: this.theme,
    }
  },
  computed: {
    ...mapState('core', {
      theme: 'theme',
    }),
  },
  methods: {
    ...mapMutations('core', ['setTheme'])
  },
  watch: {
    value (val) {
      this.setTheme(val)
    },
    theme: {
      immediate: true,
      handler (theme) {
        this.value = theme
      },
    },
  },
}
</script>

<style scoped>
  img {
    vertical-align: middle;
    margin: 4px 0;
  }
</style>
