<template>
    <view
        :style="{
            'background-color': placeholderBg,
            'margin-top': state && firstState || noAnimate ? '0' : '-32px'
        }"
        :class="{
            'no-fixed': noFixed
        }"
        class="b-slide-tip animate-height"
        >
        <view
            v-show="state && firstState || noAnimate"
            class="slide-tip-content c-font-small"
            :style="{
                'background': background,
                'color': color,
                'top': statusBarHeight + 'px'
            }">
            <!-- slot 自定义内容 -->
            <slot></slot>
        </view>
    </view>
</template>

<script>
/**
 * @file 提示条
 * @author wangying51
 */
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';

export default {
    config: {
        component: true
    },
    props: {
        // 占位背景颜色
        placeholderBg: {
            type: String,
            default: '#fff'
        },
        // 背景颜色
        background: {
            type: String,
            default: '#ff6e6e'
        },
        // 文字颜色
        color: {
            type: String,
            default: '#fff'
        },
        // 显示状态
        state: {
            type: Boolean,
            default: false
        },
        // 是否不吸顶
        noFixed: {
            type: Boolean,
            default: false
        },
        // 是否无动画
        noAnimate: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            firstState: false,
            statusBarHeight: 0
        };
    },
    components: {

    },
    mounted() {
        let timeout = setTimeout(() => {
            this.firstState = true;
            clearTimeout(timeout);
        }, 200);
        this.setStatusBarHeight();
    },
    methods: {
        // 设置statusBar高度
        setStatusBarHeight() {
            if (process.env.MARS_ENV === 'swan') {
            }
            else {
                const systemInfo = getSystemInfo();
                this.statusBarHeight = (systemInfo.statusBarHeight || 0) + (systemInfo.navigationBarHeight || 44);
            }
        }
    }
};
</script>
<style lang="less" scoped>
.b-slide-tip {
    width: 100%;
    height: 32px;
    position: relative;
    &.no-fixed {
        .slide-tip-content {
            position: static;
        }
    }
    .slide-tip-content {
        position: fixed;
        left: 0;
        right: 0;
        height: 32px;
        line-height: 32px;
        text-align: center;
        z-index: 5;
    }
    &.animate-height {
        transition: all .5s cubic-bezier(.18, 0, .26, 1);
    }
}

</style>



