/* 
  滑块组件
*/
<template>
  <div
    class="zy-switch"
    @click="onChange"
    :class="{
      'switch-on': currentValue,
      'switch-disabled': disabled
    }"
    :style="{'font-size': size + 'rpx'}"
  >
    <div class="zy-switch-item"></div>
  </div>
</template>

<script>
export default {
  name: 'ZySwitch',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: [Boolean, Number, String],
      default: false
    },
    size: {
      type: String,
      default: '50'
    },
    trueValue: {
      type: [Boolean, Number, String],
      default: true
    },
    falseValue: {
      type: [Boolean, Number, String],
      default: false
    }
  },
  watch: {
    value (val) {
      if (val === this.trueValue || val === this.falseValue) {
        this.updateModel()
      } else {
        throw 'Value should be trueValue or falseValue'
      }
    }
  },
  data () {
    return {
      currentValue: this.value
    }
  },
  methods: {
    onChange () {
      console.log('onchange')
      if (this.disabled) return false
      let checked = !this.currentValue
      this.currentValue = checked
      let value = checked ? this.trueValue : this.falseValue
      this.$emit('input:value', value)

      // this.$emit('on-change', value)
    },
    updateModel () {
      this.currentValue = this.value === this.trueValue
    }
  }
}
</script>

<style lang="scss">
@import './switch';
</style>