import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:making_school_asignment_app/common/job/student_history.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/student_work_detail/widget/job_condition_filter.dart';
import 'package:making_school_asignment_app/page/home_page/children/student_work_detail/widget/line_chart.dart';
import 'package:making_school_asignment_app/page/home_page/widget/progress_bar.dart';
import 'package:making_school_asignment_app/routes/app_pages.dart';
import 'package:syncfusion_flutter_datepicker/datepicker.dart';

import 'student_work_detail_logic.dart';

class StudentWorkDetailPage extends StatefulWidget {
  const StudentWorkDetailPage({super.key});

  @override
  State<StudentWorkDetailPage> createState() => _StudentWorkDetailPageState();
}

class _StudentWorkDetailPageState extends State<StudentWorkDetailPage> {
  final logic = Get.find<StudentWorkDetailLogic>();
  final state = Get.find<StudentWorkDetailLogic>().state;

  @override
  Widget build(BuildContext context) {
    return OrientationBuilder(
        builder: (BuildContext context, Orientation orientation) {
      return Scaffold(
        backgroundColor: const Color.fromRGBO(245, 245, 245, 1),
        appBar: AppBar(
          backgroundColor: Colors.white,
          title: Text('${state.studentName}作业详情',
              style: TextStyle(fontSize: 14.sp, color: const Color(0xFF333333))),
          centerTitle: true,
          leading: IconButton(
            icon: const Icon(Icons.arrow_back_ios, color: Colors.black),
            onPressed: () => Get.back(),
          ),
          actions: const [
            ReturnToHomepage(),
          ],
          elevation: 0,
        ),
        body: Column(
          children: [
            Container(
              height: 1.r,
              width: MediaQuery.of(context).size.width,
              color: const Color.fromRGBO(179, 179, 179, 0.3),
            ),
            Container(
              color: Colors.white,
              padding: EdgeInsets.symmetric(vertical: 2.r),
              child: Row(
                children: [
                  InkWell(
                    onTap: () {
                      EasyLoading.show(status: 'loading...');
                      state.page = 1;
                      state.totalPages = 0;
                      state.isJob.value = true;
                      logic.getList();
                    },
                    child: SizedBox(
                      width: (MediaQuery.of(context).size.width - 1.r) / 2,
                      height: 40.r,
                      child: Obx(() {
                        return Center(
                            child: Text(
                          '作业',
                          style: TextStyle(
                              fontSize: 14.sp,
                              color: state.isJob.value
                                  ? Theme.of(context).primaryColor
                                  : const Color(0xFF505E6E)),
                        ));
                      }),
                    ),
                  ),
                  Container(
                    height: 40.r,
                    width: 1.r,
                    color: const Color.fromRGBO(179, 179, 179, 0.3),
                  ),
                  InkWell(
                    onTap: () {
                      EasyLoading.show(status: 'loading...');
                      state.isJob.value = false;
                      state.page = 1;
                      state.totalPages = 0;
                      logic.getList();
                    },
                    child: SizedBox(
                      width: (MediaQuery.of(context).size.width - 1.r) / 2,
                      height: 40.r,
                      child: Center(child: Obx(() {
                        return Text(
                          '考试',
                          style: TextStyle(
                              fontSize: 14.sp,
                              color: !state.isJob.value
                                  ? Theme.of(context).primaryColor
                                  : const Color(0xFF505E6E)),
                        );
                      })),
                    ),
                  ),
                ],
              ),
            ),
            Obx(() {
              return Container(
                margin: EdgeInsets.symmetric(vertical: 10.r, horizontal: 14.r),
                padding: EdgeInsets.only(
                    top: 10.r, left: 10.r, right: 10.r, bottom: 10.r),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(10.r)),
                    color: Colors.white),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                   /* Text(
                      '总览：',
                      style: TextStyle(
                          fontSize: 12.sp,
                          color: Theme.of(context).primaryColor,
                          fontWeight: FontWeight.w600),
                    ),*/
                    SizedBox(height: 10.r,),
                    SizedBox(
                      height: 200.r,
                      child:  LineChartCon(isShowingMainData: true,lineNum: 3,line1:state.kgtLine.value,line2: state.zgtLine.value,line3: state.allLine.value,),
                    ),
                    SizedBox(height: 20.r,),
                    ProgressBar(
                        title: '客观题正确率：',
                        color:const Color(0xFF4DE6BF),
                        percent: state.studentData.value.kgtCorrectRate / 100,
                        padingEdg: EdgeInsets.zero,
                        marginEdg: EdgeInsets.only(top: 8.h)),
                    ProgressBar(
                        title: '主观题正确率：',
                        color:  Theme.of(context).primaryColor,
                        percent: state.studentData.value.zgtCorrectRate / 100,
                        padingEdg: EdgeInsets.zero,
                        marginEdg: EdgeInsets.only(top: 8.h)),
                    ProgressBar(
                        title: '总正确率：',
                        color:  const Color(0xFF1890FF),
                        percent: state.studentData.value.correctRate / 100,
                        padingEdg: EdgeInsets.zero,
                        marginEdg: EdgeInsets.only(top: 8.h)),
                  ],
                ),
              );
            }),

            Obx(() {
              return JobConditionFilter(
                  controller: logic.tabController,
                  jobType: state.isJob.value ? 1 : 2,
                  customTimeStr: state.customTimeStr.value,
                  customTime: logic.tabController.index != 2 ||
                          ((state.dateEnd == null || state.dateEnd == '') &&
                              (state.dateStart == null ||
                                  state.dateStart == ''))
                      ? null
                      : PickerDateRange(
                          state.dateStart == null || state.dateStart == ''
                              ? null
                              : DateTime.parse(state.dateStart!),
                          state.dateEnd == null || state.dateEnd == ''
                              ? null
                              : DateTime.parse(state.dateEnd!),
                        ),
                  onTimeFilter: (String? startTime, String? endTime) {
                    EasyLoading.show(status: 'loading...');
                    if (startTime == null && endTime == null) {
                      if (logic.tabController.index == 2) {
                        logic.tabController.animateTo(0);
                      }
                      state.dateStart =
                          Utils.getWeekStartDate().toString().substring(0, 10);
                      state.dateEnd =
                          Utils.getWeekEndDate().toString().substring(0, 10);
                      state.customTimeStr.value = '自定义';
                    } else {
                      state.dateStart = startTime ?? '';
                      state.dateEnd = endTime ?? '';
                    }
                    state.page = 1;
                    logic.getList();
                  },
                  refreshTime: (value) {
                    if (value != null && value.startDate != null) {
                      state.customTimeStr.value =
                          value.startDate?.toString().substring(0, 10) ?? '';

                      if (value.endDate != null) {
                        if (!Utils.isPad() &&
                            value.startDate!.year == value.endDate!.year) {
                          state.customTimeStr.value =
                              '${value.startDate.toString().substring(5, 10)}~${value.endDate.toString().substring(5, 10)}';
                        } else {
                          state.customTimeStr.value =
                              '${state.customTimeStr.value}~${value.endDate?.toString().substring(0, 10)}';
                        }
                      }
                    }
                  });
            }),
            Padding(
              padding: EdgeInsets.only(top: 14.r, right: 14.r),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Text(
                    '注：',
                    style: TextStyle(fontSize: 8.sp, color: const Color(0xFF8B8B8B)),
                  ),
                  Container(
                    width: 10.r,
                    height: 10.r,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(5.r)),
                      color: const Color(0xFF00B386),
                      border: Border.all(width: 1.r, color: const Color(0xFF00B386)),
                    ),
                  ),
                  SizedBox(
                    width: 2.r,
                  ),
                  Text(
                    '正确',
                    style: TextStyle(fontSize: 8.sp, color: const Color(0xFF8B8B8B)),
                  ),
                  SizedBox(
                    width: 15.r,
                  ),
                  Container(
                    width: 10.r,
                    height: 10.r,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(5.r)),
                      color: const Color(0xFFCB191B),
                      border: Border.all(width: 1.r, color: const Color(0xFFCB191B)),
                    ),
                  ),
                  SizedBox(
                    width: 2.r,
                  ),
                  Text(
                    '错误',
                    style: TextStyle(fontSize: 8.sp, color: const Color(0xFF8B8B8B)),
                  ),
                  SizedBox(
                    width: 15.r,
                  ),
                  Container(
                    width: 10.r,
                    height: 10.r,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(5.r)),
                      // color: Color(0xFF666666),
                      border: Border.all(width: 1.r, color: const Color(0xFF666666)),
                      // border: Border.all(width: 1.r,color: Colors.grey),
                      /* boxShadow: [
                      BoxShadow(
                        color: Colors.grey,
                        offset: Offset(1.w, 1.h), //阴影y轴偏移量
                        blurRadius: 4, //阴影模糊程度
                        spreadRadius: 0.1, //阴影扩散程度
                      )
                    ],*/
                    ),
                  ),
                  SizedBox(
                    width: 2.r,
                  ),
                  Text(
                    '已作答未批阅',
                    style: TextStyle(fontSize: 8.sp, color: const Color(0xFF8B8B8B)),
                  ),
                  SizedBox(
                    width: 15.r,
                  ),
                  Container(
                    width: 10.r,
                    height: 10.r,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(5.r)),
                      border: Border.all(width: 1.r, color: const Color(0xFFDDDDDD)),
                      // color: Color(0xFFDDDDDD),
                    ),
                  ),
                  SizedBox(
                    width: 2.r,
                  ),
                  Text(
                    '未做',
                    style: TextStyle(fontSize: 8.sp, color: const Color(0xFF8B8B8B)),
                  ),
                ],
              ),
            ),
            Expanded(
              child: Padding(
                padding: EdgeInsets.symmetric(vertical: 10.r),
                child: Obx(() {
                  return EasyRefresh(
                    firstRefresh: false,
                    taskIndependence: true,
                    controller: logic.refreshController,
                    header: MaterialHeader(),
                    footer: TaurusFooter(),
                    onRefresh: () async {
                      state.page = 1;
                      logic.getList();
                    },
                    onLoad: () async {
                      if (state.page < state.totalPages) {
                        state.page += 1;
                        logic.getList();
                      }
                    },
                    child: state.studentData.value.items.items.isNotEmpty
                        ? ListView.builder(
                            itemCount:
                                state.studentData.value.items.items.length,
                            itemBuilder: (context, index) {
                              StudentItems item =
                                  state.studentData.value.items.items[index];
                              return InkWell(
                                onTap: () {
                                  Get.toNamed(Routes.studentPersonalPage,
                                      arguments: {
                                        'homeworkId': item.id,
                                        'studentId': state.studentId,
                                        'subject':item.subject
                                      });
                                },
                                child: Container(
                                  margin: EdgeInsets.symmetric(
                                      vertical: 5.r, horizontal: 14.r),
                                  padding: EdgeInsets.symmetric(
                                      vertical: 14.r, horizontal: 10.r),
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.all(
                                          Radius.circular(10.r)),
                                      color: item.allNotDone
                                          ? const Color(0xFFFFEDD3)
                                          : Colors.white),
                                  child: Column(
                                    mainAxisAlignment: MainAxisAlignment.start,
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.start,
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          Container(
                                            width: 32.w,
                                            height: 22.h,
                                            alignment: Alignment.center,
                                            // padding: EdgeInsets.only(left: 2.w),
                                            decoration: BoxDecoration(
                                              color: state.isJob.value
                                                  ? Theme.of(context).primaryColor
                                                  : const Color(0xFFFFA116),
                                              borderRadius: BorderRadius.all(
                                                Radius.circular(5.r)
                                              ),
                                            ),
                                            margin: EdgeInsets.only(right: 4.w),
                                            child: Text(
                                              state.isJob.value ? '作业' : '考试',
                                              style: TextStyle(
                                                  fontSize: 10.sp,
                                                  color: Colors.white),
                                            ),
                                          ),
                                          Expanded(
                                              child: Text(
                                            item.name,
                                            style: TextStyle(
                                                fontSize: 12.sp,
                                                color: const Color(0xFF464646)),
                                          )),
                                          // SizedBox(width: 5.r,),
                                          // Text('2024.1',style: TextStyle(fontSize: 12.sp,color: Color(0xFF5B5B5B)),),

                                          Container(
                                            width: 40.r,
                                            height: 20.r,
                                            decoration: BoxDecoration(
                                              borderRadius: BorderRadius.all(
                                                  Radius.circular(4.r)),
                                              border: Border.all(
                                                  width: 1.r,
                                                  color: Theme.of(context).primaryColor),
                                            ),
                                            child: Center(
                                                child: Text(
                                              EnumUtils.formatSubject(
                                                  item.subject),
                                              style: TextStyle(
                                                  fontSize: 10.sp,
                                                  color: Theme.of(context).primaryColor),
                                            )),
                                          ),
                                        ],
                                      ),
                                      SizedBox(
                                        height: 10.r,
                                      ),
                                      Row(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          Text(
                                            '客：',
                                            style: TextStyle(
                                                fontSize: 12.sp,
                                                color: const Color(0xFF5B5B5B)),
                                          ),
                                          SizedBox(
                                            width: 5.r,
                                          ),
                                          item.kgtList.isNotEmpty
                                              ? Expanded(
                                                  child: Wrap(
                                                    direction: Axis.horizontal,
                                                    alignment:
                                                        WrapAlignment.start,
                                                    spacing: 8,
                                                    runSpacing: 5,
                                                    children: List.generate(
                                                        item.kgtList.length,
                                                        (i) {
                                                      KgtList subjective =
                                                          item.kgtList[i];
                                                      return Container(
                                                        width: 25.r,
                                                        height: 25.r,
                                                        decoration: BoxDecoration(
                                                            color:  subjective.state == 3
                                                                ?const Color(0xFF00B386):subjective.state == 2
                                                                ? const Color(0xFFCB191B):Colors.transparent,
                                                            border: Border.all(
                                                                width: 1.r,
                                                                color: subjective.state == 0
                                                                    ? const Color(0xFFDDDDDD)
                                                                    : subjective.state == 3
                                                                        ?const Color(0xFF00B386)
                                                                        : subjective.state == 2
                                                                            ? const Color(0xFFCB191B)
                                                                            : const Color(0xFF666666)),
                                                            borderRadius: BorderRadius.all(Radius.circular(12.5.r))),
                                                        child: Center(
                                                            child: Text(
                                                          subjective.questionNo
                                                              .toString(),
                                                          style: TextStyle(
                                                              fontSize: 10.r,
                                                              color: subjective
                                                                          .state ==
                                                                      0
                                                                  ? const Color(
                                                                      0xFFDDDDDD)
                                                                  : subjective.state ==
                                                                          3
                                                                      ? Colors.white
                                                                      : subjective.state ==
                                                                              2
                                                                          ?Colors.white
                                                                          : const Color(
                                                                              0xFF666666)),
                                                        )),
                                                      );
                                                    }),
                                                  ),
                                                )
                                              : Text(
                                                  '无',
                                                  style: TextStyle(
                                                      fontSize: 12.sp,
                                                      color: const Color(0xFF5B5B5B)),
                                                ),
                                        ],
                                      ),
                                      SizedBox(
                                        height: 10.r,
                                      ),
                                      Row(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          Text(
                                            '主：',
                                            style: TextStyle(
                                                fontSize: 12.sp,
                                                color: const Color(0xFF5B5B5B)),
                                          ),
                                          SizedBox(
                                            width: 5.r,
                                          ),
                                          item.zgtList.isNotEmpty
                                              ? Expanded(
                                                  child: Wrap(
                                                    direction: Axis.horizontal,
                                                    alignment:
                                                        WrapAlignment.start,
                                                    spacing: 8,
                                                    runSpacing: 5,
                                                    children: List.generate(
                                                        item.zgtList.length,
                                                        (i) {
                                                      ZgtList subjective =
                                                          item.zgtList[i];
                                                      return Container(
                                                        width: 25.r,
                                                        height: 25.r,
                                                        decoration: BoxDecoration(
                                                            color: subjective.state == 3
                                                                ? const Color(0xFF00B386):subjective.state == 2
                                                                ? const Color(0xFFCB191B):Colors.transparent,
                                                            border: Border.all(
                                                                width: 1.r,
                                                                color: subjective.state == 0
                                                                    ? const Color(0xFFDDDDDD)
                                                                    : subjective.state == 3
                                                                        ? const Color(0xFF00B386)
                                                                        : subjective.state == 2
                                                                            ? const Color(0xFFCB191B)
                                                                            : const Color(0xFF666666)),
                                                            borderRadius: BorderRadius.all(Radius.circular(12.5.r))),
                                                        child: Center(
                                                            child: Text(
                                                          subjective.questionNo
                                                              .toString(),
                                                          style: TextStyle(
                                                              fontSize: 10.r,
                                                              color: subjective
                                                                          .state ==
                                                                      0
                                                                  ? const Color(
                                                                      0xFFDDDDDD)
                                                                  : subjective.state ==
                                                                          3
                                                                      ? Colors.white
                                                                      : subjective.state ==
                                                                              2
                                                                          ? Colors.white
                                                                          : const Color(
                                                                              0xFF666666)),
                                                        )),
                                                      );
                                                    }),
                                                  ),
                                                )
                                              : Text(
                                                  '无',
                                                  style: TextStyle(
                                                      fontSize: 12.sp,
                                                      color: const Color(0xFF5B5B5B)),
                                                ),
                                        ],
                                      ),
                                      ProgressBar(
                                          title: '客观题正确率：',
                                          color: const Color(0xFFB2DA93),
                                          percent: item.kgtCorrectRate / 100,
                                          padingEdg: EdgeInsets.zero,
                                          marginEdg: EdgeInsets.only(top: 8.h)),
                                      ProgressBar(
                                          title: '主观题正确率：',
                                          color: const Color(0xFFB2DA93),
                                          percent: item.zgtCorrectRate / 100,
                                          padingEdg: EdgeInsets.zero,
                                          marginEdg: EdgeInsets.only(top: 8.h)),
                                      ProgressBar(
                                          title: '总正确率：',
                                          color: const Color(0xFFB2DA93),
                                          percent: item.correctRate / 100,
                                          padingEdg: EdgeInsets.zero,
                                          marginEdg: EdgeInsets.only(top: 8.h)),
                                    ],
                                  ),
                                ),
                              );
                            })
                        : const MyEmptyWidget(),
                  );
                }),
              ),
            ),
          ],
        ),
      );
    });
  }

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