app-starlock/star_lock/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';

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

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

class _CheckingInDetailPageState extends State<CheckingInDetailPage> {
  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
    //设置默认当前月日期
    _setDatas(year: _year, month: _month);

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

    super.initState();
  }

  //加载月历事件，请求接口
  _loadAttendanceMonthRecord(String dateTime) async {
    CalendarModel bean1 = CalendarModel(year: _year,month: _month,day: 1,workType: "2");
    CalendarModel bean2 = CalendarModel(year: _year,month: _month,day: 2,workType: "1");
    CalendarModel bean3 = CalendarModel(year: _year,month: _month,day: 3,workType: "2");
    CalendarModel bean4  = CalendarModel(year: _year,month: _month,day: 4,workType: "0");
    CalendarModel bean5 = CalendarModel(year: _year,month: _month,day: 5,workType: "0");
    CalendarModel bean6 = CalendarModel(year: _year,month: _month,day: 6,workType: "1");
    _listDatas.add(bean1);
    _listDatas.add(bean2);
    _listDatas.add(bean3);
    _listDatas.add(bean4);
    _listDatas.add(bean5);
    _listDatas.add(bean6);

    setState(() {
      for (int i = 0; i < _datas.length; i++) {
        for (int j = 0; j < _listDatas.length; j++) {
          if (_datas[i].year== _listDatas[j].year &&
              _datas[i].month == _listDatas[j].month &&
              _datas[i].day == _listDatas[j].day) {
            _datas[i].workType = _listDatas[j].workType;
          }
        }
      }
    });
  }

  //加载日事件，请求接口
  _loadAttendanceDayRecord(String dateTime) async{
    //可根据接口返回的内容在日历下面打卡信息或者其余内容
    print("点击的是$dateTime");
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: TitleAppBar(barTitle:"张三", 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: 40.w,
                height: 40.w,
                image: const AssetImage("images/icon_left_black.png"),
              ),
            ),
          ),
          SizedBox(width: 60.w,),
          Text("$_year-$_month", style: TextStyle(fontSize: 34.sp, color: Colors.black, fontWeight: FontWeight.w500)),
          SizedBox(width: 60.w,),
          GestureDetector(
            onTap: () {
              _nextMonth();
            },
            child: Container(
              // margin: EdgeInsets.only(right: 20.sp),
              child: Image(
                width: 40.w,
                height: 40.h,
                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: 30.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) {
          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: _datas[index].isSelect!
                        ? const BoxDecoration(
                      color: Color(0xFF2C91F6),
                      shape: BoxShape.circle,
                    )
                        : const BoxDecoration(),
                    child: Center(
                      child: Text(
                        //不是当前月不显示值
                        _datas[index].month == _month
                            ? _datas[index].day.toString()
                            : "",
                        textAlign: TextAlign.center,
                        //设置选中字体颜色，以及周末和工作日颜色
                        style: _datas[index].isSelect!
                            ? TextStyle(
                            fontSize: 32.sp, color: const Color(0xFFFFFFFF))
                            : (index % 7 == 5 || index % 7 == 6
                            ? TextStyle(
                            fontSize: 32.sp, color: const Color(0xFFC4C8D0))
                            : TextStyle(
                            fontSize: 32.sp, color: const Color(0xFF3C3E43))),
                      ),
                    ),
                  ),
                  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("月统计", style: TextStyle(color: Colors.white, fontSize: 32.sp, fontWeight: FontWeight.w500),),
            ),
          ],
        ),
        _bottomStatisticsItemWidget(Colors.red ,"迟到", "0"),
        _bottomStatisticsItemWidget(Colors.orange ,"早退", "0"),
        _bottomStatisticsItemWidget(Colors.grey ,"未打卡", "0"),
      ],
    );
  }

  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: 35.w,
                height: 35.w,
                decoration: BoxDecoration(
                    color: color,
                    borderRadius:BorderRadius.all(Radius.circular(35.h))
                ),
              ),
              SizedBox(width:20.w),
              Expanded(child: Text(leftTitel, style: TextStyle(fontSize: 28.sp, fontWeight: FontWeight.w500))),
              SizedBox(width:20.w),
              Text(rightTitle, textAlign: TextAlign.end, style: TextStyle(fontSize: 28.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);
    //
    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: ""));
    }

    /// 本月显示
    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: ""));
      } else {
        _datas.add(CalendarModel(
            year: year,
            month: month,
            day: i + 1,
            isSelect: false,
            workType: ""));
      }
    }

    /// 下个月占位
    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: ""));
    }
  }

  // 上月
  _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-$_day");
    });
  }

  // 下月
  _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");
    });
  }
}

//日历bean
class CalendarModel {
  int? year;
  int? month;
  int? day;
  String? workType = "";//日期事件，0，休息，1，异常，2，正常
  bool? isSelect = false;

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