<template>
  <div class="switch">
    <switch-button
      v-model="val1"
      @change="onChange"
    ></switch-button>
    
    <div class="switch-item">
      <p>默认</p>
      
      <span>{{val1}}</span>
    </div>
    <div class="switch-item" style="margin-top:20px;">
      <p>自定义选中的值</p>
      <switch-button
        v-model="val2"
        @change="onChange"
        active-color="#00CE71"
        :active-value="0"
        :inactive-value="1"
      ></switch-button>
      <span>{{val2}}</span>
    </div>
    <div class="switch-item" style="margin-top:20px;">
      <p>不可用</p>
      <switch-button
        :disabled="true"
        v-model="val3"
        @change="onChange"
      ></switch-button>
      <span>{{val3}}</span>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { SwitchButton } from '../../tunas'

export default Vue.extend({
  components: {
    SwitchButton
  },
  data () {
    return {
      val1: false,
      val2: 0,
      val3: false
    }
  },

  methods: {
    onChange (v) {
      console.log('change', v)
    }
  }
})
</script>
