<template>
  <span :name="name" class="n-switch-filter" :class="getFilterBorderClass({disabled, pointer: true})" @click="onConfirm">
    <span v-if="label" :class="getFilterValueClass({disabled, label: !nValue})">{{label}}</span>
    <span class="n-switch-filter-point" :class="{active: nValue}"></span>
  </span>
</template>

<script>
import vModel from '_common/vModel'
import {getFilterBorderClass, getFilterValueClass} from '_common/formUtils'
import {prop} from '@uif/next/lib/utils/tools'
export default {
  inheritAttrs: false,
  name: 'n-switch-filter',
  mixins: [vModel],
  props: {
    // 表单label
    label: prop.string(),
    // 初始值（可以使用`v-model`双向绑定数据）
    value: prop.boolean(),
    // 表单name
    name: prop.string(),
    // 禁用
    disabled: prop.boolean()
  },
  data () {
    return {
      getFilterBorderClass,
      getFilterValueClass,
      nValue: this.value
    }
  },
  methods: {
    onConfirm (event) {
      if (!this.disabled) {
        this.nValue = !this.nValue
        this.$emit('input', this.nValue)
        this.$emit('u-change', this.nValue, event)
      }
    }
  }
}
</script>
