<template>
    <view class="scroll-container theme-light">
        <view class="bt-page">
            <MemberInfoSubNav title="智能体测" @back="goBack" />
            <view class="bt-page__action-bar bt-page__action-bar--end">
                <text
                    class="bt-page__action-link"
                    hover-class="mi-tap--hover"
                    :hover-stay-time="150"
                    @tap="goSettings"
                >
                    体测设置
                </text>
            </view>
            <view class="bt-page__body">
                <view class="bt-hero">
                    <view class="bt-hero__top">
                        <text class="bt-hero__label">最新体测评分</text>
                        <view class="bt-hero__badge">
                            <text class="bt-hero__badge-text">{{ latest?.status || '暂无数据' }}</text>
                        </view>
                    </view>
                    <view class="bt-hero__score-row">
                        <text class="bt-hero__score">{{ latest?.score ?? '--' }}</text>
                        <text class="bt-hero__grade">{{ latest?.grade ?? '' }} {{ latest?.gradeLabel ?? '' }}</text>
                    </view>
                    <text class="bt-hero__meta">
                        {{ latest ? `最近测量 · ${latest.date} ${latest.time}` : '完成首次体测，获取健康画像' }}
                    </text>
                    <view class="bt-hero__actions">
                        <view
                            class="bt-btn bt-btn--primary"
                            hover-class="mi-tap-btn--hover"
                            :hover-stay-time="150"
                            @tap="startMeasure"
                        >
                            <image class="bt-btn__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/activity.png" mode="aspectFit" />
                            <text class="bt-btn__text">开始体测</text>
                        </view>
                        <view
                            v-if="latest"
                            class="bt-btn bt-btn--ghost"
                            hover-class="mi-tap-btn--hover"
                            :hover-stay-time="150"
                            @tap="viewLatestReport"
                        >
                            <text class="bt-btn__text">查看报告</text>
                        </view>
                    </view>
                </view>

                <view class="bt-card">
                    <text class="bt-card__title">设备状态</text>
                    <view class="bt-device">
                        <view class="bt-device__icon-wrap">
                            <image class="bt-device__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/mappin2.png" mode="aspectFit" />
                        </view>
                        <view class="bt-device__info">
                            <text class="bt-device__name">{{ device.name }}</text>
                            <text
                                class="bt-device__status"
                                :class="{ 'bt-device__status--on': device.connected }"
                            >
                                {{ deviceStatusText }}
                            </text>
                        </view>
                        <view
                            class="bt-device__dot"
                            :class="{ 'bt-device__dot--on': device.connected }"
                        ></view>
                    </view>
                </view>

                <view class="bt-card">
                    <text class="bt-card__title">快捷入口</text>
                    <view class="bt-grid">
                        <view
                            v-for="item in quickLinks"
                            :key="item.key"
                            class="bt-grid__item"
                            hover-class="mi-tap--hover"
                            :hover-stay-time="150"
                            @tap="onQuickLink(item.key)"
                        >
                            <image class="bt-grid__icon" :src="item.icon" mode="aspectFit" />
                            <text class="bt-grid__label">{{ item.label }}</text>
                        </view>
                    </view>
                </view>

                <view v-if="latest" class="bt-card">
                    <text class="bt-card__title">核心指标概览</text>
                    <view class="bt-metrics">
                        <view
                            v-for="m in previewMetrics"
                            :key="m.key"
                            class="bt-metric"
                        >
                            <text class="bt-metric__value">{{ m.value }}</text>
                            <text class="bt-metric__label">{{ m.label }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { PAGE, navigateToPage } from '@/common/constants/routes.js'
import { loadMemberStore } from '@/common/memberInfo/store.js'
import { getLatestBodyTestRecord } from '@/common/memberInfo/bodyTestStore.js'
import { subPageMixin } from '@/common/memberInfo/mixins.js'

export default {
    components: { MemberInfoSubNav },
    mixins: [subPageMixin],
    data() {
        return {
            latest: null,
            device: {},
            quickLinks: [
                { key: 'history', label: '历史记录', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/clock.png' },
                { key: 'compare', label: '历史对比', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/trendingdown.png' },
                { key: 'trend', label: '趋势分析', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/activity.png' },
                { key: 'report', label: '体测报告', icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/filetext.png' }
            ]
        }
    },
    computed: {
        deviceStatusText() {
            if (this.device.connected) {
                return `已连接 · 电量 ${this.device.battery}%`
            }
            return '未连接 · 点击开始体测进行配对'
        },
        previewMetrics() {
            if (!this.latest?.metrics) return []
            const m = this.latest.metrics
            return [
                { key: 'weight', label: '体重(kg)', value: m.weight },
                { key: 'bmi', label: 'BMI', value: m.bmi },
                { key: 'bodyFat', label: '体脂率(%)', value: m.bodyFat },
                { key: 'muscleMass', label: '肌肉量(kg)', value: m.muscleMass }
            ]
        }
    },
    onShow() {
        this.refreshFromStore()
    },
    methods: {
        refreshFromStore() {
            const store = loadMemberStore()
            this.latest = getLatestBodyTestRecord(store)
            this.device = { ...store.bodyTest.device }
        },
        startMeasure() {
            const store = loadMemberStore()
            if (store.bodyTest.device.connected) {
                navigateToPage(PAGE.BODY_TEST_MEASURING)
            } else {
                navigateToPage(PAGE.BODY_TEST_CONNECT)
            }
        },
        viewLatestReport() {
            if (!this.latest) return
            navigateToPage(`${PAGE.BODY_TEST_REPORT}?id=${this.latest.id}`)
        },
        goSettings() {
            navigateToPage(PAGE.BODY_TEST_SETTINGS)
        },
        onQuickLink(key) {
            const routes = {
                history: PAGE.BODY_TEST_HISTORY,
                compare: PAGE.BODY_TEST_COMPARE,
                trend: PAGE.BODY_TEST_TREND,
                report: this.latest
                    ? `${PAGE.BODY_TEST_REPORT}?id=${this.latest.id}`
                    : PAGE.BODY_TEST_HISTORY
            }
            navigateToPage(routes[key] || PAGE.BODY_TEST_HOME)
        }
    }
}
</script>

<style>
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
@import '@/common/style/memberInfo/member-info-component-reset.css';
@import '@/common/style/memberInfo/member-info-sub-nav.css';
@import '@/common/style/memberInfo/member-info-tap.css';
@import '@/common/style/memberInfo/pages/body-test-common.css';
</style>
