<template>
    <!-- 头部 左中右 -->
    <view ref="hs" :class="['dw', background == 'jb' && 'bg']" :style="{ ...jhbStyle }" id="hs">
        <view class="jy-header-box">
            <uni-icons class="mlr20" @click="goto" type="left" size="22"></uni-icons>
            <view class="jy-header-center" @click="emit('center')">
                <slot name="center">
                    <text class="jy-header-title">{{ title }}</text>
                </slot>
            </view>
            <view class="mlr20">
                <slot name="right" v-if="isRight">
                    <uni-icons type="more-filled" size="30"></uni-icons>
                </slot>
            </view>
        </view>
        <slot name="bottom" />
    </view>
    <!-- 幽灵盒子 -->
    <view class="jy-header-box" :style="{ ...jhbStyle, 'height': `${ylh}` }"></view>
</template>

<script setup>
import {
    ref,
    defineExpose,
    onMounted,
    nextTick
} from 'vue';
import {
    statusBarHeight
} from '@/components/public/Mixins.js';

const props = defineProps({
    title: { // 标题
        type: String,
        default: ''
    },
    isRight: {
        type: Boolean,
        default: false
    },
    // 是否跳转
    isSkip: {
        type: Boolean,
        default: true
    },
    background: {
        type: String,
        default: '#F2F2F2'
    }
});

const hs = ref(null);
const ylh = ref('0px');
const updateAltitude = () => {
    nextTick().then(() => {
        uni.createSelectorQuery().select('#hs').boundingClientRect((rect) => {
            ylh.value = rect.height + 'px';
        }).exec();
    });
};

// 暴露方法
defineExpose({
    updateAltitude
});

// 清理函数
onMounted(() => {
    updateAltitude()
});

const jhbStyle = ref({
    'padding-top': `${statusBarHeight()}`,
    'padding-bottom': `2px`
});

const goto = () => {
    if (props.isSkip) {
        uni.navigateBack();
    }
    emit('back');
};

const emit = defineEmits(['right', 'center', 'back']);
</script>

<style scoped lang="scss">
// 定位 
.dw {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9;
}

.bg {
    background: linear-gradient(50deg, #DBFCE9 -7%, #FFFBF3 50%, #FEEEDB 82%, #FEE3CD 102%);
}

.jy-header-box {
    // 过高之后固定
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 88rpx;
    z-index: 9;

    text {
        font-size: 36rpx;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.9);
    }

    image {
        width: 48rpx;
        height: 48rpx;
        margin: 0 20rpx;
    }
}
</style>