<template>
    <div class="ht-base-message-multiple-float-demo">
        <ht-base-button type="primary" @click="infoRenderFunc">显示多行悬浮普通提示</ht-base-button>
        <ht-base-button type="success" @click="successRenderFunc">显示多行悬浮成功提示</ht-base-button>
        <ht-base-button type="warning" @click="warningRenderFunc">显示多行悬浮警告提示</ht-base-button>
        <ht-base-button type="error" @click="errorRenderFunc">显示多行悬浮错误提示</ht-base-button>
    </div>
</template>

<script type="text/jsx">
    export default {
        name: 'HtBaseMessageMultipleFloatDemo',
        methods: {
            infoRenderFunc() {
                this.$HtBaseMessage.info({
                    iconSize: 'large',
                    types: 'float',
                    closable: true,
                    render: h => {
                        return (
                            <div class="demo-multiple-message">
                                <h3 class="demo-title">消息提示</h3>
                                <p class="demo-desc">你所提交的信息已经审核通过，请及时完成注册</p>
                                <a class="demo-link" href="#">前往注册</a>
                            </div>
                        )
                    }
                });
            },
            successRenderFunc() {
                this.$HtBaseMessage.success({
                    iconSize: 'large',
                    types: 'float',
                    closable: true,
                    render: h => {
                        return (
                            <div class="demo-multiple-message">
                                <h3 class="demo-title">消息提示</h3>
                                <p class="demo-desc">你所提交的信息已经审核通过，请及时完成注册</p>
                                <a class="demo-link" href="#">前往注册</a>
                            </div>
                        )
                    }
                });
            },
            warningRenderFunc() {
                this.$HtBaseMessage.warning({
                    iconSize: 'large',
                    types: 'float',
                    closable: true,
                    render: h => {
                        return (
                            <div class="demo-multiple-message">
                                <h3 class="demo-title">消息提示</h3>
                                <p class="demo-desc">你所提交的信息已经审核通过，请及时完成注册</p>
                                <a class="demo-link" href="#">前往注册</a>
                            </div>
                        )
                    }
                });
            },
            errorRenderFunc() {
                this.$HtBaseMessage.error({
                    iconSize: 'large',
                    types: 'float',
                    closable: true,
                    render: h => {
                        return (
                            <div class="demo-multiple-message">
                                <h3 class="demo-title">消息提示</h3>
                                <p class="demo-desc">你所提交的信息已经审核通过，请及时完成注册</p>
                                <a class="demo-link" href="#">前往注册</a>
                            </div>
                        )
                    }
                });
            }
        }
    }
</script>

<style lang="less">
    .ht-base-message {
        .demo-multiple-message {
            text-align: left !important;
            padding-left: 10px;
            color: #333;
            .demo-desc {
                color: #999;
                font-size: 12px;
            }
            .demo-link {
                padding: 10px 0 20px 0;
                display: block;
            }
        }
    }
</style>

