import { Apis } from '@/gen/Apis';
import { RightOutlined } from '@ant-design/icons';
import { useNavigate } from '@umijs/max';
import { Col, Progress, Row, Space } from 'antd';
import { useEffect, useState } from 'react';
import CountUp from 'react-countup';
import WorkOrderPie from '../charts/WorkOrderPie';
import './style_right.scss';
export default function LayoutRight() {
  const navigate = useNavigate();
  const [workOrderAnalysis, setWorkOrderAnalysis] = useState<any>({});
  const getWorkOrderAnalysis = () => {
    Apis.Statistics.IndexCount.WorkOrderAnalysis().then((res) => {
      setWorkOrderAnalysis(res.data);
    });
  };

  useEffect(() => {
    getWorkOrderAnalysis();
  }, []);

  return (
    <div className="right_content">
      <div
        style={{
          padding: '0 0 20px 0',
          fontSize: 16,
          fontWeight: 600,
        }}
      >
        工单分析
      </div>
      <Space direction="vertical" style={{ width: '100%' }}>
        <div
          style={{ backgroundColor: '#F3FAFF', borderRadius: 8, padding: 20 }}
        >
          <div
            style={{
              padding: '0 0 15px 0',
              fontSize: 16,
              fontWeight: 600,
            }}
          >
            待处理工单
          </div>
          <Row gutter={[12, 12]}>
            <Col span={12}>
              <div
                className="work_card_title"
                onClick={() => {
                  navigate('/work_order/list');
                }}
              >
                报修工单 <RightOutlined />
              </div>
              <div className="work_card_number">
                {/* {workOrderAnalysis?.repair || 0} */}
                <CountUp
                  end={workOrderAnalysis?.repair}
                  duration={3}
                  separator=","
                  prefix=""
                />
              </div>
            </Col>
            <Col span={12}>
              <div
                className="work_card_title"
                onClick={() => {
                  navigate('/work_order/list');
                }}
              >
                报事工单 <RightOutlined />
              </div>
              <div className="work_card_number">
                <CountUp
                  end={workOrderAnalysis?.incident}
                  duration={3}
                  separator=","
                  prefix=""
                />
              </div>
            </Col>
            <Col span={12}>
              <div
                className="work_card_title"
                onClick={() => {
                  navigate('/work_order/complaint');
                }}
              >
                投诉工单 <RightOutlined size={12} />
              </div>
              <div className="work_card_number">
                <CountUp
                  end={workOrderAnalysis?.complaint}
                  duration={3}
                  separator=","
                  prefix=""
                />
              </div>
            </Col>
          </Row>
        </div>
        <div>
          <div
            style={{
              padding: '15px 0',
              fontSize: 16,
              fontWeight: 600,
            }}
          >
            工单统计
          </div>
          <WorkOrderPie
            item={{
              list: workOrderAnalysis?.distribution || [],
              total: workOrderAnalysis?.total || 0,
            }}
          />
        </div>
        <div>
          <div
            style={{
              padding: '15px 0',
              fontSize: 16,
              fontWeight: 600,
            }}
          >
            工单数据
          </div>
          <div className="work_order_data">
            <div className="work_order_data_item">
              <Progress
                type="dashboard"
                size={[160, 30]}
                percent={workOrderAnalysis?.data?.completion_rate}
                format={(percent) => {
                  return (
                    <div className="dashboard_progress">
                      <div className="dashboard_value">{`${percent}%`}</div>
                      <div className="dashboard_label">完成率</div>
                    </div>
                  );
                }}
              />
              <div className="work_order_data_cell">
                已完成：{workOrderAnalysis?.data?.completed_count || 0}
              </div>
              <div className="work_order_data_cell">已关闭：{0}</div>
            </div>
            <div className="work_order_data_item">
              <Progress
                type="dashboard"
                size={[160, 30]}
                percent={workOrderAnalysis?.data?.satisfaction_rate}
                format={(percent) => {
                  return (
                    <div className="dashboard_progress">
                      <div className="dashboard_value">{`${percent}%`}</div>
                      <div className="dashboard_label">好评率</div>
                    </div>
                  );
                }}
              />
              <div className="work_order_data_cell">
                已评价：{workOrderAnalysis?.data?.evaluated_count || 0}
              </div>
              <div className="work_order_data_cell">已好评：{0}</div>
            </div>
          </div>
        </div>
      </Space>
    </div>
  );
}
