<template>
  <div :class="classes" @click="onChange(!currentValue)" :name="name">
    <div class="uif-switch-point"></div>
    <div class="uif-switch-text" v-if="innerText">{{innerText}}</div>
  </div>
</template>

<script>
import mixin from '../checkbox/mixin'
export default {
  inheritAttrs: false,
  name: 'u-switch',
  mixins: [mixin],
  props: {
    // 开启文本
    openText: {
      type: String,
      default: ''
    },
    // 关闭文本
    closeText: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      is: 'switch'
    }
  },
  computed: {
    classes () {
      return [
        'uif-' + this.is,
        {
          'disabled': this.disabled,
          'active': this.currentValue,
          'has-text': this.openText || this.closeText
        }
      ]
    },
    innerText () {
      return this.currentValue ? this.openText : this.closeText
    }
  }
}
</script>
