<template>
  <svg version="1.1" :width="16" :height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
       class="n-radio-icon" :class="classes" @mouseenter="setHover(true)" @mouseleave="setHover(false)">
    <circle class="border transition" cx="8" cy="8" r="8"/>
    <circle class="bg transition" cx="8" cy="8" r="7"/>
    <circle class="tick transition" v-if="value" cx="8" cy="8" r="4"/>
  </svg>
</template>

<script>
import {prop} from '@uif/next/lib/utils/tools'
export default {
  name: 'n-radio-icon',
  props: {
    // 勾选状态，非响应值
    value: prop.boolean(),
    // 禁用
    disabled: prop.boolean()
  },
  data () {
    return {
      hover: false
    }
  },
  computed: {
    classes ({value, disabled, hover}) {
      return {
        active: value,
        disabled,
        hover: !disabled && hover
      }
    }
  },
  methods: {
    setHover (value) {
      this.hover = value
    }
  }
}
</script>
