<style lang="less">
    .ui-toast-wrapper {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 9990;
        pointer-events: none;
    }

    .ui-toast {
        position: absolute;
        margin: 0 auto;
        padding: 20rpx 40rpx;
        top: 50%;
        left: 50%;
        max-width: 670rpx;
        font-size: 15px;
        text-align: center;
        line-height: 18px;
        word-break: break-all;
        color: #fff;
        border: none;
        border-radius: 5px;
        background-color: rgba(0, 0, 0, 0.75);
        overflow: hidden;
        z-index: 9991;
        transform: translate(-50%, -50%);
        animation: ani-toast 2s ease-in-out;
    }

    @keyframes ani-toast {
        0% {
            opacity: 0;
            transform: translate(-50%, -50%) scale(1.1);
        }
        10% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
        100% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
    }
</style>

<template lang="wxml">
    <view class="ui-toast-wrapper" wx:if="{{visible}}" @touchstart.stop="noop">
        <view class="ui-toast" style="{{cssText}}">
            <text space="nbsp" decode="true">{{content}}</text>
        </view>
    </view>
</template>

<script>
    import Wepy from 'wepy';

    export default class UIToast extends Wepy.component {
        constructor() {
            super();
            this.data = this._defaultData();
        }

        computed = {
            cssText() {
                const styles = {};
                if ('top' === this.position) {
                    styles['top'] = '20rpx';
                    styles['margin-top'] = '40rpx';
                } else if ('center' === this.position) {
                    styles['top'] = '50%';
                } else {
                    styles['top'] = 'initial';
                    styles['bottom'] = '20rpx';
                    styles['margin-bottom'] = '20rpx';
                }
                return Object.keys(styles).map(key => (key + ':' + styles[key])).join(';');
            }
        };

        methods = {
            noop(e) {
                // DoNothing
                return false;
            }
        };

        _defaultData() {
            return {
                visible: false,
                position: '',
                content: '',
                duration: 2000
            };
        }

        /**
         * 显示消息对话框。
         * @param {Object | String} options 配置项。
         * @param {String} options.content 提示文本。
         * @param {String} options.position 对话框出现在屏幕的位置，支持“top”、“center”、“bottom”，默认值为“bottom”。
         * @param {String} options.duration 指定对话框若干毫秒后自动消失，默认值为“2000”。
         */
        show(options) {
            let conf = this._defaultData();
            if ('string' === typeof options) {
                conf = Object.assign(conf, {
                    content: String(options)
                });
            } else {
                conf = Object.assign(conf, options);
            }

            this.visible = true;
            this.content = conf.content;
            this.position = conf.position;
            this.duration = (+conf.duration > 0) ? +conf.duration : this._defaultData().duration;
            this.$apply();

            this.timer = setTimeout(() => this.hide(), this.duration);
        }

        /**
         * 隐藏消息对话框。
         */
        hide() {
            const conf = this._defaultData();
            for (let prop in conf) {
                this[prop] = conf[prop];
            }
            this.$apply();

            if (!!this.timer) {
                clearTimeout(this.timer);
                this.timer = null;
            }
        }
    }
</script>