<template>
    <div>
        <h-button @click="handleClick">基本用法</h-button>
        <br/>
        <br/>
        <h-button @click="handleLoading">加载中</h-button>
        <br/>
        <br/>
        <h-button @click="handleSuccess">成功</h-button>
        <br/>
        <br/>
        <h-button @click="handleError">失败</h-button>
        <br/>
        <br/>
        <h-button @click="handleTop">高级用法</h-button>
        <br/>
        <br/>
        <h-button @click="handleOne">多个</h-button>
        <br/>
        <br/>
        <h-button @click="handleCom">组件使用</h-button>
    </div>
</template>

<script>
import {hToast} from './index.js'
import hButton from '../button/';
export default {
    name: "icon-demo",
    data() {
        return {
            show: false
        }
    },
    components: {
        hButton
    },
    methods: {
        handleClick() {
            hToast('提示内容');
        },
        handleLoading() {
            hToast.loading({
                mask: true,
                message: '加载中...'
            });
        },
        handleSuccess() {
            hToast.success('成功文案');
        },
        handleError() {
            hToast.error('失败文案');
        },
        handleTop() {
            const toast = hToast.loading({
            duration: 0,       // 持续展示 toast
            forbidClick: true, // 禁用背景点击
            loadingType: 'spinner',
            message: '倒计时 3 秒'
            });

            let second = 3;
            const timer = setInterval(() => {
            second--;
            if (second) {
                toast.message = `倒计时 ${second} 秒`;
            } else {
                clearInterval(timer);
                hToast.clear();
            }
            }, 1000);
        },
        handleOne() {
            hToast.allowMultiple();
    
            const toast1 = hToast('第一个 Toast');
            const toast2 = hToast.success('第二个 Toast');
    
            // toast1.clear();
            // toast2.clear();
        },
        handleCom() {
            this.$toast('提示文案');
        }
    }
}
</script>