<template>
  <div>
    <group title="auto countdown">
      <cell
        title="15s"
        :value="value"
      >
        <countdown
          v-show="show"
          slot="value"
          v-model="options1"
          @on-finish="finish"
        />
      </cell>
    </group>
    <group title="manually">
      <x-switch
        v-model="options2.start"
        title="start"
      />
      <cell title="15s">
        <countdown
          slot="value"
          v-model="options2"
          :start="options2.start"
          @on-finish="finish2"
        />
      </cell>
    </group>
  </div>
</template>

<script>
import { Group, Cell, Countdown, XSwitch } from '../components/_index'

export default {
  components: {
    Group,
    Cell,
    Countdown,
    XSwitch
  },
  data () {
    return {
      options1: {
        time: 15,
        start: true
      },
      options2: {
        time: 15,
        start: false
      },
      show: true,
      time: 15,
      value: '',
      start: false
    }
  },
  methods: {
    finish (index) {
      this.show = false
      this.value = 'completed'
    },
    finish2 (index) {
      this.options2.start = false
      // this.time = 20
      this.options2.time = 20
    }
  }
}
</script>
