<template>
	<vc-modal
		v-model="visible"
		title="Common Modal dialog box title"
		@on-ok="handleOk"
		@on-cancel="handleCancel"
	>
		<p>Content of dialog</p>
		<p>Content of dialog</p>
		<p>Content of dialog</p>
	</vc-modal>
</template>
<script>
import { Modal, Portal } from '@wya/vc';

const wrapper = {
	name: "vc-tpl-basic",
	components: {
		'vc-modal': Modal
	},
	data() {
		return {
			visible: false
		};
	},
	mounted() {
		this.visible = true;
	},
	methods: {
		handleOk() {
			/**
			 * v-model会默认被触发，要由该组件控制，给组件i-modal传值 loading: true
			 */
			// this.visible = false;
			this.$emit('sure');
		},
		handleCancel() {
			// this.visible = false;
			this.$emit('close');
		}
	}
};
export default wrapper;

export const PModalWithBefore = new Portal(wrapper, {
	onBefore() {
		return new Promise((resolve, reject) => {
			setTimeout(resolve, 1000);
		});
	}
});

export const PModal = new Portal(wrapper, {});

// babel7 下不能使用module.exports.default
</script>

<template>
	<div>
		<div @click="handleClickWithBefore">
			点我(带延迟)
		</div>
		<div @click="handleClick">
			点我(不带延迟)
		</div>
	</div>
</template>
<script>
import { PModal, PModalWithBefore } from './examples/basic/modal.vue';

export default {
	name: "vc-tpl-basic",
	methods: {
		handleClickWithBefore() {
			PModalWithBefore.popup({

			}).then((res) => {
				console.log(res);
			}).catch((res) => {
				console.log(res);
			});
		},
		handleClick() {
			PModal.popup({

			}).then((res) => {
				console.log(res);
			}).catch((res) => {
				console.log(res);
			});
		}
	}
};
</script>

<template>
	<vc-portal-view>
		<div>placeholder</div>
	</vc-portal-view>
</template>
<script>
import { Portal } from '@wya/vc';

export default {
	name: "vc-tpl-basic",
	components: {
		'vc-portal-view': Portal.View
	},
};
</script>