<template>
  <span :name="name" :class="baseClasses" @click="onConfirm">
    <span class="n-switch-point"></span>
  </span>
</template>

<script>
import vModel from '_common/vModel'
import {prop} from '@uif/next/lib/utils/tools'
export default {
  inheritAttrs: false,
  name: 'n-switch',
  mixins: [vModel],
  props: {
    // 初始值（可以使用`v-model`双向绑定数据）
    value: prop.boolean(),
    // 表单name
    name: prop.string(),
    // 禁用
    disabled: prop.boolean(),
    // 边框样式，可选值为`none`, `line`, `rect`
    border: prop.inArray(['none', 'line', 'rect'], 'rect'),
    // 大小
    size: prop.inArray(['small', 'middle', 'large'], 'middle')
  },
  data () {
    return {
      nValue: this.value
    }
  },
  computed: {
    baseClasses ({disabled, nValue, picker}) {
      return {
        'n-switch': true,
        'n-switch-btn': !picker,
        'n-switch-picker': picker,
        active: nValue,
        disabled
      }
    }
  },
  methods: {
    onConfirm (event) {
      if (!this.disabled) {
        this.nValue = !this.nValue
        this.$emit('input', this.nValue)
        this.$emit('u-update', this.nValue)
        this.$emit('u-change', this.nValue)
      }
    }
  }
}
</script>
