ElectronicAssistant/lib/module/record/view.dart

import 'package:electronic_assistant/base/base_page.dart';
import 'package:electronic_assistant/module/record/constants.dart';
import 'package:electronic_assistant/module/record/controller.dart';
import 'package:electronic_assistant/resource/colors.gen.dart';
import 'package:electronic_assistant/utils/expand.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:lottie/lottie.dart';

import '../../resource/assets.gen.dart';

class RecordPage extends BasePage<RecordController> {
  const RecordPage({super.key});

  @override
  bool immersive() {
    return true;
  }

  @override
  bool statusBarDarkFont() {
    return false;
  }

  @override
  Color backgroundColor() {
    return ColorName.recordBackgroundColor;
  }

  @override
  Color navigationBarColor() {
    return "#4A4F67".color;
  }

  @override
  Widget buildBody(BuildContext context) {
    return Stack(alignment: Alignment.bottomCenter, children: [
      _buildBottomGradient(),
      Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: const Icon(Icons.arrow_back_ios_new_rounded),
            color: ColorName.white,
            onPressed: () {
              controller.onBackClick();
            },
          ),
          scrolledUnderElevation: 0,
          backgroundColor: ColorName.transparent,
          systemOverlayStyle: SystemUiOverlayStyle.light,
          actions: [
            _buildAddShortcut(true),
          ],
        ),
        backgroundColor: ColorName.transparent,
        body: Flex(
          direction: Axis.vertical,
          children: [
            _buildRecordStatus(),
            const Spacer(flex: 271),
            _buildRecordAnim(),
            const Spacer(flex: 407),
            _buildRecordControl(),
          ],
        ),
      ),
      _buildAvailableTimeRemind(),
    ]);
  }

  Widget _buildAvailableTimeRemind() {
    return Obx(() {
      int? electric = controller.userInfo?.memberInfo?.electric;
      return Visibility(
        visible: electric != null &&
            electric < 12 &&
            !controller.isHideIntegrationInsufficient.value,
        child: IntrinsicHeight(
          child: Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                  margin: EdgeInsets.only(
                    left: 16.w,
                    right: 16.w,
                    bottom: 200.h,
                  ),
                  child: Stack(
                    children: [
                      Align(
                        alignment: Alignment.bottomCenter,
                        child: Container(
                          width: double.infinity,
                          height: 48.w,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10.w),
                            gradient: LinearGradient(colors: [
                              '#8671FF'.color,
                              '#3E55FF'.color,
                              '#7E80FE'.color,
                            ], stops: const [
                              0.0,
                              0.7,
                              1
                            ]),
                          ),
                          child: Stack(
                            children: [
                              Align(
                                alignment: const Alignment(-0.05, -0.15),
                                child: Assets
                                    .images.iconRecordIntegrationInsufficient
                                    .image(width: 153.w, height: 20.w),
                              ),
                              Align(
                                  alignment: Alignment.centerRight,
                                  child: GestureDetector(
                                    onTap: () =>
                                        controller.onAvailableTimeClick(),
                                    child: Container(
                                        padding: EdgeInsets.symmetric(
                                            horizontal: 10.w, vertical: 4.w),
                                        decoration: BoxDecoration(
                                          gradient: RadialGradient(
                                              center: Alignment.centerRight,
                                              colors: [
                                                "#E7F2FF".toColor(),
                                                "#FFFFFF".toColor(),
                                                "#F9E8FF".toColor()
                                              ],
                                              radius: 2),
                                          borderRadius:
                                              BorderRadius.circular(100.w),
                                        ),
                                        margin: EdgeInsets.only(right: 12.w),
                                        child: Assets.images.iconRecordRecharge
                                            .image(width: 39.w, height: 19.w)),
                                  ))
                            ],
                          ),
                        ),
                      ),
                      Assets.images.iconRecordAvailableTime
                          .image(width: 88.w, height: 77.w),
                      Align(
                        alignment: Alignment.topRight,
                        child: GestureDetector(
                          onTap: () {
                            controller.onCloseAvailableTimeClick();
                          },
                          child: Assets
                              .images.iconRecordIntegrationInsufficientClose
                              .image(width: 18.w, height: 18.w),
                        ),
                      )
                    ],
                  ))),
        ),
      );
    });
  }

  Widget _buildAddShortcut(bool visible) {
    return GestureDetector(
      onTap: () {
        controller.addShortcut();
      },
      child: Visibility(
        visible: visible,
        child: Row(
          children: [
            Image(
                image: Assets.images.iconRecordAddShortcut.provider(),
                width: 24.w,
                height: 24.w),
            Padding(
              padding: EdgeInsets.only(left: 8.w, right: 16.w),
              child: Text(
                '添加到桌面',
                style: TextStyle(color: ColorName.white, fontSize: 14.w),
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget _buildRecordStatus() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      margin: EdgeInsets.only(top: 20.w),
      child: Row(
        children: [
          Container(
            margin: EdgeInsets.only(right: 8.w),
            child: Image(
                image: Assets.images.iconRecordLogo.provider(),
                width: 45.w,
                height: 48.w),
          ),
          Obx(() {
            return Text(
              controller.currentStatus.value.desc,
              style: TextStyle(color: ColorName.white, fontSize: 17.w),
            );
          }),
        ],
      ),
    );
  }

  Widget _buildRecordAnim() {
    return Obx(() {
      return AnimatedOpacity(
        opacity:
            controller.currentStatus.value == RecordStatus.recording ? 1 : 0,
        duration: const Duration(milliseconds: 520),
        child: SizedBox(
            width: 360.w,
            height: 180.w,
            child: Lottie.asset(Assets.anim.animRecordingLottie)),
      );
    });
  }

  Widget _buildRecordControl() {
    return Stack(
      alignment: Alignment.bottomCenter,
      children: [
        Container(
          padding: EdgeInsets.symmetric(horizontal: 24.w, vertical: 30.w),
          decoration: BoxDecoration(
            color: "#4A4F67".color,
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(40.w),
                topRight: Radius.circular(40.w)),
          ),
          child: Row(
            children: [
              GestureDetector(
                onTap: controller.onCancelClick,
                child: Obx(() {
                  return Image(
                      image: controller.currentStatus.value.cancelButtonImage,
                      width: 56.w,
                      height: 56.w);
                }),
              ),
              const Spacer(),
              GestureDetector(
                onTap: controller.onSaveClick,
                child: Obx(() {
                  return Image(
                      image: controller.currentStatus.value.saveButtonImage,
                      width: 56.w,
                      height: 56.w);
                }),
              ),
            ],
          ),
        ),
        Column(
          children: [
            GestureDetector(
                onTap: () {
                  controller.onActionClick();
                },
                child: Obx(
                  () => Image(
                      image: controller.currentStatus.value.actionButtonImage,
                      width: 92.w,
                      height: 92.w),
                )),
            Padding(
              padding: EdgeInsets.only(top: 10.w, bottom: 35.w),
              child: Obx(() => Text(
                    formatDuration(controller.currentDuration.value),
                    style: TextStyle(
                      color: ColorName.white,
                      fontSize: 16.w,
                    ),
                  )),
            )
          ],
        )
      ],
    );
  }

  Widget _buildBottomGradient() {
    return Container(
      height: 0.38.sh,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            "#006177F2".color,
            "#806177F2".color,
          ],
        ),
      ),
    );
  }

  String formatDuration(double value) {
    int hour = (value / 3600).floor();
    int minute = ((value - hour * 3600) / 60).floor();
    int second = (value - hour * 3600 - minute * 60).floor();
    return '${hour.toString().padLeft(2, '0')}:${minute.toString().padLeft(2, '0')}:${second.toString().padLeft(2, '0')}';
  }
}