<template>
  <span :class="classes" @click="onConfirm" :name="name">
    <n-radio-icon :value="nValue" :disabled="disabled"></n-radio-icon>
    <span class="n-radio-label" v-if="label">{{label}}</span>
  </span>
</template>

<script>
import NRadioIcon from '@uif/next/lib/components/radio-icon'
import {prop} from '@uif/next/lib/utils/tools'
import vModel from '_common/vModel'

export default {
  name: 'n-radio',
  mixins: [vModel],
  components: {
    NRadioIcon
  },
  props: {
    // 初始值
    value: prop.boolean(),
    // 表单name
    name: prop.string(),
    // 文本描述
    label: prop.string(),
    // 禁用
    disabled: prop.boolean()
  },
  computed: {
    classes ({disabled, nValue}) {
      return {
        'n-radio': true,
        'n-radio-disabled': disabled,
        'n-radio-active': nValue
      }
    }
  },
  methods: {
    onConfirm (event) {
      if (!this.disabled && !this.nValue) {
        this.nValue = !this.nValue
        this.$emit('input', this.nValue)
        this.$emit('u-change', this.nValue, event)
        this.$emit('u-click', this.nValue, event)
      }
    }
  }
}
</script>
