<template>
  <div class="n-checkbox-group" :name="name">
    <template v-for="option in options">
      <n-checkbox :key="option.value" :name="option.value" :value="nValue.includes(option.value)" :label="option.label"
                  :disabled="disabled || option.disabled" @u-change="onChange(option.value)"></n-checkbox>
    </template>
  </div>
</template>

<script>
import NCheckbox from '@uif/next/lib/components/checkbox'
import {prop, spliceOrPush} from '@uif/next/lib/utils/tools'
import vModel from '_common/vModel'

export default {
  mixins: [vModel],
  name: 'n-checkbox-group',
  components: {
    NCheckbox
  },
  props: {
    // 选中checkbox的 value 集合
    value: prop.array(),
    // 表单name
    name: prop.string(),
    // 选项
    options: prop.array(),
    // 禁用
    disabled: prop.boolean()
  },
  methods: {
    onChange (value) {
      spliceOrPush(this.nValue, value, val => value === val)
      this.$emit('input', this.nValue)
      this.$emit('u-update', this.nValue)
      this.$emit('u-change', this.nValue)
    }
  }
}
</script>
