<template>
    <view class="detail-header" :style="{ paddingTop: statusBarHeight + 'px' }">
        <view class="detail-header__nav">
            <view class="detail-header__back" @tap="$emit('back')">
                <u-icon name="arrow-left" size="40" color="#333"></u-icon>
            </view>
            <view class="detail-header__title-wrap">
                <text class="detail-header__title">{{ title }}</text>
                <text class="detail-header__subtitle">{{ subtitle }}</text>
            </view>
            <view class="detail-header__share" @tap="$emit('share')">
                <u-icon name="share" size="36" color="#333"></u-icon>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
defineProps<{
    title?: string
    subtitle?: string
    statusBarHeight?: number
}>()

defineEmits<{
    (e: 'back'): void
    (e: 'share'): void
}>()
</script>

<style lang="scss" scoped>
.detail-header {
    position: relative;
    overflow: hidden;
    padding: 0 24rpx 16rpx;
    background: #fff;
    color: #333;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);

    &__nav {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 12rpx;
        height: 88rpx;
    }

    &__back,
    &__share {
        width: 64rpx;
        height: 64rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20rpx;
        background: #f5f5f5;
    }

    &__title-wrap {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4rpx;
    }

    &__title {
        font-size: 32rpx;
        font-weight: 700;
        color: #333;
        line-height: 1.2;
    }

    &__subtitle {
        max-width: 420rpx;
        font-size: 20rpx;
        color: #999;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
</style>
