import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:marking_app/common/model/job/job_report_model.dart';
import 'package:marking_app/utils/index.dart';

class TopCount extends StatelessWidget {
  final JobReportModel data;
  const TopCount(this.data,{Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 10.r),
      margin: EdgeInsets.symmetric(vertical: 10.r, horizontal: 10.r),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.all(Radius.circular(6.r)),
      ),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Container(
                width: 81.r,
                padding: EdgeInsets.symmetric(
                    vertical: 10.r, horizontal: 6.r),
                decoration: BoxDecoration(
                  border: Border.all(
                      width: 1.r,
                      color: Color(0xFF4CC793),
                      style: BorderStyle.solid),
                  borderRadius: BorderRadius.all(Radius.circular(6.r)),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        Text(
                          doubleToStringAsFixed(data.finishRate),
                          style: TextStyle(
                              fontSize: 24.sp,
                              color: Color(0xFF4CC793),
                              fontWeight: FontWeight.w600),
                        ),
                        Text(
                          '%',
                          style: TextStyle(
                              fontSize: 16.sp,
                              color: Color(0xFF4CC793),
                              fontWeight: FontWeight.w600),
                        ),
                      ],
                    ),
                    SizedBox(
                      height: 15.r,
                      child: Row(
                        children: [
                          Text(
                            data.validCount.toString(),
                            style: TextStyle(
                                fontSize: 10.sp,
                                color: Color(0xFFB0B0B0)),
                          ),
                          Text(
                            '/',
                            style: TextStyle(
                                fontSize: 10.sp,
                                color: Color(0xFFB0B0B0)),
                          ),
                          Text(
                            data.studentCount.toString(),
                            style: TextStyle(
                                fontSize: 10.sp,
                                color: Color(0xFFB0B0B0)),
                          ),
                        ],
                      ),
                    ),
                    Text(
                      '完成率',
                      style: TextStyle(
                          fontSize: 12.sp, color: Color(0xFF818181)),
                    )
                  ],
                ),
              ),
              Container(
                width: 81.r,
                padding: EdgeInsets.symmetric(
                    vertical: 10.r, horizontal: 6.r),
                decoration: BoxDecoration(
                  border: Border.all(
                      width: 1.r,
                      color: Color(0xFF4CC793),
                      style: BorderStyle.solid),
                  borderRadius: BorderRadius.all(Radius.circular(6.r)),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        Text(
                          doubleToStringAsFixed(data.correctRate),
                          style: TextStyle(
                              fontSize: 24.sp,
                              color: Color(0xFF4CC793),
                              fontWeight: FontWeight.w600),
                        ),
                        Text(
                          '%',
                          style: TextStyle(
                              fontSize: 16.sp,
                              color: Color(0xFF4CC793),
                              fontWeight: FontWeight.w600),
                        ),
                      ],
                    ),
                    SizedBox(
                      height: 15.r,
                    ),
                    Text(
                      '正确率',
                      style: TextStyle(
                          fontSize: 12.sp, color: Color(0xFF818181)),
                    )
                  ],
                ),
              ),
              Container(
                width: 81.r,
                padding: EdgeInsets.symmetric(
                    vertical: 10.r, horizontal: 6.r),
                decoration: BoxDecoration(
                  border: Border.all(
                      width: 1.r,
                      color: Color(0xFF4CC793),
                      style: BorderStyle.solid),
                  borderRadius: BorderRadius.all(Radius.circular(6.r)),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        Text(
                          data.allCorrect.toString(),
                          style: TextStyle(
                              fontSize: 24.sp,
                              color: Color(0xFF4CC793),
                              fontWeight: FontWeight.w600),
                        ),
                        Text(
                          '人',
                          style: TextStyle(
                              fontSize: 16.sp,
                              color: Color(0xFF4CC793),
                              fontWeight: FontWeight.w600),
                        ),
                      ],
                    ),
                    SizedBox(
                      height: 10.r,
                    ),
                    Text(
                      '全对',
                      style: TextStyle(
                          fontSize: 12.sp, color: Color(0xFF818181)),
                    )
                  ],
                ),
              ),
            ],
          ),
          SizedBox(
            height: 15.r,
          ),
          Padding(
              padding: EdgeInsets.symmetric(horizontal: 15.r),
              child: GridView.builder(
                shrinkWrap: true,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    childAspectRatio: 150 / 46,
                    crossAxisSpacing: 2.r, //水平子 Widget 之间间距
                    mainAxisSpacing: 2.r, //垂直子 Widget 之间间距
                    crossAxisCount: 2, //一行的 Widget 数量
                  ),
                  itemCount: data.overallTitles.length,
                  itemBuilder: (BuildContext context, index){
                    var item = data.overallTitles[index];
                    Color bgColor = Color(0xFF4CC793);
                    if(item.title == '优'){
                      bgColor = Color(0xFF4CC793);
                    }else if(item.title == '良'){
                      bgColor = Color(0xFFF8700D);
                    }else if(item.title == '中'){
                      bgColor = Color(0xFF4CC7B8);
                    }else if(item.title == '差'){
                      bgColor = Color(0xFFFF6F6F);
                    }
                    return  Container(
                      padding: EdgeInsets.symmetric(vertical: 10.r),
                      width: (MediaQuery.of(context).size.width - 55.r) / 2,
                      color: Color(0xFFF5F5F5),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          SizedBox(
                            width: (MediaQuery.of(context).size.width - 55.r)/4 - 20.r,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.end,
                              children: [
                                Container(
                                  width: 28.r,
                                  height: 28.r,
                                  decoration: BoxDecoration(
                                      color: Colors.white,
                                      border: Border.all(
                                          color: bgColor,
                                          width: 1.r,
                                          style: BorderStyle.solid),
                                      borderRadius: BorderRadius.circular(14.r)),
                                  child: Center(
                                      child: Text(
                                        item.title,
                                        style: TextStyle(
                                            color: bgColor, fontSize: 14.r),
                                      )),
                                ),
                              ],
                            ),
                          ),
                          SizedBox(
                            width: 20.r,
                          ),
                          Text(
                            item.count.toString(),
                            style: TextStyle(
                                fontSize: 24.sp,
                                fontWeight: FontWeight.w600,
                                color: Color(0xFF595959)),
                          ),
                          Text(
                            '人',
                            style: TextStyle(
                                fontSize: 16.sp,
                                fontWeight: FontWeight.w600,
                                color: Color(0xFF595959)),
                          ),
                        ],
                      ),
                    );
                  },
              ),
          ),
        ],
      ),
    );
  }
}
