<template>
    <view class="sub-nav">
        <view class="sub-nav__toolbar" :style="toolbarStyle">
            <view class="sub-nav__nav">
                <view class="sub-nav__back" @tap.stop="$emit('back')">
                    <image
                        class="sub-nav__back-icon"
                        src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronleft.png"
                        mode="aspectFit"
                    />
                </view>
                <text class="sub-nav__title">{{ title }}</text>
                <view class="sub-nav__right">
                    <view
                        v-if="rightText"
                        class="sub-nav__action"
                        :class="{ 'sub-nav__action--button': actionButton }"
                        @tap.stop="$emit('right-action')"
                    >
                        <text class="sub-nav__action-text">{{ rightText }}</text>
                    </view>
                    <view class="sub-nav__capsule" :class="{ 'sub-nav__capsule--h5': isH5 }" :style="capsuleStyle"></view>
                </view>
            </view>
        </view>
        <view class="sub-nav__spacer" :style="toolbarSpacerStyle"></view>
    </view>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'

const props = defineProps({
    title: { type: String, required: true },
    rightText: { type: String, default: '' },
    actionButton: { type: Boolean, default: false }
})

defineEmits(['back', 'right-action'])

const toolbarStyle = ref({})
const toolbarSpacerStyle = ref({})
const capsuleStyle = ref({})
const isH5 = ref(false)

function syncNavSafeArea() {
    try {
        const sys = uni.getSystemInfoSync()
        const statusBarHeight = sys.statusBarHeight || 0
        const navHeight = 44
        const extraGap = 4
        const menu = uni.getMenuButtonBoundingClientRect?.()
        
        // #ifdef H5
        isH5.value = true
        // #endif
        // #ifndef H5
        isH5.value = false
        // #endif
        if (!isH5.value && typeof window !== 'undefined' && !menu?.width) {
            isH5.value = sys.uniPlatform === 'web' || sys.platform === 'web'
        }

        toolbarStyle.value = {
            paddingTop: `${statusBarHeight}px`
        }

        toolbarSpacerStyle.value = {
            height: `${statusBarHeight + navHeight + extraGap}px`
        }

        if (!isH5.value && menu && menu.width) {
            const capsuleGap = sys.windowWidth - menu.left + 8
            capsuleStyle.value = {
                width: `${capsuleGap}px`,
                minWidth: `${capsuleGap}px`
            }
        } else {
            capsuleStyle.value = {
                width: '0px',
                minWidth: '0px'
            }
        }
    } catch (e) {
        toolbarSpacerStyle.value = { height: '44px' }
        isH5.value = true
        capsuleStyle.value = { width: '0px', minWidth: '0px' }
    }
}

onMounted(() => {
    syncNavSafeArea()
    nextTick(() => {
        setTimeout(() => syncNavSafeArea(), 50)
    })
})
</script>

<style lang="scss">
@import '@/common/style/memberInfo/member-info-sub-nav.css';
</style>
