deepvoice_client/lib/modules/meeting/views/meeting_details_view.dart

import 'package:common_utils/common_utils.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:lottie/lottie.dart';

import '../../../core/theme/app_colors.dart';
import '../../../routes/app_routes.dart';
import '../controllers/meeting_details_controller.dart';

class MeetingDetailsView extends GetView<MeetingDetailsController> {
  const MeetingDetailsView({super.key});

  @override
  Widget build(BuildContext context) {
    final isDarkMode = Theme.of(context).brightness == Brightness.dark;

    return Scaffold(
      backgroundColor: isDarkMode ? Colors.black : Colors.grey[50],
      appBar: _buildAppBar(isDarkMode),
      body: Obx(() => !controller.isLoading.value
          ? _buildBody(isDarkMode)
          : const SizedBox()),
    );
  }

  // 构建应用栏
  PreferredSizeWidget _buildAppBar(bool isDarkMode) {
    return AppBar(
      backgroundColor: isDarkMode ? Colors.black : Colors.white,
      elevation: 0.5,
      leading: IconButton(
        icon: Icon(
          Icons.arrow_back_ios,
          color: isDarkMode ? Colors.white : Colors.black,
          size: 20.sp,
        ),
        onPressed: () => Get.back(),
      ),
      title: Text(
        '录音详情',
        style: TextStyle(
          fontSize: 17.sp,
          fontWeight: FontWeight.w600,
          color: isDarkMode ? Colors.white : Colors.black,
        ),
      ),
      centerTitle: true,
    );
  }

  // 构建主体内容
  Widget _buildBody(bool isDarkMode) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 10.w),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            controller.meetingData.value.title,
            style: TextStyle(
              color: isDarkMode ? Colors.white : Colors.black87,
              fontSize: 17.sp,
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(vertical: 5.w),
            child: Text(
              DateUtil.formatDateMs(
                controller.meetingData.value.creationtime,
                format: DateFormats.y_mo_d_h_m,
              ),
              style: TextStyle(
                color: isDarkMode ? Colors.grey[400] : Colors.grey[500],
                fontSize: 14.sp,
              ),
            ),
          ),
          _audioWave(isDarkMode),
          _recordContent(isDarkMode),
          _bottomButton(isDarkMode),
        ],
      ),
    );
  }

  // 音波
  Widget _audioWave(bool isDarkMode) {
    return Container(
      padding: EdgeInsets.only(bottom: 10.w),
      margin: EdgeInsets.symmetric(vertical: 5.w),
      decoration: BoxDecoration(
        color: isDarkMode ? Colors.white.withOpacity(0.05) : Colors.white,
        borderRadius: BorderRadius.circular(12.w),
        boxShadow: [
          BoxShadow(
            color: isDarkMode
                ? Colors.black.withOpacity(0.2)
                : Colors.black.withOpacity(0.05),
            blurRadius: 10,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        children: [
          SizedBox(
            height: 70.w,
            child: Row(
              children: [
                Expanded(
                  child: Lottie.asset(
                    'assets/lottie/audio_wave.json',
                    controller: controller.lottieController,
                    fit: BoxFit.fill,
                    onLoaded: (composition) {
                      controller.lottieController.duration =
                          composition.duration;
                    },
                  ),
                ),
                Expanded(
                  child: Lottie.asset(
                    'assets/lottie/audio_wave.json',
                    controller: controller.lottieController,
                    fit: BoxFit.fill,
                  ),
                ),
                Expanded(
                  child: Lottie.asset(
                    'assets/lottie/audio_wave.json',
                    controller: controller.lottieController,
                    fit: BoxFit.fill,
                  ),
                ),
              ],
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              StreamBuilder<Duration>(
                stream: controller.audioPlayer.positionStream,
                builder: (context, snapshot) {
                  final position = snapshot.data ?? Duration.zero;
                  return Text(
                    DateUtil.formatDateMs(
                      position.inMilliseconds,
                      format: 'HH:mm:ss',
                      isUtc: true,
                    ),
                    style: TextStyle(
                      color: isDarkMode ? Colors.grey[400] : Colors.grey[500],
                      fontSize: 12.sp,
                    ),
                  );
                },
              ),
              GestureDetector(
                onTap: controller.start,
                child: Container(
                  width: 30.w,
                  height: 30.w,
                  decoration: BoxDecoration(
                    color: isDarkMode ? AppColors.primary : Colors.blue,
                    borderRadius: BorderRadius.circular(
                      12.w,
                    ),
                  ),
                  child: Icon(
                    controller.isPlay.value ? Icons.pause : Icons.play_arrow,
                    color: Colors.white,
                    size: 25.w,
                  ),
                ),
              ),
              StreamBuilder<Duration?>(
                stream: controller.audioPlayer.durationStream,
                builder: (context, snapshot) {
                  final duration = snapshot.data ?? Duration.zero;
                  controller.seconds = duration.inSeconds;
                  return Text(
                    DateUtil.formatDateMs(
                      duration.inMilliseconds,
                      format: 'HH:mm:ss',
                      isUtc: true,
                    ),
                    style: TextStyle(
                      color: isDarkMode ? Colors.grey[400] : Colors.grey[500],
                      fontSize: 12.sp,
                    ),
                  );
                },
              ),
            ],
          ),
        ],
      ),
    );
  }

  // 记录内容
  Widget _recordContent(bool isDarkMode) {
    return Expanded(
      child: Container(
        width: double.infinity,
        padding: EdgeInsets.all(10.w),
        margin: EdgeInsets.symmetric(vertical: 5.w),
        decoration: BoxDecoration(
          color: isDarkMode ? Colors.white.withOpacity(0.05) : Colors.white,
          borderRadius: BorderRadius.circular(12.w),
          boxShadow: [
            BoxShadow(
              color: isDarkMode
                  ? Colors.black.withOpacity(0.2)
                  : Colors.black.withOpacity(0.05),
              blurRadius: 10,
              offset: const Offset(0, 2),
            ),
          ],
        ),
        child: Align(
          alignment: Alignment.topLeft,
          child: SingleChildScrollView(
            reverse: true,
            child: Text(
              controller.dataDetails.value.content,
            ),
          ),
        ),
      ),
    );
  }

  // 底部按钮
  Widget _bottomButton(bool isDarkMode) {
    return Container(
      padding: EdgeInsets.only(top: 40.w, bottom: 30.w),
      alignment: Alignment.center,
      child: GestureDetector(
        onTap: () {
          Get.toNamed(Routes.meetingEdit, arguments: {
            'id': controller.id,
          });
        },
        child: Container(
          width: 130.w,
          height: 48.w,
          decoration: BoxDecoration(
            color: isDarkMode ? AppColors.primary : Colors.blue,
            borderRadius: BorderRadius.circular(12.w),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                Icons.edit_calendar,
                color: Colors.white,
                size: 20.w,
              ),
              5.horizontalSpace,
              Text(
                '编辑',
                style: TextStyle(color: Colors.white, fontSize: 16.sp),
              ),
            ],
          ),
        ),
      ),
    );
  }
}