<template>
  <view class="v-radio center"
    :style="{
        'border-color':vValue ? activeBorderColor : borderColor,
        'background-color': vValue ? activeColor : color
      }"
        :class="['v-radio-'+size]"
        @click="toggle"
  >
    <text v-show="vValue" class="iconfont iconfont-check v-radio-check"></text>
  </view>
</template>

<script>
import props from './props';
export default {
  name: "v-radio",
  data(){
    return {
      vValue:false
    }
  },

  watch:{
    value(){
      return this.setValue(this.value);
    }
  },

  methods:{
    setValue(value){
      if (this.vValue !== value) {
        this.vValue = value;
        if (this.value !== value) {
          return this.$emit('input',value);
        }
      }
    },
    toggle(){
      if (this.disabled) return ;
      return this.setValue(!this.vValue);
    }
  },

  created(){
    this.setValue(this.value);
  },

  props
}
</script>

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

</style>