<template>
    <view class="scroll-container theme-light">
        <view class="bt-page">
            <MemberInfoSubNav title="课程评价" @back="onBack" />
            <view class="bt-page__body">
                <view class="bt-card">
                    <text class="bt-card__title">{{ title }}</text>
                    <text class="bt-card__desc">请为本次课程打分并填写评价</text>
                </view>
                <view class="bt-card">
                    <text class="bt-card__title">评分</text>
                    <view class="mi-eval-stars">
                        <text
                            v-for="n in 5"
                            :key="n"
                            class="mi-eval-star"
                            :class="{ 'mi-eval-star--on': n <= score }"
                            @tap="score = n"
                        >★</text>
                    </view>
                </view>
                <view class="bt-card">
                    <text class="bt-card__title">评价内容</text>
                    <textarea
                        v-model="comment"
                        class="mi-eval-textarea"
                        placeholder="分享您的上课体验…"
                        maxlength="200"
                    />
                </view>
                <view class="bt-footer-actions">
                    <view class="bt-btn bt-btn--primary" hover-class="mi-tap-btn--hover" @tap="submit">
                        <text class="bt-btn__text">提交评价</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { PAGE, goBackOrTab } from '@/common/constants/routes.js'

export default {
    components: { MemberInfoSubNav },
    data() {
        return { title: '', score: 5, comment: '' }
    },
    onLoad(options) {
        this.title = decodeURIComponent(options?.title || '课程评价')
    },
    methods: {
        onBack() { goBackOrTab(PAGE.MY_COURSES) },
        submit() {
            if (!this.comment.trim()) {
                uni.showToast({ title: '请填写评价', icon: 'none' })
                return
            }
            uni.showToast({ title: '评价已提交', icon: 'success' })
            setTimeout(() => goBackOrTab(PAGE.MY_COURSES), 800)
        }
    }
}
</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-sub-nav.css';
@import '@/common/style/memberInfo/pages/body-test-common.css';

.mi-eval-stars { display: flex; flex-direction: row; gap: 8px; margin-top: 8px; }
.mi-eval-star { font-size: 32px; color: #E9EDF2; }
.mi-eval-star--on { color: #FF6B35; }
.mi-eval-textarea {
    width: 100%;
    min-height: 120px;
    margin-top: 8px;
    padding: 12px;
    border-radius: 12px;
    background: var(--bg-gray, #F2F5F9);
    font-size: 14px;
    box-sizing: border-box;
}
.bt-footer-actions .bt-btn { flex: 1; }
</style>
