<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="/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>
export default {
    options: {
        virtualHost: false,
        styleIsolation: 'apply-shared'
    },
    props: {
        title: { type: String, required: true },
        rightText: { type: String, default: '' },
        actionButton: { type: Boolean, default: false }
    },
    emits: ['back', 'right-action'],
    data() {
        return {
            toolbarStyle: {},
            toolbarSpacerStyle: {},
            capsuleStyle: {},
            isH5: false
        }
    },
    mounted() {
        this.syncNavSafeArea()
        this.$nextTick(() => {
            setTimeout(() => this.syncNavSafeArea(), 50)
        })
    },
    methods: {
        syncNavSafeArea() {
            try {
                const sys = uni.getSystemInfoSync()
                const statusBarHeight = sys.statusBarHeight || 0
                const navHeight = 44
                const extraGap = 4
                const menu = uni.getMenuButtonBoundingClientRect?.()
                // #ifdef H5
                this.isH5 = true
                // #endif
                // #ifndef H5
                this.isH5 = false
                // #endif
                if (!this.isH5 && typeof window !== 'undefined' && !menu?.width) {
                    this.isH5 = sys.uniPlatform === 'web' || sys.platform === 'web'
                }

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

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

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

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