<template>
    <view>
        <top-bar
            :blank="false"
            :text-color="textColor || textColorTemp"
            :title="barTitle"
            bar-bg="transparent"
            @topbarHeightHandle="topbarHeightHandle"
        />
        <view
            v-if="reloadBar"
            class="custom-header-topbar-bg test"
            :style="{
                height: topBarHeight + 'px',
                background: topBarBg
            }"
        ></view>
        <view
            :style="{
                'background-image': 'url(' + background + ')',
                height: customHeight
            } | imgCompress('background-image', {column: 12})"
            class="custom-header"
        >
            <view v-if="isSlot">
                <slot/>
            </view>
            <view v-else class="custom-header-text">
                <view class="custom-header-title c-line-clamp2">
                    <view class="custom-header-title-label m-icon m-icon-spetopicicon"></view>
                    <text>{{ title }}</text>
                </view>
                <view v-if="view" class="custom-header-subInfo">
                    <text>阅读量：</text>
                    <text>{{ view }}</text>
                </view>
            </view>
            <view :class="{'custom-header-masking': isMask}"></view>
        </view>
    </view>
</template>

<script>

/**
* @file 专题页通用自定义头部
* @author yantingxi
*/
import Topbar from '../common/topbar';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    data() {
        return {
            timer: null,
            needTimer: true,
            reloadBar: true,
            topBarBg: 'transparent',
            topBarHeight: 64,
            sendedHieght: false,

            textColorTemp: '#fff'
        };
    },
    props: {
        title: {
            type: String,
            default: ''
        },
        view: {
            type: String,
            default: ''
        },
        barTitle: {
            type: String,
            default: ''
        },
        background: {
            type: String,
            default: ''
        },
        isSlot: {
            type: Boolean,
            default: false
        },
        isMask: {
            type: Boolean,
            default: true
        },
        customHeight: {
            type: String,
            default: '160px'
        },
        textColor: {
            type: String,
            default: ''
        }
    },
    components: {
        'top-bar': Topbar
    },
    created() {
        this.__textColor = this.textColor;
    },
    methods: {
        onPageScroll(scrollInfo) {
            this.needTimer = true;
            this.setBarBgByScroll(scrollInfo.scrollTop);
        },
        setBarBgByScroll(scrollTop) {
            const ratio = this.parseIntFloat(scrollTop / 100);

            // 背景色渐变
            this.topBarBg = `rgba(255, 255, 255, ${ratio})`;

            // 文字颜色渐变
            const rgb = Math.floor((1 - ratio) * 255);
            if (this.textColor === '#FFF') {
                this.textColorTemp = `rgb(${rgb}, ${rgb}, ${rgb})`;
            }

            // ios中回弹效果导致顶部bar渲染不正确，此处更新topbar
            if (scrollTop < 10) {
                this.reloadBar = false;
                this.$mpUpdated().then(() => {
                    this.reloadBar = true;
                });
            }

            if (process.env.MARS_ENV === 'h5' && this.needTimer) {
                window.clearTimeout(this.timer);
                this.timer = window.setTimeout(() => {
                    this.setBarBgByScroll(window.pageYOffset);
                    this.needTimer = false;
                }, 200);
            }
        },

        // 返回topbar Dom元素height
        topbarHeightHandle(height) {
            this.topBarHeight = height;
            this.$emit('topbarHeightHandle', height);
        },

        parseIntFloat(float) {
            const n = Math.floor(float * 10) / 10;
            return n > 1 ? 1 : n < 0 ? 0 : n;
        }
    }
};
</script>

<style lang="less" scoped>
.custom-header {
    padding: 0 17px;
    height: 160px;
    position: relative;
    overflow: hidden;
    background-size: 100% 100%;

    &-topbar-bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 64px;
        z-index: 2;
    }

    &-icon {
        position: absolute;
        top: 50px;
        left: 17px;
    }

    &-title {
        line-height: .3rem;
        font-size: 0.24rem;
        font-weight: bold;
        color: #fff;
        margin-bottom: 0;

        &-label {
            display: inline-block;
            margin-right: .06rem;
            font-size: 0.24rem;
            padding-top: 2px;
        }
    }

    &-subInfo {
        font-size: 0.14rem;
        color: #fff;
        opacity: 0.7;
    }

    &-text {
        position: absolute;
        bottom: 20px;
        width: 92%;
        z-index: 2;
    }

    &-masking {
        position: absolute;
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
    }
}
</style>
