/**封装列表中的时限
 * endTime_time-now_time() 的绝对值，
 * 正用绿色 剩余   秒倒计时
 * 负用红色 已超XX分钟  显示当前超时时间
 * progressShow 显示进度条 用于详情展示，根据剩余时间倒计时间
 *  不足一分钟：显示:00:ss
    超过一分钟不足一小时,显示：mm:ss
    超过一小时不足一天，显示：hh:mm
    超过一天，显示：DD:hh
 */
import { Progress, Statistic } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import styles from './index.less';
const { Countdown } = Statistic;
interface LimitTimeProps {
  endTime: string; //截止时间
  startTime: string; //开始时间
  progressShow?: boolean; //是否展示进度条样式
  timeText?: string; //时间描述
  handleIsTime?: (status: boolean) => void;
}
const LimitTime: React.FC<LimitTimeProps> = (props) => {
  const {
    endTime,
    progressShow = false,
    startTime,
    timeText,
    handleIsTime,
  } = props;
  const [percent, setPercent] = useState<number>(0);
  const formatDate = useRef<any>('mm 分 ss秒'); //时间日期格式
  const [isTimeout, setIsTimeout] = useState<boolean>(false); //判断是否超时
  let strokeColor = useRef<string>('#87bfff');
  let timer: any;
  //根据时间规则显示
  const judeTimer = (stamp: number) => {
    if (stamp <= 60) {
      //小于1分钟，显示ss秒
      return 'ss秒';
    }
    if (stamp > 60 && stamp <= 3600) {
      //超过一分钟不足一小时,显示：mm:ss
      return 'mm 分 ss秒';
    }
    if (stamp > 3600 && stamp <= 86400) {
      //超过一小时不足一天，显示：hh:mm
      return ' HH 时 mm秒';
    }
    if (stamp >= 86400) {
      //超过一天，显示：DD:hh
      return ' DD 天 HH时';
    }
  };

  useEffect(() => {
    let startStamp = new Date(startTime).getTime(); //获取事件开始时间戳
    let endStamp = new Date(endTime).getTime(); //获取事件截止时间戳
    progressAnimation(startStamp, endStamp);
    if (progressShow) {
      //显示时间动态进度条
      timer = setInterval(() => {
        progressAnimation(startStamp, endStamp);
        if (percent < 0) {
          //进度条为0
          clearInterval(timer);
        }
      }, 3000);
    }
    return () => {
      clearInterval(timer);
    };
  }, [endTime]);

  //进度条计算
  const progressAnimation = (startStamp: number, endStamp: number) => {
    //开始日期/结束日期
    let nowStamp = new Date().getTime(); //获取当前时间戳
    let processingTime = endStamp - nowStamp; //剩余处理时间，进度条倒计时间
    let periodTime = endStamp - startStamp; //截止时间-开始时间的时间戳，处理时段
    if (processingTime < 0) {
      //已超时
      strokeColor.current = '#f00';
      setIsTimeout(true);
      handleIsTime?.(true);
      return;
    }
    setIsTimeout(false);
    handleIsTime?.(false);
    strokeColor.current = '#0a0';
    setPercent(() => {
      let remainderProgress = processingTime / periodTime; //剩余时间，进度条时间比例
      formatDate.current = judeTimer(processingTime * 0.001); //根据时间是规则显示
      const newPercent = remainderProgress * 100; //当前时间/总量时间，划分秒
      if (newPercent < 0) {
        return 0;
      }
      return newPercent;
    });
  };

  //progressShow和普通计时器显示的设定
  let countDownConfig = {
    prefixText: '剩余：',
    valueStyle: { fontSize: '14px', color: '#0a0' },
  };

  if (progressShow) {
    //详情中展示进度条
    countDownConfig = {
      prefixText: `办理截止日期：${endTime} 剩余：`,
      valueStyle: { fontSize: '12px', color: '#f1f2f3' },
    };
  }
  if (endTime) {
    return (
      <div className={styles.downCont}>
        {progressShow && (
          <Progress
            strokeColor={strokeColor.current}
            size={['100%', 26]}
            percent={percent}
            showInfo={false}
          />
        )}
        <div className={progressShow ? styles.timerBody : ''}>
          {isTimeout ? (
            <span className={styles.timeText}>已超 {timeText || '1分钟'}</span>
          ) : (
            <Countdown
              prefix={countDownConfig.prefixText}
              value={endTime}
              format={formatDate.current}
              valueStyle={countDownConfig.valueStyle}
            />
          )}
        </div>
      </div>
    );
  }
  return <></>;
};
export default LimitTime;
