lib/pages/reading/reading_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:wow_english/common/extension/string_extension.dart';
import 'package:wow_english/pages/reading/widgets/ReadingModeType.dart';
import 'package:wow_english/pages/reading/widgets/reading_dialog_widget.dart';
import 'package:wow_english/route/route.dart';
import '../../common/core/app_consts.dart';
import '../../common/core/user_util.dart';
import '../../common/widgets/record_playback_widget.dart';
import '../../common/widgets/recorder_widget.dart';
import '../../common/widgets/speaker_widget.dart';
import '../../models/course_process_entity.dart';
import '../../utils/log_util.dart';
import 'bloc/reading_bloc.dart';
///绘本页
class ReadingPage extends StatelessWidget {
  const ReadingPage({super.key, this.courseLessonId});
  final String? courseLessonId;
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) =>
          ReadingPageBloc(context, PageController(), courseLessonId ?? '')
            ..add(InitBlocEvent())
            ..add(RequestDataEvent())
            ..add(XSVoiceInitEvent({
              'appKey': AppConsts.xsAppKey,
              'service': AppConsts.xsAppService,
              'secretKey': AppConsts.xsAppSecretKey,
              'userId': UserUtil.getUser()!.id.toString(),
            })),
      child: _ReadingPage(),
    );
  }
}
class _ReadingPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocListener<ReadingPageBloc, ReadingPageState>(
      listener: (context, state) {
        Log.d('reading BlocListener=$state');
        if (state is RequestDataState) {
          ///刷新页面
          context.read<ReadingPageBloc>().add(CurrentPageIndexChangeEvent(0));
        }
        if (state is FeedbackState) {
          showDialog<ReadingDialog>(
              context: context,
              barrierDismissible: false,
              builder: (context) {
                return const ReadingDialog();
              });
        }
      },
      child: _readingPageView(),
    );
  }
  Widget _readingPageView() =>
      BlocBuilder<ReadingPageBloc, ReadingPageState>(builder: (context, state) {
        final bloc = BlocProvider.of<ReadingPageBloc>(context);
        return Container(
          color: Colors.white,
          child: Stack(
            children: [
              PageView.builder(
                  itemCount: bloc.dataCount(),
                  controller: bloc.pageController,
                  onPageChanged: (int index) {
                    bloc.add(CurrentPageIndexChangeEvent(index));
                  },
                  itemBuilder: (context, int index) {
                    return _readingPagerItem(bloc.entity!.readings![index]);
                  }),
              Container(
                color: Colors.transparent,
                height: kToolbarHeight,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Padding(
                      padding:
                          EdgeInsets.only(left: ScreenUtil().bottomBarHeight),
                      child: IconButton(
                          onPressed: () {
                            popPage(data: {
                              'currentStep': bloc.currentPage,
                              'courseLessonId': bloc.courseLessonId,
                              'isCompleted': bloc.isLastPage(),
                            });
                          },
                          icon: Image.asset(
                            'back_around'.assetPng,
                            width: 40.w,
                            height: 40.h,
                          )),
                    ),
                    Container(
                      height: 32.h,
                      padding: EdgeInsets.symmetric(horizontal: 27.w),
                      decoration: BoxDecoration(
                        color: const Color(0xFF00B6F1),
                        borderRadius: BorderRadius.circular(15.r),
                        border: Border.all(
                          width: 1.0,
                          color: const Color(0xFF140C10),
                        ),
                      ),
                      alignment: Alignment.center,
                      child: Text(
                        '${bloc.currentPage}/${bloc.dataCount()}',
                        style: TextStyle(fontSize: 20.sp, color: Colors.white),
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.only(
                          right: 15.w + ScreenUtil().bottomBarHeight),
                      child: GestureDetector(
                        onTap: () {
                          bloc.add(CurrentModeChangeEvent());
                        },
                        child: SizedBox(
                          height: 40.h,
                          child: Container(
                            decoration: BoxDecoration(
                              image: DecorationImage(
                                  image: AssetImage('bg_reading_mode'.assetPng),
                                  fit: BoxFit.fill),
                            ),
                            alignment: Alignment.center,
                            padding: EdgeInsets.symmetric(horizontal: 10.w),
                            child: Text(
                              bloc.currentMode == ReadingModeType.auto
                                  ? '设为手动'
                                  : '设为自动',
                              style: TextStyle(fontSize: 14.5.sp),
                            ),
                          ),
                        ),
                      ),
                    ),
                    // ScreenUtil().bottomBarHeight.horizontalSpace,
                  ],
                ),
              ),
              Align(
                alignment: Alignment.bottomLeft,
                child: Container(
                  color: const Color(0x80FFFFFF),
                  child: Row(
                    children: [
                      5.horizontalSpace,
                      SpeakerWidget(
                        isPlaying:
                            bloc.voicePlayState == VoicePlayState.playing &&
                                bloc.isOriginAudioPlaying,
                        // 控制动画播放
                        isClickable: !bloc.isRecording,
                        // 控制是否可点击
                        width: 42.w,
                        height: 42.w,
                        onTap: () {
                          bloc.add(PlayOriginalAudioEvent(null));
                        },
                      ),
                      SizedBox(
                        width: 10.w,
                      ),
                      Expanded(
                          child: Text(
                        bloc.readingContent(),
                        style: TextStyle(
                            color: const Color(0xFF333333), fontSize: 21.sp),
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                      )),
                      SizedBox(
                        width: 10.w,
                      ),
                      RecorderWidget(
                        isPlaying: bloc.isRecording,
                        width: 60.w,
                        height: 60.w,
                        onTap: () {
                          if (bloc.isRecording) {
                            bloc.add(XSVoiceStopEvent());
                          } else {
                            bloc.add(XSVoiceStartEvent(bloc.readingContent(),
                                '0', UserUtil.getUser()?.id.toString()));
                          }
                        },
                      ),
                      SizedBox(
                        width: 10.w,
                      ),
                      RecorderPlaybackWidget(
                        isClickable: !bloc.isRecording && bloc.currentPageData()?.recordUrl != null,
                        isPlaying: bloc.isRecordAudioPlaying,
                        width: 42.w,
                        height: 42.w,
                        onTap: () {
                          bloc.add(PlayRecordAudioEvent());
                        },
                      )
                    ],
                  ),
                ),
              )
            ],
          ),
        );
      });
  Widget _readingPagerItem(CourseProcessReadings readings) =>
      BlocBuilder<ReadingPageBloc, ReadingPageState>(builder: (context, state) {
        return Stack(
          children: [
            Positioned.fill(
              child: Image.network(readings.picUrl ?? '', fit: BoxFit.cover),
            ),
          ],
        );
      });
}