import 'package:fl_chart/fl_chart.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:get_storage/get_storage.dart';
import 'package:percent_indicator/percent_indicator.dart';
import 'package:making_school_asignment_app/common/utils/enum_untils.dart';
import 'package:making_school_asignment_app/common/utils/utils.dart';
import 'package:making_school_asignment_app/page/global_widget/MyEmptyWidget.dart';
import 'package:making_school_asignment_app/page/global_widget/ReturnToHomepage.dart';
import 'package:making_school_asignment_app/page/home_page/children/quick_data_check/widget/kgt_zgt_table.dart';
import 'package:making_school_asignment_app/page/home_page/children/quick_data_check/widget/quick_data_check_bottom.dart';
import 'package:making_school_asignment_app/page/home_page/children/quick_data_check/widget/report_table.dart';

import 'quick_data_check_logic.dart';

class QuickDataCheckPage extends StatefulWidget {
  const QuickDataCheckPage({Key? key}) : super(key: key);

  @override
  State<QuickDataCheckPage> createState() => _QuickDataCheckPageState();
}

class _QuickDataCheckPageState extends State<QuickDataCheckPage> {
  final logic = Get.find<QuickDataCheckLogic>();
  final state = Get.find<QuickDataCheckLogic>().state;

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion(
      value: const SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        systemNavigationBarIconBrightness: Brightness.light,
        statusBarIconBrightness: Brightness.light,
        statusBarBrightness: Brightness.dark,
      ),
      child: Container(
        padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
        height: MediaQuery.of(context).size.height,
        decoration: const BoxDecoration(
            gradient: LinearGradient(begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [
          Color(0xFF8C68FF),
          Color(0xFFF5F5F5),
        ], stops: [
          0.09,
          0.3
        ])),
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                IconButton(
                  icon: const Icon(Icons.arrow_back_ios, color: Colors.white),
                  onPressed: () => Get.back(),
                ),
                Expanded(
                    child: Padding(
                  padding: EdgeInsets.only(right: 8.r),
                  child: Center(
                      child: Text(
                    '数据快查',
                    style: TextStyle(fontSize: 14.sp, color: Colors.white),
                  )),
                )),
                const ReturnToHomepage(
                  bgColor: Colors.white,
                ),
              ],
            ),
            SizedBox(height: 10.r),
            Obx(() {
              if (state.hasData.value) {
                return Expanded(
                    child: SingleChildScrollView(
                  child: Column(
                    children: [
                      Padding(
                        padding: EdgeInsets.only(left: 14.r, top: 2.r),
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Image.asset(
                              'assets/images/job_report_class_icon.png',
                              width: 22.r,
                              height: 22.r,
                            ),
                            SizedBox(
                              width: 6.r,
                            ),
                            Text(
                              '${EnumUtils.formatGrade(state.grade)}${state.className.value}',
                              style: TextStyle(fontSize: 14.r, color: Colors.white),
                            ),
                          ],
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(vertical: 15.r, horizontal: 15.r),
                        margin: EdgeInsets.symmetric(vertical: 10.r, horizontal: 14.r),
                        decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(6.r))),
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          mainAxisAlignment: MainAxisAlignment.start,

                          children: [

                         Expanded(child: Column(
                           // crossAxisAlignment: CrossAxisAlignment.start,
                           children: [

                             Row(
                               mainAxisAlignment: MainAxisAlignment.center,
                               children: [
                                 Container(
                                   width: 12.r,
                                   height: 12.r,
                                   decoration: BoxDecoration(color: const Color(0xFF4CC793), borderRadius: BorderRadius.all(Radius.circular(7.r))),
                                 ),
                                 SizedBox(
                                   width: 6.r,
                                 ),
                                 Text(
                                   '已提交',
                                   style: TextStyle(fontSize: 12.sp, color: Color(0xFF333333)),
                                 ),
                                 SizedBox(
                                   width: 35.r,
                                 ),
                                 Container(
                                   width: 12.r,
                                   height: 12.r,
                                   decoration: BoxDecoration(color: const Color(0xFF6888FD), borderRadius: BorderRadius.all(Radius.circular(7.r))),
                                 ),
                                 SizedBox(
                                   width: 6.r,
                                 ),
                                 Text(
                                   '未提交',
                                   style: TextStyle(fontSize: 12.sp, color: const Color(0xFF333333)),
                                 )
                               ],
                             ),
                             SizedBox(
                               height: 2.r,
                             ),
                             //环形图
                             SizedBox(
                               height: MediaQuery.of(context).size.width * 0.3,
                               // width: MediaQuery.of(context).size.width * 0.08,
                               child: PieChart(
                                 PieChartData(
                                   borderData: FlBorderData(show: false),
                                   sectionsSpace: 0,
                                   centerSpaceRadius: MediaQuery.of(context).size.width * 0.04,
                                   sections: [
                                     PieChartSectionData(
                                       color: const Color(0xFF4CC793),
                                       value: state.dataCount.studentSubmitCount! / state.dataCount.studentCount! * 100,
                                       radius: MediaQuery.of(context).size.width * 0.06 + 5,
                                       title: '${state.dataCount.studentSubmitCount}人',
                                       titleStyle: TextStyle(
                                         fontSize: 14.sp,
                                         color: Colors.white,
                                       ),
                                     ),
                                     PieChartSectionData(
                                       color: const Color(0xFF6888FD),
                                       value:
                                       (state.dataCount.studentCount! - state.dataCount.studentSubmitCount!) / state.dataCount.studentCount! * 100,
                                       radius: MediaQuery.of(context).size.width * 0.06,
                                       title: '${state.dataCount.studentCount! - state.dataCount.studentSubmitCount!}人',
                                       titleStyle: TextStyle(
                                         fontSize: 14.sp,
                                         color: Colors.white,
                                       ),
                                     ),
                                   ],
                                 ),
                               ),
                             ),
                           ],
                         )),
                            SizedBox(width: 20.r,),
                            Expanded(child: Column(

                              children: [
                              //  客观进度条
                              Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Text(
                                    '客观题答题进度',
                                    style: TextStyle(fontSize: 10.sp, color: const Color(0xFF8B8B8B)),
                                  ),
                                  Text(
                                    '${state.dataCount.kgtAnswerRate!.toStringAsFixed(0)}%',
                                    style: TextStyle(fontSize: 10.sp, color: const Color(0xFF333333)),
                                  ),
                                ],
                              ),
                              SizedBox(height: 6.r),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Expanded(
                                      flex: 10,
                                      child: LinearPercentIndicator(
                                        padding: EdgeInsets.zero,
                                        animation: true,
                                        lineHeight: 9.h,
                                        animationDuration: 2500,
                                        percent: state.dataCount.kgtAnswerRate! / 100,
                                        progressColor: const Color(0xFFB2DA93),
                                        backgroundColor: const Color(0xFFEAEAEA),
                                        barRadius: Radius.circular(10.r),
                                      )),
                                ],
                              ),
                              SizedBox(height: 20.r),
                              //  主观进度条
                              Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Text(
                                    '主观题答题进度',
                                    style: TextStyle(fontSize: 10.sp, color: const Color(0xFF8B8B8B)),
                                  ),
                                  Text(
                                    '${state.dataCount.zgtAnswerRate!.toStringAsFixed(0)}%',
                                    style: TextStyle(fontSize: 10.sp, color: const Color(0xFF333333)),
                                  ),
                                ],
                              ),
                              SizedBox(height: 6.r),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Expanded(
                                      flex: 10,
                                      child: LinearPercentIndicator(
                                        padding: EdgeInsets.zero,
                                        animation: true,
                                        lineHeight: 9.h,
                                        animationDuration: 2500,
                                        percent: state.dataCount.zgtAnswerRate! / 100,
                                        progressColor: const Color(0xFFB2DA93),
                                        backgroundColor: const Color(0xFFEAEAEA),
                                        barRadius: Radius.circular(10.r),
                                      )),
                                ],
                              ),

                            ],))

                          ],
                        ),
                      ),
                      QuickDataCheckBottom(
                        jobData: state.studentList.value,
                        jobId: state.homeworkId.value,
                        kgCount: state.dataCount.kgtDtlCount!,
                        zgCount: state.dataCount.zgtDtlCount!,
                        subject:state.subject,
                      ),
                      //客观题、主观题
                      KgtZgtTable(
                          studentCount: state.dataCount.studentCount!,
                          homeworkId: state.homeworkId.value,
                          kgReport: state.kgReport,
                          zgReport: state.zgReport,
                          kgtOkRate: state.dataCount.kgtOkRate!.toStringAsFixed(0),
                          kgtCorrectRate: state.dataCount.kgtCorrectRate!.toStringAsFixed(0),
                          zgtOkRate: state.dataCount.zgtOkRate!.toStringAsFixed(0),
                          zgtCorrectRate: state.dataCount.zgtCorrectRate!.toStringAsFixed(0),
                          subject:state.subject),
                    ],
                  ),
                ));
              } else {
                return Padding(padding: EdgeInsets.only(top: MediaQuery.of(context).size.height / 2 - 200.r), child: const MyEmptyWidget());
              }
            })
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    Get.delete<QuickDataCheckLogic>();
    super.dispose();
  }
}
