<template>
    <view class="scroll-container theme-light">
        <view class="bt-page">
            <MemberInfoSubNav title="训练报告" @back="goBack" />
            <view class="mi-mod-tabs">
                <view
                    v-for="p in periods"
                    :key="p.key"
                    class="bt-tab"
                    :class="{ 'bt-tab--active': period === p.key }"
                    @tap="switchPeriod(p.key)"
                >
                    <text class="bt-tab__text">{{ p.label }}</text>
                </view>
            </view>
            <view class="bt-page__body">
                <view class="bt-metrics">
                    <view class="bt-metric"><text class="bt-metric__value">{{ report.summary.sessions }}</text><text class="bt-metric__label">完成课程</text></view>
                    <view class="bt-metric"><text class="bt-metric__value">{{ report.summary.hours }}</text><text class="bt-metric__label">运动时长(h)</text></view>
                    <view class="bt-metric"><text class="bt-metric__value">{{ report.summary.calories }}</text><text class="bt-metric__label">消耗(kcal)</text></view>
                    <view class="bt-metric"><text class="bt-metric__value">{{ report.summary.visits }}</text><text class="bt-metric__label">到店次数</text></view>
                </view>

                <view class="bt-card">
                    <text class="bt-card__title">运动时长趋势</text>
                    <BodyTestTrendChart :points="report.trendHours" unit="h" :width="chartWidth" :height="150" />
                </view>
                <view class="bt-card">
                    <text class="bt-card__title">消耗卡路里趋势</text>
                    <BodyTestTrendChart :points="report.trendCalories" unit="" :width="chartWidth" :height="150" />
                </view>

                <view class="mi-mod-tabs">
                    <view
                        v-for="t in typeFilters"
                        :key="t.key"
                        class="bt-tab"
                        :class="{ 'bt-tab--active': typeFilter === t.key }"
                        @tap="typeFilter = t.key"
                    >
                        <text class="bt-tab__text">{{ t.label }}</text>
                    </view>
                </view>

                <view class="bt-card">
                    <text class="bt-card__title">课程完成列表</text>
                    <view
                        v-for="item in sessions"
                        :key="item.id"
                        class="mi-mod-session"
                        hover-class="mi-tap-row--hover"
                        @tap="goSession(item)"
                    >
                        <view class="mi-mod-session__head">
                            <text class="mi-mod-session__title">{{ item.title }}</text>
                            <view class="mi-mod-session__tag" :class="'mi-mod-session__tag--' + item.type">
                                <text class="mi-mod-session__tag-text">{{ item.typeLabel }}</text>
                            </view>
                        </view>
                        <text class="mi-mod-session__meta">{{ item.date }} · {{ item.time }} · {{ item.coach }}</text>
                        <view class="mi-mod-session__footer">
                            <text class="mi-mod-session__stat">{{ item.duration }}</text>
                            <text class="mi-mod-session__stat">{{ item.calories }} kcal</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import BodyTestTrendChart from '@/components/memberInfo/BodyTestTrendChart.vue'
import { PAGE, navigateToPage, backToMemberCenter } from '@/common/constants/routes.js'
import { getTrainingReportData, filterTrainingSessions } from '@/common/memberInfo/moduleStore.js'
import { loadMemberStore } from '@/common/memberInfo/store.js'

const period = ref('week')
const periods = ref([
    { key: 'week', label: '本周' },
    { key: 'month', label: '本月' }
])
const typeFilter = ref('all')
const typeFilters = ref([
    { key: 'all', label: '全部' },
    { key: 'group', label: '团课' },
    { key: 'private', label: '私教' },
    { key: 'free', label: '自由' }
])
const report = ref({ summary: {}, trendHours: [], trendCalories: [], sessions: [] })
const chartWidth = ref(300)

const sessions = computed(() => {
    return filterTrainingSessions(report.value.sessions, typeFilter.value)
})

function switchPeriod(p) {
    period.value = p
    refresh()
}

function refresh() {
    const store = loadMemberStore()
    report.value = getTrainingReportData(store, period.value)
}

function goBack() {
    backToMemberCenter()
}

function goSession(item) {
    navigateToPage(`${PAGE.TRAIN_SESSION_DETAIL}?id=${item.id}`)
}

// Initialize
chartWidth.value = uni.getSystemInfoSync().windowWidth - 64
refresh()
</script>

<style lang="scss">
@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';
@import '@/common/style/memberInfo/pages/module-pages-common.css';
</style>
