<style>
.demo button{
	margin:10px 0;
}
</style>
<template>
<div class="demo">
	<button type="button" class="btn-outline btn-block" @click="showAlert">Alert</button>
	<button type="button" class="btn-outline btn-block" @click="showConfirm">Confirm</button>
	<button type="button" class="btn-outline btn-block" @click="showActions">Actions</button>
	<button type="button" class="btn-outline btn-block" @click="showActionsheet">ActionSheet</button>
	
	<Alert 
	:visible.sync="alert.visible"
	:transition="alert.transition"
	:content="alert.content"
	@ok="onOk"
	></Alert>


	<Confirm 
	:visible.sync="confirm.visible"
	:title="confirm.title"
	:content="confirm.content"
	@ok="onOk"
	></Confirm>

	<Actions 
	:visible.sync="actions.visible"
	:content="actions.content"
	:items="actions.items"
	@change="selected"
	></Actions>

	<actionsheet
	:visible.sync="actionsheet.visible"
	:items="actionsheet.items"
	@change="selected"
	></actionsheet>
	
</div>
</template>

<script>
import Alert from "components/dialog/alert"
import Confirm from "components/dialog/confirm"
import Actions from "components/dialog/actions"
import actionsheet from "components/dialog/actionsheet"
export default{
	components:{
 		Alert,Confirm,Actions,actionsheet
 	},
 	data(){
 		return{
	 		"alert":{
	 			visible:false,
	 			title:"AlertTitle",
	 			transition:"vue-message-center",
	 			content:"这是一个Alert弹出框。"
	 		},
	 		"confirm":{
	 			visible:false,
	 			title:"ConfirmTitle",
	 			content:"这是一个Confrim弹出框。"
	 		},
	 		"actions":{
	 			visible:false,
	 			content:"这是一个actions弹出框。",
	 			items:[{
	 				text:"请给个赞吧"
	 			},{
	 				text:"稍候再去"
	 			},{
	 				text:"残忍地拒绝"
	 			},{
	 				text:"不，谢谢！"
	 			}]
	 		},
	 		"actionsheet":{
	 			visible:false,
	 			items:[{
	 				text:"请给个赞吧"
	 			},{
	 				text:"稍候再去"
	 			},{
	 				text:"残忍地拒绝"
	 			},{
	 				text:"不，谢谢！"
	 			}]
	 		}
 		}
 	},
 	methods:{
 		showAlert(){
 			this.alert.visible=true;
 		},
 		showConfirm(){
 			this.confirm.visible=true;
 		},
 		showActions(){
 			this.actions.visible=true;
 		},
 		showActionsheet(){
 			this.actionsheet.visible=true;
 		},
 		selected(item){
 			console.log("change");
 		},
 		onOk(){
 			console.log("ok");
 		},
 		onCancel(ev){
			console.log("cancel")
 		}
 	}
}
</script>