<template>
    <view class="scroll-container theme-light">
        <view class="bt-page" v-if="course">
            <MemberInfoSubNav title="线上课程" @back="onBack" />
            <image class="mi-detail-hero" :src="course.cover" mode="aspectFill" />
            <view class="bt-page__body">
                <view class="bt-card">
                    <text class="bt-card__title">{{ course.title }}</text>
                    <text class="bt-card__desc">时长 {{ course.duration }} · 进度 {{ course.progress }}%</text>
                    <view class="mi-mod-course-card__progress" style="margin-top:12px;">
                        <view class="mi-mod-course-card__progress-bar">
                            <view class="mi-mod-course-card__progress-fill" :style="{ width: course.progress + '%' }"></view>
                        </view>
                    </view>
                </view>
                <view class="bt-card">
                    <text class="bt-card__title">视频播放</text>
                    <view class="mi-online-player">
                        <image class="mi-online-player__play" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/play.png" mode="aspectFit" />
                        <text class="mi-online-player__hint">点击播放（支持倍速与拖拽）</text>
                    </view>
                    <view class="mi-online-controls">
                        <text class="mi-online-controls__btn" @tap="seek(-10)">-10s</text>
                        <text class="mi-online-controls__btn" @tap="togglePlay">{{ playing ? '暂停' : '播放' }}</text>
                        <text class="mi-online-controls__btn" @tap="seek(10)">+10s</text>
                        <text class="mi-online-controls__btn" @tap="changeSpeed">倍速 {{ speed }}x</text>
                    </view>
                </view>
                <view class="bt-card">
                    <text class="bt-card__title">课程目录</text>
                    <view v-for="ch in course.chapters" :key="ch.id" class="mi-online-chapter">
                        <text class="mi-online-chapter__title">{{ ch.title }}</text>
                        <text class="mi-online-chapter__meta">{{ ch.duration }} · {{ ch.done ? '已学完' : '未学习' }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { PAGE, goBackOrTab } from '@/common/constants/routes.js'
import { loadMemberStore, persistMemberStore } from '@/common/memberInfo/store.js'
import { getOnlineCourseById, updateOnlineProgress } from '@/common/memberInfo/moduleStore.js'

export default {
    components: { MemberInfoSubNav },
    data() {
        return { course: null, playing: false, speed: 1 }
    },
    onLoad(options) {
        this.course = getOnlineCourseById(loadMemberStore(), options?.id)
    },
    methods: {
        onBack() { goBackOrTab(PAGE.MY_COURSES) },
        togglePlay() {
            this.playing = !this.playing
            if (this.playing && this.course.progress < 100) {
                const store = loadMemberStore()
                updateOnlineProgress(store, this.course.id, Math.min(100, this.course.progress + 5))
                persistMemberStore(store)
                this.course.progress = Math.min(100, this.course.progress + 5)
            }
        },
        seek(sec) { uni.showToast({ title: `跳转 ${sec > 0 ? '+' : ''}${sec}s`, icon: 'none' }) },
        changeSpeed() {
            const speeds = [1, 1.25, 1.5, 2]
            const idx = (speeds.indexOf(this.speed) + 1) % speeds.length
            this.speed = speeds[idx]
        }
    }
}
</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/pages/body-test-common.css';
@import '@/common/style/memberInfo/pages/module-pages-common.css';

.mi-online-player {
    height: 180px;
    border-radius: 12px;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mi-online-player__play { width: 48px; height: 48px; }
.mi-online-player__hint { font-size: 12px; color: rgba(255,255,255,0.7); }

.mi-online-controls {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 12px;
}

.mi-online-controls__btn {
    font-size: 12px;
    color: var(--primary-deep, #1A4A6F);
    font-weight: 600;
}

.mi-online-chapter {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light, #E9EDF2);
}

.mi-online-chapter__title { font-size: 14px; color: var(--text-dark, #1E2A3A); display: block; }
.mi-online-chapter__meta { font-size: 11px; color: var(--text-muted, #5E6F8D); }
</style>
