<template>
  <div class="radio center"
    :style="{backgroundColor:vValue ? color : defaultColor}"
       @click="toggleValue"
       :class="{
         'cursor-pointer': !disabled
       }"
  >
    <svg v-show="vValue" class="radio-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7665" width="200" height="200"><path d="M416.832 798.08C400.64 798.08 384.512 791.872 372.16 779.52L119.424 525.76C94.784 500.992 94.784 460.8 119.424 436.032 144.128 411.264 184.128 411.264 208.768 436.032L416.832 644.928 814.4 245.76C839.04 220.928 879.04 220.928 903.744 245.76 928.384 270.528 928.384 310.656 903.744 335.424L461.504 779.52C449.152 791.872 432.96 798.08 416.832 798.08Z" p-id="7666" fill="#ffffff"></path></svg>
  </div>
</template>

<script>
import props from '../props';
export default {
  name: "radio",
  props,

  data(){
    return {
      vValue: false
    }
  },

  watch:{

    value:{
      handler(){
        return this.changeValue(this.value,true);
      },
      immediate:true
    }

  },

  methods:{

    toggleValue(){
      return this.changeValue(!this.vValue);
    },

    changeValue(value,must=false){

      if(this.vValue !== value) {

        if (!this.disabled || must) {
          this.vValue = value;
        }

        if (this.value !== value) {
          this.$emit('change',value);
          return this.$emit('update:value',value);
        }
      }
    }

  }

}
</script>

<style scoped lang="scss" src="../style.scss"></style>