import {Card, Calendar, Button} from 'antd';
import css from './index.module.css';
import pcss from '../index.module.css';
import {FC} from 'react';
import classNames from 'classnames';
import {CheckCircleFilled, ClockCircleFilled} from '@ant-design/icons';
import {Link} from 'react-router-dom';

const DatePanel: FC = function () {
  return (
    <Card className={classNames(css.panel, pcss.flexCard)}>
      <div className={css.panelContent}>
        <Calendar fullscreen={false} />

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

        <ul className={css.panelList}>
          <li>
            <CheckCircleFilled
              style={{
                color: 'var(--primary-color)',
                fontSize: '30px',
                height: '30px',
              }}
            />
            <p>
              <span>DH1231291234</span>
              <span>2020-12-22</span>
            </p>
          </li>
          <li>
            <CheckCircleFilled
              style={{
                color: 'var(--primary-color)',
                fontSize: '30px',
                height: '30px',
              }}
            />
            <p>
              <span>DH1231291234</span>
              <span>2020-12-22</span>
            </p>
          </li>
          <li>
            <ClockCircleFilled
              style={{color: '#bbcdc5', fontSize: '30px', height: '30px'}}
            />
            <p>
              <span>DH1231291234</span>
              <span>2020-12-22</span>
            </p>
          </li>
          <li>
            <CheckCircleFilled
              style={{
                color: 'var(--primary-color)',
                fontSize: '30px',
                height: '30px',
              }}
            />
            <p>
              <span>DH1231291234</span>
              <span>2020-12-22</span>
            </p>
          </li>
          <li>
            <ClockCircleFilled
              style={{color: '#bbcdc5', fontSize: '30px', height: '30px'}}
            />
            <p>
              <span>DH1231291234</span>
              <span>2020-12-22</span>
            </p>
          </li>
          <li>
            <ClockCircleFilled
              style={{color: '#bbcdc5', fontSize: '30px', height: '30px'}}
            />
            <p>
              <span>DH1231291234</span>
              <span>2020-12-22</span>
            </p>
          </li>
          <li>
            <ClockCircleFilled
              style={{color: '#bbcdc5', fontSize: '30px', height: '30px'}}
            />
            <p>
              <span>DH1231291234</span>
              <span>2020-12-22</span>
            </p>
          </li>
        </ul>
      </div>
    </Card>
  );
};

export default DatePanel;
