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

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

export default {
  name: 'n-checkbox',
  mixins: [vModel],
  components: {
    CheckboxIcon
  },
  props: {
    // 初始值
    value: prop.boolean(),
    // 表单name
    name: prop.string(),
    // 文本描述
    label: prop.string(),
    // 禁用
    disabled: prop.boolean(),
    // indeterminate状态，只负责样式控制
    indeterminate: prop.boolean()
  },
  computed: {
    classes ({disabled, nValue}) {
      return {
        'n-checkbox': true,
        'n-checkbox-disabled': disabled,
        'n-checkbox-active': nValue
      }
    }
  },
  methods: {
    onConfirm (event) {
      if (!this.disabled) {
        this.nValue = !this.nValue
        this.$emit('input', this.nValue)
        this.$emit('u-change', this.nValue, event)
        this.$emit('u-click', this.nValue, event)
      }
    }
  }
}
</script>
