import { getStat } from '@/services/api';
import type { TinyRingConfig } from '@ant-design/charts';
import { Tiny } from '@ant-design/charts';
import { PageContainer, ProCard, StatisticCard } from '@ant-design/pro-components';
import { Card, Statistic, message } from 'antd';
import RcResizeObserver from 'rc-resize-observer';
import { useLayoutEffect, useState } from 'react';
import { Stat } from './stat';

const percentRing = (percent: number, frontColor: string): React.JSX.Element => {
  const TinyRing = Tiny.Ring as (props: TinyRingConfig) => JSX.Element;
  const config: TinyRingConfig = {
    percent: percent / 100,
    width: 120,
    height: 120,
    color: ['#E8EFF5', frontColor],
    annotations: [
      {
        type: 'text',
        style: {
          text: `${percent}%`,
          x: '50%',
          y: '50%',
          textAlign: 'center',
          fontSize: 16,
          fontStyle: 'bold',
        },
      },
    ],
  };

  return <TinyRing {...config} />;
};

const Logs: React.FC = () => {
  const [responsive, setResponsive] = useState(false);
  const [messageApi, contextHolder] = message.useMessage();
  const [stat, setStat] = useState<Stat>({
    todayPT: 0,
    totalPT: 0,
    oreo: 0,
    report: 0,
    allSuccess: 0,
    all: 0,
  });
  const [loading, setLoading] = useState(true);

  useLayoutEffect(() => {
    getStat()
      .then((res) => {
        setStat(res.data);
        setLoading(false);
      })
      .catch((err) => {
        messageApi.open({
          type: 'error',
          content: '获取失败！' + err,
        });
      });
  }, []);
  return (
    <PageContainer>
      {contextHolder}
      {!loading && (
        <Card style={{ color: '#f5f5f5' }}>
          <RcResizeObserver
            key="resize-observer"
            onResize={(offset) => {
              setResponsive(offset.width < 596);
            }}
          >
            <ProCard split={responsive ? 'horizontal' : 'vertical'}>
              <ProCard colSpan="Auto">
                <ProCard hoverable>左侧内容</ProCard>
              </ProCard>
              <ProCard colSpan="170px">
                <StatisticCard
                  hoverable
                  style={{ marginTop: '0vh' }}
                  statistic={{
                    title: '今日预填写工单数',
                    value: stat.todayPT,
                    description: (
                      <Statistic
                        style={{ marginTop: '15vh', marginBottom: '8vh' }}
                        title="今日反馈数"
                        value={stat.report}
                      />
                    ),
                  }}
                />
              </ProCard>
              <ProCard colSpan="360px">
                <StatisticCard.Group direction={responsive ? 'row' : 'column'}>
                  <StatisticCard
                    hoverable
                    chart={percentRing(
                      Math.round(((stat.oreo / stat.totalPT) * 1000) / 10),
                      '#00CC66',
                    )}
                    statistic={{
                      title: '加入 Oreo 工单数',
                      value: stat.oreo,
                      description: <Statistic title="预填写工单总数" value={stat.totalPT} />,
                    }}
                    chartPlacement="left"
                  />
                  <StatisticCard
                    hoverable
                    style={{ marginTop: '3vh' }}
                    chart={percentRing(
                      Math.round((stat.allSuccess / stat.all) * 1000) / 10,
                      '#66AFF4',
                    )}
                    statistic={{
                      title: '维修成功次数',
                      value: stat.allSuccess,
                      description: <Statistic title="Oreo、ETA 总工单数" value={stat.all} />,
                    }}
                    chartPlacement="left"
                  />
                </StatisticCard.Group>
              </ProCard>
            </ProCard>
          </RcResizeObserver>
        </Card>
      )}
    </PageContainer>
  );
};
export default Logs;