<template>
  <div>
    <group>
      <x-switch title="Toggle" v-model="show1" @on-change="show1change"></x-switch>
      <x-switch title="No loading text" v-model="show2" @on-change="show2change"></x-switch>
    </group>
      <loading :show="show1" :text="text1"></loading>
      <loading :show="show2" text="啊啊啊"></loading>
  </div>
</template>
<script>
import Loading from '../components/loading'
import Group from '../components/group'
import XSwitch from '../components/x-switch'
import XButton from '../components/x-button'

export default {
  components: {
    Loading,
    Group,
    XSwitch,
    XButton
  },
  data () {
    return {
      show1: false,
      show2: false,
      text1: ''
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    show1change (val) {
      if (val) {
        tick(0, (percent) => {
          if (percent === 100) {
            this.show1 = false
            return
          }
          this.text1 = `${percent}%`
        })
      }
    },
    show2change (val) {
      if (val) {
        tick(0, (percent) => {
          if (percent === 100) {
            this.show2 = false
            return
          }
        })
      }
    }
  }
}

function tick (i, cb) {
  setTimeout(function () {
    i++
    cb(i)
    if (i < 100) {
      tick(i, cb)
    }
  }, 10)
}
</script>