<template>
  <div class="form-item--toggle" :class="{'form-item--toggle--wide':wide}">
    <input class="toggle__radio" :id="'switcher-' + uuid + '-one'"
           data-toggle-value="on" type="radio"
           :value="true"
           v-model='val'
           :disabled='disabling'>
    <label :for="'switcher-' + uuid + '-one'">{{onText}}</label>
    <input class="toggle__radio" :id="'switcher-' + uuid + '-two'"
           data-toggle-value="off" type="radio"
           v-model='val'
           :value="false"
           :disabled='disabling'>
    <label :for="'switcher-' + uuid + '-two'">{{offText}}</label>
    <div class="form-item--toggle__switch">
      <span class="icon icon-hamburger-menu"></span>
    </div>
    <div class="form-item--toggle__track"></div>
  </div>
</template>
<script>
  export default {
    props: {
      onText: {
        type: String,
        required: true,
        default: 'ON'
      },
      offText: {
        type: String,
        required: true,
        default: 'OFF'
      },
      value: {
        type: Boolean,
        default: true
      },
      disabled: {
        type: Boolean,
        default: false
      },
      wide: {   // 组件有两种宽度的表现形式，默认宽度和加宽模式（wide）
        type: Boolean,
        default: false
      },
      seq: {
        type: Number,
        default: 0
      }
    },
    computed: {
      seqInt () {
        var value = this.seq;
        if (isNaN(value) === false) {
          return parseInt(value);
        }
      }
    },
    data () {
      return {
        uuid: Math.random().toString(36).substring(3, 8),
        val: this.value,
        disabling: this.disabled  // 唯一标识
      };
    },
    watch: {
      value (newValue) {
        this.$emit('on-change', newValue, this.seqInt);
      }
    },
    methods: {
      toggle () {
        this.val = !this.val;
      },
      setValue (value) {
        if (this.val === value) return;
        this.val = value;
      },
      getValue () {
        return this.val;
      },
      enable () {
        this.disabling = false;
      },
      disable () {
        this.disabling = true;
      }
    }
  };
</script>
