<template>
    <view class="body-report-section">
        <view class="body-report-section__inner">
            <view class="body-report-section__header">
                <view class="body-report-section__header-inner">
                    <text class="body-report-section__title">体测报告</text>
                    <view
                        class="body-report-section__link"
                        hover-class="mi-tap--hover"
                        :hover-stay-time="150"
                        @tap="$emit('view-history')"
                    >
                        <text class="body-report-section__history-link">历史记录</text>
                        <image
                            class="body-report-section__link-arrow"
                            src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright3.png"
                            mode="aspectFit"
                        />
                    </view>
                </view>
            </view>
            <view class="body-report-section__card">
                <view class="body-report-section__card-inner">
                    <view class="body-report-section__card-head">
                        <view class="body-report-section__card-head-inner">
                            <text class="body-report-section__desc">
                                最新数据 · {{ report.date }}
                            </text>
                            <view
                                class="body-report-section__view-btn"
                                hover-class="mi-tap-btn--hover"
                                :hover-stay-time="150"
                                @tap="$emit('view-report')"
                            >
                                <image
                                    class="body-report-section__view-icon"
                                    src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/filetext.png"
                                    mode="aspectFit"
                                />
                                <text class="body-report-section__view-report">查看报告</text>
                            </view>
                        </view>
                    </view>
                    <view class="body-report-section__metrics">
                        <view class="body-report-section__metrics-inner">
                            <view class="body-report-section__metric">
                                <view class="body-report-section__metric-inner">
                                    <text class="body-report-section__text">{{ report.weight }}</text>
                                    <text class="body-report-section__metric-value">体重(kg)</text>
                                </view>
                            </view>
                            <view class="body-report-section__metric-divider"></view>
                            <view class="body-report-section__metric">
                                <view class="body-report-section__metric-inner">
                                    <text class="body-report-section__text-2">{{ report.bmi }}</text>
                                    <text class="body-report-section__text-3">BMI</text>
                                </view>
                            </view>
                            <view class="body-report-section__metric-divider"></view>
                            <view class="body-report-section__metric">
                                <view class="body-report-section__metric-inner">
                                    <text class="body-report-section__text-4">{{ report.bodyFat }}</text>
                                    <text class="body-report-section__metric-label">体脂率</text>
                                </view>
                            </view>
                            <view class="body-report-section__metric-divider"></view>
                            <view class="body-report-section__metric">
                                <view class="body-report-section__metric-inner">
                                    <text class="body-report-section__num">{{ report.bmr }}</text>
                                    <text class="body-report-section__text-5">BMR</text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="body-report-section__summary">
                        <view class="body-report-section__summary-inner">
                            <view class="body-report-section__goal">
                                <image
                                    class="body-report-section__goal-icon"
                                    src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/target.png"
                                    mode="aspectFit"
                                />
                                <text class="body-report-section__goal-text">
                                    状态：{{ report.status }}
                                </text>
                            </view>
                            <view class="body-report-section__change">
                                <image
                                    class="body-report-section__change-icon"
                                    src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/trendingdown.png"
                                    mode="aspectFit"
                                />
                                <text class="body-report-section__metric-value-2">
                                    较上次 {{ report.change }}
                                </text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    options: {
        virtualHost: false,
        styleIsolation: 'apply-shared'
    },
    props: {
        report: {
            type: Object,
            default: () => ({
                date: '2024-07-01',
                weight: '63.5',
                bmi: '22.1',
                bodyFat: '24.8%',
                bmr: '165',
                status: '比较健康',
                change: '-1.2kg'
            })
        }
    },
    emits: ['view-history', 'view-report']
}
</script>

<style>
@import '@/common/style/memberInfo/member-info-component-reset.css';
@import '@/common/style/memberInfo/member-info-body-report.css';
@import '@/common/style/memberInfo/member-info-tap.css';
</style>
