app-starlock/lib/main/lockDetail/checkingIn/checkingInDetail/checkingInDetail_page.dart

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

import '../../../../app_settings/app_colors.dart';
import '../../../../tools/titleAppBar.dart';
import '../../../../translations/trans_lib.dart';
import 'checkingInDetail_logic.dart';

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

  @override
  _CheckingInDetailPageState createState() => _CheckingInDetailPageState();
}

class _CheckingInDetailPageState extends State<CheckingInDetailPage> {

  final logic = Get.put(CheckingInDetailLogic());
  final state = Get.find<CheckingInDetailLogic>().state;

  int _year = DateTime.now().year;
  int _month = DateTime.now().month;
  int _day = DateTime.now().day;
  final List<CalendarModel> _datas = [];
  final List<CalendarModel> _listDatas = [];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    //设置默认当前月日期
    _setDatas(year: _year, month: _month);

    logic.getCheckInDetailData((){
      //设置模拟数据，日历月事件，可根据接口返回的结果
      _loadAttendanceMonthRecord("$_year-$_month");
    });

    //设置模拟数据，日历月事件，可根据接口返回的结果
    // _loadAttendanceMonthRecord("$_year-$_month");
    //日历日事件
    // _loadAttendanceDayRecord("$_year-$_month-$_day");
  }

  //加载月历事件，请求接口
  _loadAttendanceMonthRecord(String dateTime) async {
    // 显示的上个月的天数
    var placeholderDays = _getPlaceholderDays(year: _year, month: _month);
    // 当月多少天
    var currentMonthDays = _getCurrentMonthDays(year: _year, month: _month);

    setState(() {
      // 因为_datas这个月上个月都包含的都有 遍历把本月的赋值
      for (int i = 0; i < _datas.length; i++) {
        // 因为i从0开始 所以i>=上个月的天数 且小于上个月跟本月天数之和
        if((i >= placeholderDays) && (i < (placeholderDays + currentMonthDays))){
          _datas[i].workType = state.monthListData[i-placeholderDays].colorType.toString();
        }
      }
    });
  }

  //加载日事件，请求接口
  _loadAttendanceDayRecord(String dateTime) async {
    //可根据接口返回的内容在日历下面打卡信息或者其余内容
    state.checkDate.value = DateTime.parse(dateTime).millisecondsSinceEpoch;
    logic.getCheckInDetailData((){
      //设置模拟数据，日历月事件，可根据接口返回的结果
      _loadAttendanceMonthRecord("$_year-$_month");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: TitleAppBar(
            barTitle: state.staffName.value,
            haveBack: true,
            backgroundColor: AppColors.mainColor),
        body: SingleChildScrollView(
            child: Column(
          children: [
            Container(
              // margin: EdgeInsets.all(20.sp),
              decoration: BoxDecoration(
                //设置颜色
                color: Colors.white,
                borderRadius: BorderRadius.all(Radius.circular(12.r)),
                //设置四周边框
              ),
              child: Column(
                children: [
                  _yearHeader(),
                  SizedBox(height: 10.h),
                  _weekHeader(),
                  _everyDay(),
                  _bottomStatisticsWidget()
                ],
              ),
            ),

            //下面可以添加日事件中的信息，例如打卡信息
            Container(),
          ],
        )));
  }

  //头部年
  Widget _yearHeader() {
    return Container(
      height: 30,
      margin: const EdgeInsets.only(top: 10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          GestureDetector(
            onTap: () {
              _lastMonth();
            },
            child: Container(
              // margin: EdgeInsets.only(left: 20.w),
              child: Image(width: 50.w, height: 30.w, image: const AssetImage("images/icon_left_black.png"),),
            ),
          ),
          SizedBox(width: 60.w,),
          Text("$_year-$_month", style: TextStyle(fontSize: 28.sp, color: Colors.black, fontWeight: FontWeight.w500)),
          SizedBox(width: 60.w),
          GestureDetector(
            onTap: () {
              _nextMonth();
            },
            child: Container(
              child: Image(width: 50.w, height: 30.w, image: const AssetImage("images/icon_right_black.png")),
            ),
          ),
        ],
      ),
    );
  }

  //中部周
  Widget _weekHeader() {
    var array = [
      TranslationLoader.lanKeys!.mondayShort!.tr,
      TranslationLoader.lanKeys!.tuesdayShort!.tr,
      TranslationLoader.lanKeys!.wednesdayShort!.tr,
      TranslationLoader.lanKeys!.thursdayShort!.tr,
      TranslationLoader.lanKeys!.fridayShort!.tr,
      TranslationLoader.lanKeys!.saturdayShort!.tr,
      TranslationLoader.lanKeys!.sundayShort!.tr
    ];
    return Container(
      height: 50.h,
      child: GridView.builder(
        padding: const EdgeInsets.only(left: 10, right: 10),
        itemCount: array.length,
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            //横轴元素个数
            crossAxisCount: 7,
            //纵轴间距
            // mainAxisSpacing: ScreenUtil().setHeight(10),
            // 横轴间距
            // crossAxisSpacing: ScreenUtil().setWidth(15),
            //子组件宽高长度比例
            childAspectRatio: 2),
        itemBuilder: (context, index) {
          return Container(
              alignment: Alignment.center,
              child: Text(
                array[index],
                style: TextStyle(
                    color:
                    // index == 5 || index == 6
                    //     ? const Color(0xFFC4C8D0) :
                    const Color(0xFF3C3E43),
                    fontSize: 26.sp),
              ));
        },
      ),
    );
  }

  //底部日
  Widget _everyDay() {
    return Container(
      child: GridView.builder(
        padding: EdgeInsets.only(left: 10.sp, top: 10.sp, right: 10.sp),
        itemCount: _getRowsForMonthYear(year: _year, month: _month) * 7,
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            //横轴元素个数
            crossAxisCount: 7,
            // //纵轴间距
            // mainAxisSpacing: ScreenUtil().setHeight(10),
            // // 横轴间距
            // crossAxisSpacing: ScreenUtil().setWidth(10),
            //子组件宽高长度比例
            childAspectRatio: 1),
        itemBuilder: (context, index) {
          Color backColor = Colors.white;
          // Color textColor = const Color(0xFFFFFFFF);
          if(_datas[index].workType == "1"){
            // 迟到
            backColor = const Color(0xFFE83523);
          }else if( _datas[index].workType == "2"){
            // 早退
            backColor = const Color(0xFFEDB459);
          }else if( _datas[index].workType == "3"){
            // 未打卡
            backColor = const Color(0xFF666666);
          }
          return GestureDetector(
            onTap: () {
              // setState(() {
              //   if (_datas[index].month == _month) {
              //     //判断点击的是否是当月日期，只对当前月点击的日期做处理
              //     for (int i = 0; i < _datas.length; i++) {
              //       if (i == index) {
              //         //切换至选中的日期
              //         _day = _datas[i].day!;
              //         _datas[i].isSelect = true;
              //
              //         //加载选中的日期事件
              //         _loadAttendanceDayRecord(
              //             "${_datas[i].year}-${_datas[i].month}-${_datas[i].day}");
              //       } else {
              //         _datas[i].isSelect = false;
              //       }
              //     }
              //   } else {
              //     //不是当月的不做处理
              //     // _datas[index].is_select=false;
              //   }
              // });
            },
            child: Container(
              child: Column(
                children: [
                  Container(
                    width: 40.w,
                    height: 40.w,
                    //设置底部背景
                    decoration: BoxDecoration(
                      color: backColor,
                      shape: BoxShape.circle,
                    ),
                    child: Center(
                      child: Text(
                        //不是当前月不显示值
                        _datas[index].month == _month
                            ? _datas[index].day.toString()
                            : "",
                        textAlign: TextAlign.center,
                        //设置选中字体颜色 休息的颜色都是黑色 其余的都是白色因为有背景色
                        style: (int.parse(_datas[index].workType!) > 0)
                            ? TextStyle(
                                fontSize: 24.sp, color: const Color(0xFFFFFFFF))
                            : TextStyle(
                            fontSize: 24.sp,
                            color: Colors.black),
                      ),
                    ),
                  ),
                  const SizedBox(height: 5),
                  //设置底部小圆点，非当前月的不显示，设置为透明，其余的根据状态判断显示
                  // _datas[index].month == _month &&
                  //         _datas[index].workType != "" &&
                  //         _datas[index].workType != "0"
                  //     ? Container(
                  //         height: 6.0,
                  //         width: 6.0,
                  //         decoration: BoxDecoration(
                  //             shape: BoxShape.circle,
                  //             color: _datas[index].workType == "1"
                  //                 ? const Color(0xFFF48835)
                  //                 : const Color(0xFF2C91F6)),
                  //       )
                  //     : Container(),
                ],
              ),
            ),
          );
        },
      ),
    );
  }

  Widget _bottomStatisticsWidget() {
    return Column(
      children: [
        Row(
          children: [
            Container(
              width: 1.sw,
              // height: 40.h,
              padding: EdgeInsets.only(left: 50.w, top: 5.h, bottom: 5.h),
              color: Colors.grey,
              child: Text(
                "月统计".tr,
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 26.sp,
                    fontWeight: FontWeight.w500),
              ),
            ),
          ],
        ),
        _bottomStatisticsItemWidget(const Color(0xFFE83523), "迟到".tr, state.lateTimes.value),
        _bottomStatisticsItemWidget(const Color(0xFFEDB459), "早退".tr, state.earlyTimes.value),
        _bottomStatisticsItemWidget(const Color(0xFF666666), "未打卡".tr, state.noPunchTimes.value),
      ],
    );
  }

  Widget _bottomStatisticsItemWidget(
    Color color,
    String leftTitel,
    String rightTitle,
  ) {
    return Column(
      children: [
        Container(
          // height: 70.h,
          padding:
              EdgeInsets.only(left: 20.w, right: 10.w, top: 20.w, bottom: 20.w),
          child: Row(
            children: [
              SizedBox(width: 20.w),
              Container(
                width: 30.w,
                height: 30.w,
                decoration: BoxDecoration(
                    color: color,
                    borderRadius: BorderRadius.all(Radius.circular(30.h))),
              ),
              SizedBox(width: 20.w),
              Expanded(
                  child: Text(leftTitel,
                      style: TextStyle(
                          fontSize: 24.sp, fontWeight: FontWeight.w500))),
              SizedBox(width: 20.w),
              Text(rightTitle,
                  textAlign: TextAlign.end,
                  style:
                      TextStyle(fontSize: 24.sp, fontWeight: FontWeight.w500)),
              SizedBox(width: 10.w),
            ],
          ),
        ),
        Container(
          height: 0.5.h,
          color: Colors.grey,
        )
      ],
    );
  }

  // 获取行数
  int _getRowsForMonthYear({int? year, int? month}) {
    // 当前月天数
    var currentMonthDays = _getCurrentMonthDays(year: year, month: month);
    // 这个月1号前面有几天
    var placeholderDays = _getPlaceholderDays(year: year, month: month);

    int rows = (currentMonthDays + placeholderDays) ~/ 7;

    int remainder = (currentMonthDays + placeholderDays) % 7;
    if (remainder > 0) {
      rows = rows + 1;
    }
    return rows;
  }

  // 得到这个月的第一天是星期几
  int _getPlaceholderDays({int? year, int? month}) {
    return DateTime(year!, month!).weekday - 1 % 7;
  }

  // 获取当前月份天数
  int _getCurrentMonthDays({int? year, int? month}) {
    if (month == 2) {
      //判断2月份是闰年月还是平年
      if (((year! % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) {
        return 29;
      } else {
        return 28;
      }
    } else if (month == 1 ||
        month == 3 ||
        month == 5 ||
        month == 7 ||
        month == 8 ||
        month == 10 ||
        month == 12) {
      return 31;
    } else {
      return 30;
    }
  }

  /// 获取展示信息
  _setDatas({int? year, int? month}) {
    /// 上个月占位
    var lastYear = year;
    var lastMonth = month! - 1;
    if (month == 1) {
      lastYear = (year! - 1)!;
      lastMonth = 12;
    }

    var placeholderDays = _getPlaceholderDays(year: year, month: month);
    var lastMonthDays = _getCurrentMonthDays(year: lastYear, month: lastMonth);
    var firstDay = lastMonthDays - placeholderDays;
    for (var i = 0; i < placeholderDays; i++) {
      _datas.add(CalendarModel(
          year: lastYear,
          month: lastMonth,
          day: firstDay + i + 1,
          isSelect: false,
          workType: "0"));
    }

    /// 本月显示
    var currentMonthDays = _getCurrentMonthDays(year: year, month: month);
    for (var i = 0; i < currentMonthDays; i++) {
      if (i == _day - 1) {
        _datas.add(CalendarModel(
            year: year,
            month: month,
            day: i + 1,
            isSelect: true,
            workType: "0"));
      } else {
        _datas.add(CalendarModel(
            year: year,
            month: month,
            day: i + 1,
            isSelect: false,
            workType: "0"));
      }
    }

    /// 下个月占位
    var nextYear = year;
    var nextMonth = month + 1;
    if (month == 12) {
      nextYear = (year! + 1)!;
      nextMonth = 1;
    }
    var nextPlaceholderDays =
        _getPlaceholderDays(year: nextYear, month: nextMonth);
    for (var i = 0; i < 7 - nextPlaceholderDays; i++) {
      _datas.add(CalendarModel(
          year: nextYear,
          month: nextMonth,
          day: i + 1,
          isSelect: false,
          workType: "0"));
    }
  }

  // 上月
  _lastMonth() {
    setState(() {
      if (_month == 1) {
        _year = _year - 1;
        _month = 12;
      } else {
        _month = _month - 1;
      }
      _day = 1; //查看上一个月时，默认选中的为第一天
      _datas.clear();
      _setDatas(year: _year, month: _month);
      //更新月历事件
      // _loadAttendanceMonthRecord("$_year-$_month");
      //更新日事件
      _loadAttendanceDayRecord("$_year-${_month.toString().padLeft(2,'0')}-${_day.toString().padLeft(2,'0')}");
    });
  }

  // 下月
  _nextMonth() {
    if (_month == 12) {
      //当前月是12月，下一个月就是下一年
      if (DateTime.now().year >= _year + 1) {
        //判断下一年是否大于当前年
        _setNextMonthData();
      }
    } else {
      //当前月不是12月，还处于当前年
      if (DateTime.now().month >= _month + 1) {
        //判断下一个月是否超过当前月，超过当前月不做操作
        _setNextMonthData();
      }
    }
  }

  //设置下个月的数据
  _setNextMonthData() {
    setState(() {
      if (_month == 12) {
        _year = _year + 1;
        _month = 1;
      } else {
        _month = _month + 1;
      }
      if (_month == DateTime.now().month) {
        //如果下个月时当前月，默认选中当天
        _day = DateTime.now().day;
      } else {
        //如果不是当前月，默认选中第一天
        _day = 1;
      }
      _datas.clear();
      _setDatas(year: _year, month: _month);
      //更新月历事件
      _loadAttendanceMonthRecord("$_year-$_month");
      //更新日事件
      // _loadAttendanceDayRecord("$_year-$_month-$_day");
      _loadAttendanceDayRecord("$_year-${_month.toString().padLeft(2,'0')}-${_day.toString().padLeft(2,'0')}");
    });
  }
}

//日历bean
class CalendarModel {
  int? year;
  int? month;
  int? day;
  String? workType = ""; //日期事件，0休息，1迟到，2早退，3未打卡
  bool? isSelect = false;

  CalendarModel(
      {this.year, this.month, this.day, this.isSelect, this.workType});
}