<template>
    <view>
        <van-transition
            name="slide-down"
            :show="show"
            custom-class="van-notify__container"
            :custom-style="'z-index: ' + zIndex + '; top: ' + utils.addUnit(top)"
            @tap.native="onTap"
        >
            <view :class="'van-notify van-notify--' + type" :style="'background:' + background + ';color:' + color + ';'">
                <view v-if="safeAreaInsetTop" :style="'height: ' + statusBarHeight + 'px'" />
                <text>{{ message }}</text>
            </view>
        </van-transition>
    </view>
</template>
<script module="utils" lang="wxs" src="@/node_modules/@vant/weapp/dist/wxs/utils.wxs"></script>
<script>
import { VantComponent } from '../common/component';
import { WHITE } from '../common/color';
export default {
    data() {
        return {
            show: false,
            statusBarHeight: ''
        };
    },
    props: {
        message: String,
        background: String,
        type: {
            type: String,
            default: 'danger'
        },
        color: {
            type: String,
            default: WHITE
        },
        duration: {
            type: Number,
            default: 3000
        },
        zIndex: {
            type: Number,
            default: 110
        },
        safeAreaInsetTop: {
            type: Boolean,
            default: false
        },
        top: null
    },
    created() {
        const { statusBarHeight } = uni.getSystemInfoSync();
        this.setData({
            statusBarHeight
        });
    },
    methods: {
        showFun() {
            const { duration, onOpened } = this;
            clearTimeout(this.timer);
            this.setData({
                show: true
            });
            this.$nextTick(onOpened);
            if (duration > 0 && duration !== Infinity) {
                this.timer = setTimeout(() => {
                    this.hide();
                }, duration);
            }
        },
        hide() {
            const { onClose } = this;
            clearTimeout(this.timer);
            this.setData({
                show: false
            });
            this.$nextTick(onClose);
        },
        onTap(event) {
            const { onClick } = this;
            if (onClick) {
                onClick(event.detail);
            }
        }
    }
};
</script>
<style>
@import './index.css';
</style>
