import React, { useEffect, useRef, useState } from 'react';
import {InfiniteScroll, DotLoading } from 'antd-mobile';
import dayjs from "dayjs";
import { Calendar } from "../../common/Calendar";
import imgSrc from "./static/data.png";
import calendar from "./static/calendar.svg";

import './style/index.less';
import { IOTDataLogInfo } from './interface';


const IOTDataLog = (props:IOTDataLogInfo) => {
  const day2 = new Date();
  day2.setTime(day2.getTime());
  const nowDate = day2.getFullYear() + "/" + (day2.getMonth() + 1 < 10 ? '0' : '') + (day2.getMonth() + 1) + "/" + (day2.getDate() < 10 ? '0' : '')+ day2.getDate();

  const {dataSource=[],confirmChange,activeDate=nowDate,icon,title,more,loadMore} = props;
  const [currentDate, setCurrentDate] = useState<string>(activeDate);
  const [currentDateTemp, setCurrentDateTemp] = useState<string>(activeDate);
  const [calendarShow, setCalendarShow] = useState<boolean>(false);

  return (
    <div className='record-box'>
      {icon?.show || title? <div className="record-title">
            {
              icon?.show ? (
                <div className="record-title-icon">
                  <span className={['record-title-icon-image', icon?.value ? icon.value : 'insideicon-cu-1'].join(' ')}></span>
                </div>
              ):null
            }

            {title?<div className="record-title-text" style={{ marginLeft: icon?.show ? '0' : '.2rem' }}>
              <div className="record-text-main">{ title }</div>
            </div>:null}
      </div>:null}
      <div className='date-calendar' onClick={() => {
          setCalendarShow(true);
        }} >
        <span className='dates'>{dayjs(currentDate).format('YYYY年MM月DD日')}{currentDate === nowDate ? '(今日)' : ''}</span>
        <img className='date-icon' src={calendar}/>
      </div>

      <div className={`record-list ${dataSource.length > 0?'record-list-height':'record-nolist-height'}`}>
        {
          dataSource.length > 0 ?
            (
              <>
              {
                dataSource.map((items:any,indexs:number)=>(
                  <div key={indexs} className='record-list-item'>
                  <div className='record-item-left'>
                    {
                      indexs !== 0 && (
                        <div className='item-line-top'></div>
                      )
                    }
                    <span>{items.time}</span>
                    <div className='item-line-bottom'></div>
                  </div>
                  <div className='record-item-right'>
                    <div className='record-item-type'>{items.content}</div>
                  </div>
                </div>
                ))
              }
              <InfiniteScroll loadMore={loadMore} hasMore={more}>
                {more ? (
                  <>
                    <span className='loading'>数据加载中</span>
                    <DotLoading />
                  </>
                  ) : (
                    <span className='loadComplete'>没有更多的数据了~</span>
                  )
                }
              </InfiniteScroll>
              </>
            )
            :
            (
              <div className='default-page'>
                <div className='default-box'>
                <img src={imgSrc} alt="" className='default-img' />
                <span className='default-text'>暂无数据记录</span>
                </div>
              </div>
            )
        }
      </div>

      <div className='calendar-box-mark' style={{ visibility: calendarShow ? 'visible' : 'hidden' }}>
        <div className={`calendar-box ${calendarShow && 'show'}`}>
          <div className='calendar-box-title'>
            <div className='cancel-btn' onClick={() => {
              setCalendarShow(false);
            }}>
              取消
            </div>
            <span className='title-btn'>日期筛选</span>
            <div className='ok-btn' onClick={() => {
              setCalendarShow(false);
              confirmChange&&confirmChange(currentDateTemp)
              setCurrentDate(currentDateTemp);
            }}>
              确定
            </div>
          </div>
          <Calendar
            onDateClick={(date: any) => { setCurrentDateTemp(date.format('YYYY/MM/DD')) }}
            showType={'month'}
            markType="dot"
            currentDate={currentDateTemp}
          />
        </div>
      </div>
    </div>
  )
}

export default IOTDataLog;