import {Card, Calendar, Button, Skeleton} from 'antd';
import css from './index.module.css';
import pcss from '../index.module.css';
import {FC, useState} from 'react';
import classNames from 'classnames';
import {CheckCircleFilled, ClockCircleFilled} from '@ant-design/icons';
import {useMoreLink, useQueryList} from './hooks';
import dayjs from 'dayjs';

const DatePanel: FC = function () {
  const onMoreClick = useMoreLink();
  const [date, setDate] = useState(dayjs());
  const {data, isFetching} = useQueryList(date);

  return (
    <Card className={classNames(css.panel, pcss.flexCard)}>
      <div className={css.panelContent}>
        <Calendar fullscreen={false} onChange={setDate} value={date} />

        <div className={css.panelTitle}>
          <h4>采购单列表</h4>
          <Button
            type='text'
            className='ant-text-btn-color-primary'
            onClick={onMoreClick}
          >
            查看更多
          </Button>
        </div>

        <ul className={css.panelList}>
          {isFetching ? (
            <Skeleton active />
          ) : (
            <>
              {data.map(function ({id, type, orderCode, arrivalTime}) {
                return (
                  <li key={id}>
                    {type === '0' ? (
                      <ClockCircleFilled
                        style={{
                          color: '#bbcdc5',
                          fontSize: '30px',
                          height: '30px',
                        }}
                      />
                    ) : (
                      <CheckCircleFilled
                        style={{
                          color: 'var(--primary-color)',
                          fontSize: '30px',
                          height: '30px',
                        }}
                      />
                    )}
                    <p>
                      <span>{orderCode}</span>
                      <span>{arrivalTime}</span>
                    </p>
                  </li>
                );
              })}
            </>
          )}
        </ul>
      </div>
    </Card>
  );
};

export default DatePanel;
