<template>
    <view :class="'weui-toptips ' + className + ' ' + extClass + ' ' + (showClone ? 'weui-toptips_show' : '')">
        <block v-if="msg">{{ msg }}</block>
        <block v-else>
            <slot></slot>
        </block>
    </view>
</template>

<script>
export default {
    data() {
        return {
            typeClassMap: {
                warn: 'weui-toptips_warn',
                info: 'weui-toptips_info',
                success: 'weui-toptips_success',
                error: 'weui-toptips_error'
            },

            className: '',
            showClone: false
        };
    },
    options: {
        addGlobalClass: true
    },
    props: {
        type: {
            type: String,
            default: 'error'
        },
        show: {
            type: Boolean,
            default: false
        },
        msg: {
            type: String,
            default: ''
        },
        delay: {
            type: Number,
            default: 2000
        },
        extClass: {
            type: String,
            default: ''
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    methods: {
        attached() {
            const data = this;
            this.setData({
                className: data.typeClassMap[data.type] || ''
            });
        },

        typeChangeFun(newVal) {
            this.setData({
                className: this.typeClassMap[newVal] || ''
            });
            return newVal;
        },

        showChangeFun(newVal) {
            this.showClone = this.clone(this.show);
            this.showToptipsFun(newVal);
        },

        showToptipsFun(newVal) {
            if (newVal && this.delay) {
                setTimeout(() => {
                    this.setData(
                        {
                            showClone: false
                        },
                        () => {
                            // tooltips 隐藏了，触发 hide 事件
                            this.$emit(
                                'hide',
                                {
                                    detail: {}
                                },
                                {}
                            );
                        }
                    );
                }, this.delay);
            }
            this.setData({
                showClone: newVal
            });
        }
    },
    created: function () {},
    watch: {
        type: {
            handler: function (newVal) {
                this.setData({
                    className: this.typeClassMap[newVal] || ''
                });
                return newVal;
            },

            immediate: true
        },

        show: {
            handler: function (newVal) {
                this.showClone = this.clone(this.show);
                this.showToptipsFun(newVal);
            },

            immediate: true
        }
    }
};

/***/
</script>
<style>
.weui-toptips_show.weui-toptips {
    display: block;
}
.weui-toptips_show {
    -webkit-transform: translateZ(0) translateY(0);
    transform: translateZ(0) translateY(0);
    opacity: 1;
}
.weui-toptips_success {
    background-color: var(--weui-BRAND);
}
.weui-toptips_error {
    background-color: var(--weui-RED);
}
.weui-toptips_info {
    background-color: var(--weui-BLUE);
}
</style>
