<template>
    <div>
        <div>
            <a-button @click="info">
                Info
            </a-button>
            <a-button @click="success">
                Success
            </a-button>
            <a-button @click="error">
                Error
            </a-button>
            <a-button @click="warning">
                Warning
            </a-button>
            <a-button @click="confirm">
                Confirm
            </a-button>
        </div>
    </div>
</template>
<script>
import { Modal } from 'ant-design-vue';
export default {
    methods: {
        info() {
            const h = this.$createElement;
            this.$info({
                title: 'This is a notification message',
                content: h('div', {}, [
                    h('p', 'some messages...some messages...'),
                    h('p', 'some messages...some messages...'),
                ]),
                onOk() { },
            });
        },

        success() {
            this.$success({
                title: 'This is a success message',
                // JSX support
                content: (
                    <div>
                        <p>some messages...some messages...</p>
                        <p>some messages...some messages...</p>
                    </div>
                ),
            });
        },

        error() {
            this.$error({
                title: 'This is an error message',
                content: 'some messages...some messages...',
            });
        },

        warning() {
            this.$warning({
                title: 'This is a warning message',
                content: 'some messages...some messages...',
            });
        },

        confirm() {
            const self = this;
            for (let i = 0; i < 3; i += 1) {
                setTimeout(() => {
                    this.$confirm({
                        content: 'destroy all',
                        onOk() {
                            return new Promise((resolve, reject) => {
                                setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
                            }).catch(() => console.log('Oops errors!'));
                        },
                        cancelText: 'Click to destroy all',
                        onCancel() {
                            self.destroyAll();
                        },
                    });
                }, i * 500);
            }
        },
        destroyAll() {
            this.$destroyAll();
        },
    },
};
</script>
