import React, { useState, useEffect } from 'react';
import moment from 'moment';
import { useAccess } from 'umi';
import { Button, Badge, Table, Avatar } from 'antd';
import { LeftCircleFilled, RightCircleFilled } from '@ant-design/icons';
import classname from 'classnames';
import omit from 'omit.js';
import style from './calendar.less';
import PopMark from './PopMark';
import PopExchange from './PopExchange';
import ExportFile from '@/components/Custom/ExportFile';

/* 判断 平年闰年 */
const isLeapYear = (year) => {
  return year % 400 === 0 || (year % 100 !== 0 && year % 4 === 0);
};
/* 获得某年某月的 1号 是星期几，这里要注意的是 JS 的 API-getDay() 是从 [日-六](0-6)，返回 number */
const getWeek = (year, month, day) => {
  const date = new Date(year, month, day);
  return date.getDay();
};
const getWeekday = (year, month, day) => {
  const date = new Date(year, month, day);
  const week = date.getDay();
  return ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][week];
};
/* 获得每个月的日期有多少 */
const titleNode = (item) => (
  <div
    key={item.day}
    className={classname(
      style.calendar_li,
      item.weekDay > 0 && item.weekDay < 6 ? style.bg_gray : style.bg_white,
    )}
  >
    <div>
      <p style={{ fontSize: 16 }}>{item.day}</p>
      <p style={{ fontSize: 12 }}>{item.week}</p>
    </div>
  </div>
);
const getTitleRender = (val) => {
  let title = [val?.frequencyName, '请假', '调班'][val?.checkStatus] || val?.frequencyName;
  if (val?.yesNoPlus && val.frequencyType === 1) {
    title += '+';
  }
  return title;
};

const getMonthCount = (year, month, update, userData, markAccess) => {
  const arr = [31, null, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  const count = arr[month] || (isLeapYear(year) ? 29 : 28);
  return Array.from(new Array(count), (item, value) => {
    const week = getWeekday(year, month, value + 1);
    const day = value + 1;
    const weekDay = getWeek(year, month, value + 1);
    const dataIndex = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(
      2,
      '0',
    )}`;
    return {
      width: 60,
      align: 'center',
      title: titleNode({ week, day, weekDay }),
      dataIndex,
      render: (val) => {
        const titleRender = getTitleRender(val);
        return val?.checkStatus === 0 && val?.dutyType !== 1 ? (
          <PopMark
            update={update}
            title={titleRender}
            dutyType={val?.dutyType}
            markInfo={val}
            markAccess={markAccess}
          />
        ) : (
          <PopExchange
            userData={userData}
            update={update}
            title={titleRender}
            dutyType={val?.dutyType}
            markInfo={val}
          />
        );
      },
    };
  });
};

const createTableData = (val) => {
  const result = [];
  val?.forEach((item) => {
    item?.userS?.forEach((child, index) => {
      const user = omit(child, ['pdbo']);
      const target = {
        user,
        id: `${item.mdutySchedulePlanId}-${index}`,
        scheduleNames: item?.scheduleNames,
        rowSpan: index === 0 ? item?.userS?.length || 1 : 0,
      };
      child?.staffBos?.forEach((cDate) => {
        const key = cDate.frequencyDate;
        target[key] = {
          frequencyType: cDate?.frequencyType,
          yesNoPlus: cDate?.yesNoPlus,
          dutyType: cDate?.dutyType,
          frequencyName: cDate?.frequencyName,
          checkStatus: cDate?.checkStatus,
          userId: child.userId,
          userNames: child.userNames,
          frequencyDate: cDate?.frequencyDate,
          schedulePlanId: cDate?.schedulePlanId,
          remarks: cDate.remarks,
        };
      });
      result.push(target);
    });
  });
  return result;
};

const CalendarTable = (props) => {
  const { onChange, data, update, userData, loading, searchParams } = props;
  const [date, setDate] = useState([]);
  const access = useAccess();
  const monthData = getMonthCount(
    date[0],
    date[1],
    update,
    userData,
    access.insideAccess('unkVPlDfbgT'),
  );

  const tableData = createTableData(data);

  /**
   * @日历方法
   */
  /* 获得上个月的天数 */
  const getPreMonthCount = () => {
    const year = date[0];
    const month = date[1];
    let preYear;
    let preMonth;
    if (month === 0) {
      preYear = year - 1;
      preMonth = 11;
    } else {
      preYear = year;
      preMonth = month - 1;
    }
    setDate([preYear, preMonth]);
    if (onChange) onChange([preYear, preMonth]);
    return getMonthCount(preYear, preMonth);
  };
  /* 获得下个月的天数 */
  const getNextMonthCount = () => {
    const year = date[0];
    const month = date[1];
    let nextYear;
    let nextMonth;
    if (month === 11) {
      nextYear = year + 1;
      nextMonth = 0;
    } else {
      nextYear = year;
      nextMonth = month + 1;
    }
    setDate([nextYear, nextMonth]);
    if (onChange) onChange([nextYear, nextMonth]);
    return getMonthCount(nextYear, nextMonth);
  };

  useEffect(() => {
    setDate([moment().year(), moment().month()]);
  }, []);

  const columns = [
    {
      title: <div className={style.calendar_li_title}>类型</div>,
      width: 60,
      fixed: 'left',
      align: 'center',
      dataIndex: 'scheduleNames',
      render: (val, row) => ({
        children: <div style={{ width: 15, margin: '5px auto' }}>{val}</div>,
        props: { rowSpan: row.rowSpan },
      }),
    },
    {
      title: <div className={style.calendar_li_title}>人员</div>,
      width: 180,
      fixed: 'left',
      align: 'center',
      dataIndex: 'user',
      render: (val) => (
        <div style={{ textAlign: 'left', paddingLeft: 15 }}>
          <Avatar src={val?.userUrl || ''} size={40} style={{ marginRight: 5 }} />
          {val?.userNames || ''}
        </div>
      ),
    },
    ...monthData,
  ];

  console.log('searchData', searchParams);
  return (
    <div className={style.calendar_table}>
      <div className={classname('pos_center', style.calendar_title)}>
        <div className={style.calendar_title_pre}>
          <Badge color="#FF4E00" /> 计薪加班
          <Badge color="#9562FF" /> 需调休加班
        </div>
        <LeftCircleFilled onClick={getPreMonthCount} className={style.calendar_title_icon} />
        {`${date[0]}年${date[1] + 1}月`}
        <RightCircleFilled onClick={getNextMonthCount} className={style.calendar_title_icon} />
        <div className={style.calendar_title_extra}>
          <ExportFile
            name="群组日历"
            url="/common-service/calendar/export"
            data={searchParams?.[0]}
          >
            <Button>导出日历</Button>
          </ExportFile>
        </div>
      </div>
      <Table
        bordered
        size="small"
        rowKey={(record) => record.id}
        dataSource={tableData}
        columns={columns}
        scroll={{ x: 2000 }}
        pagination={false}
        loading={loading}
      />
    </div>
  );
};

export default CalendarTable;