import React from 'react';
import { Space, Card } from 'antd';
import DriverBack from '~/pages/Container/Driver/components/DriverBack';

import StatisticCards from './components/StatisticCards';
import InfoAlerts from './components/InfoAlerts';
import EnterpriseTypeChart from './components/EnterpriseTypeChart';
import ProjectTypeChart from './components/ProjectTypeChart';
import ProjectCompletionTable from './components/ProjectCompletionTable';
import './index.css';

import {
  STATISTIC_CARDS,
  INFO_ALERTS,
  PROJECT_SUMMARY,
  ENTERPRISE_TYPE_STATS,
  PROJECT_TYPE_DISTRIBUTION,
  PROJECT_TOTAL,
  PROJECT_COMPLETION_LIST
} from './mockData';

export default function InstitutionDashboard() {
  return (
    <div className="institution-dashboard">
      <div className="institution-dashboard__toolbar">
        <DriverBack />
      </div>
      <div className="institution-dashboard__top">
        <Card
          title={<span className="institution-card-title">当前评价状态状态统计</span>}
          size="small"
          className="institution-dashboard__status-card institution-panel-card"
          extra={
            <Space size={30} className="institution-dashboard__summary">
              <span>
                项目总数: <strong className="is-blue">{PROJECT_SUMMARY.total}</strong>
              </span>
              <span>
                超期数: <strong className="is-blue">{PROJECT_SUMMARY.overdue}</strong>
              </span>
            </Space>
          }
          styles={{ body: { padding: '16px 34px 17px' } }}
        >
          <StatisticCards data={STATISTIC_CARDS} />
        </Card>

        <Card
          title={<span className="institution-card-title">信息提醒</span>}
          size="small"
          className="institution-dashboard__alerts-card institution-panel-card"
          styles={{ body: { padding: '20px 24px' } }}
        >
          <InfoAlerts data={INFO_ALERTS} />
        </Card>
      </div>

      <div className="institution-dashboard__charts">
        <EnterpriseTypeChart data={ENTERPRISE_TYPE_STATS} />
        <ProjectTypeChart data={PROJECT_TYPE_DISTRIBUTION} total={PROJECT_TOTAL} />
      </div>

      <ProjectCompletionTable data={PROJECT_COMPLETION_LIST} />
    </div>
  );
}