import {Card} from 'antd';
import css from '../index.module.css';
import {FC} from 'react';
import {
  ResponsiveContainer,
  XAxis,
  YAxis,
  Tooltip,
  Legend,
  AreaChart,
  Area,
} from 'recharts';
import classNames from 'classnames';
import {useFullscreen} from '../hooks';

const data = [
  {
    name: '03-06',
    data: 290,
    value: 590,
  },
  {
    name: '03-07',
    data: 268,
    value: 868,
  },
  {
    name: '03-08',
    data: 397,
    value: 1397,
  },
  {
    name: '03-09',
    data: 2280,
    value: 1480,
  },
  {
    name: '03-10',
    data: 120,
    value: 1520,
  },
  {
    name: '03-11',
    data: 2400,
    value: 1400,
  },
  {
    name: '03-12',
    data: 1500,
    value: 1200,
  },
  {
    name: '03-13',
    data: 1900,
    value: 100,
  },
];

const FinishChart: FC = function () {
  const ref = useFullscreen();

  return (
    <Card
      ref={ref}
      title='产成品出入库统计'
      className={classNames(css.card, css.flexCard)}
    >
      <ResponsiveContainer>
        <AreaChart data={data}>
          <XAxis dataKey='name' />
          <YAxis />
          <Legend
            formatter={function (name: string) {
              return name === 'value' ? '入库' : '出库';
            }}
          />
          <Tooltip
            formatter={function (value: string, name: string) {
              return [value, name === 'value' ? '入库' : '出库'];
            }}
          />
          <Area
            type='monotone'
            dataKey='value'
            stroke='#00a6ca'
            fill='#E1F6FC'
          />
          <Area
            type='monotone'
            dataKey='data'
            stroke='#82ca9d'
            fill='#E8F5ED'
          />
        </AreaChart>
      </ResponsiveContainer>
    </Card>
  );
};

export default FinishChart;
