<template>
  <div>
    <group>
      <x-switch
        v-model="show"
        title="Toggle"
      />
    </group>
    <x-alert
      v-model="show"
      title="congratulations"
      @on-show="onShow"
      @on-hide="onHide"
    >
      Message is sent successfully~
    </x-alert>
    <group title="以插件的方式调用">
      <cell
        :title="'显示'"
        is-link
        @click.native="onChange()"
      />
      <cell
        :title="'3秒后关闭'"
        is-link
        @click.native="showPluginAuto"
      />
    </group>
  </div>
</template>

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

export default {
  components: {
    XAlert,
    Group,
    XSwitch,
    Cell
  },
  data () {
    return {
      show: false,
      show1: false
    }
  },
  create () {
    console.log('XAlert')
  },
  methods: {
    onHide () {
      console.log('on hide')
    },
    onShow () {
      console.log('on show')
    },
    onChange () {
      this.$cvux.alert.show({
        title: '9883246325',
        content: '确定这个是测试吗？',
        buttonText: '确定',
        onShow () {
          console.log('Plugin: I\'m showing')
        },
        onHide () {
          console.log('Plugin: I\'m hiding')
        }
      })
    },
    showPluginAuto() {
      this.$cvux.alert.show({
        title: '9883246325',
        content: '确定这个是测试吗？,3秒关闭',
        buttonText: '确定',
        autoCloseTime: 3000,
        onShow () {
          console.log('Plugin: I\'m showing')
        },
        onHide () {
          console.log('Plugin: I\'m hiding')
        }
      })
    }
  }
}
</script>
