<template>
  <div class="actionDialog">
    <span @click="onShow">点我</span>
    <action-dialog :show.sync="show" @confirm="onConfirm" @cancel="onCancel" @closed="onClosed"
    title="选择时间" subtitle="选择时间的辅助文字"
    >
      <select-list v-if="show" class="select-list" activeColor="#f00" :height="380" ref="selectList"></select-list>
    </action-dialog>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { ActionDialog, SelectList } from '../../tunas'

export default Vue.extend({
  components: {
    ActionDialog,
    SelectList
  },

  data () {
    return {
      show: false,
    }
  },

  methods: {
    onShow () {
      console.log('show')
      this.show = !this.show
    },
    onConfirm () {
      console.log('confirm')
    },
    onCancel () {
      console.log('cancel')
    },
    onClosed () {
      console.log('closed')
    }
  },

  mounted () {
    setTimeout(() => {
      this.show = false
    }, 5000)
  }
})
</script>
