import { MyPageContainer } from '@/common';
import { Apis } from '@/gen/Apis';
import { ProCard } from '@ant-design/pro-components';
import { useNavigate } from '@umijs/max';
import { Progress, Space } from 'antd';
import { useEffect, useState } from 'react';
import ClosedIcon from './images/ClosedIcon.svg';
import IconForFollowUpVisit from './images/ForFollowUpVisit.svg';
import ImgAssignedIcon from './images/ImgAssignedIcon.svg';
import ProcessingIcon from './images/ProcessingIcon.svg';
import ToBeInspectedIcon from './images/ToBeInspected.svg';
import ToBePaidIcon from './images/ToBePaid.svg';
import './styleBi.scss';

export default function Index({ title = '工单Bi' }) {
  const navigate = useNavigate();

  const [getStatusOverview, setStatusOverview] = useState<any>({});
  const [getRateStatistics, setRateStatistics] = useState<any>({});
  const getHouseWorkOrdersCount = async () => {
    const res = await Apis.Statistics.HouseWorkOrdersCount.StatusOverview();
    setStatusOverview(res?.data);
    const res_s = await Apis.Statistics.HouseWorkOrdersCount.RateStatistics();
    setRateStatistics(res_s?.data);
    console.log(res, 'res');
  };

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

  return (
    <MyPageContainer
      title={title}
      enableTabs={true}
      tabKey="work_order_bi"
      tabLabel={title}
    >
      <Space direction="vertical" style={{ width: '100%' }} size="large">
        <div
          style={{
            width: '98%',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            marginBottom: '8px',
            gap: '24px',
          }}
        >
          <ProCard bordered type="inner" title="工单完成率" headerBordered>
            <Space style={{ padding: '10px 15px' }}>
              <div>
                <Progress
                  showInfo={false}
                  type="circle"
                  size="default"
                  percent={getRateStatistics?.completion?.rate}
                />
              </div>
              <div className="statistic_info">
                <div className="statistic_proportion">
                  完成占比率 <span>92.9%</span>
                </div>
                <div className="statistic_item">
                  <span></span> 工单总数：
                  {getRateStatistics?.completion?.total_count}
                </div>
                <div className="statistic_item">
                  <span></span> 完成总数：
                  {getRateStatistics?.completion?.completed_count}
                </div>
              </div>
            </Space>
          </ProCard>
          <ProCard bordered type="inner" title="工单好评率" headerBordered>
            <Space style={{ padding: '10px 15px' }}>
              <div>
                <Progress
                  showInfo={false}
                  type="circle"
                  size="default"
                  strokeColor="#FAAD14"
                  percent={getRateStatistics?.positive?.rate}
                />
              </div>
              <div className="statistic_info good_review">
                <div className="statistic_proportion">
                  好评占比率 <span>{getRateStatistics?.positive?.rate}%</span>
                </div>
                <div className="statistic_item">
                  <span></span> 工单总数：
                  {getRateStatistics?.positive?.total_count}
                </div>
                <div className="statistic_item">
                  <span></span> 好评总数：
                  {getRateStatistics?.positive?.positive_count}
                </div>
              </div>
            </Space>
          </ProCard>
          <ProCard bordered type="inner" title="工单回访率" headerBordered>
            <Space style={{ padding: '10px 15px' }}>
              <div>
                <Progress
                  showInfo={false}
                  type="circle"
                  size="default"
                  percent={getRateStatistics?.visit?.rate}
                  strokeColor="#73D13D"
                />
              </div>
              <div
                className="statistic_info follow_up_isit
"
              >
                <div className="statistic_proportion">
                  回访占比率 <span>{getRateStatistics?.visit?.rate}%</span>
                </div>
                <div className="statistic_item">
                  <span></span> 工单总数：
                  {getRateStatistics?.visit?.total_count}
                </div>
                <div className="statistic_item">
                  <span></span> 回访总数：
                  {getRateStatistics?.visit?.visited_count}
                </div>
              </div>
            </Space>
          </ProCard>
        </div>

        <ProCard
          bordered
          type="inner"
          title="工单数据概览"
          headerBordered
          subTitle={`更新时间:${getStatusOverview?.updated_at || ''}`}
        >
          <Space
            direction="vertical"
            size="large"
            style={{ padding: '10px 0' }}
          >
            <Space style={{ width: '100%' }} size="middle">
              <div className="processed_card">
                <div className="processed_card_header">
                  <img src={ImgAssignedIcon} alt="" />
                  <div className="processed_card_label">待指派</div>
                </div>
                <div className="processed_card_footer">
                  <div className="processed_card_footer_count">
                    {getStatusOverview?.unassigned?.count || 0}单
                  </div>
                  <div
                    className="unreviewed_btn"
                    onClick={() => {
                      navigate(`/work_order/list?status=Pending&key=1`);
                    }}
                  >
                    去指派
                  </div>
                </div>
              </div>
              <div className="processed_card others_card">
                <div className="processed_card_header">
                  <img src={ProcessingIcon} alt="" />
                  <div className="processed_card_label">处理中</div>
                </div>
                <div className="processed_card_footer">
                  <div className="processed_card_footer_count">
                    {getStatusOverview?.processing?.count || 0}单
                  </div>
                  <div
                    className="unreviewed_btn"
                    onClick={() => {
                      navigate(`/work_order/list?status=Processing&key=1`);
                    }}
                  >
                    点处理
                  </div>
                </div>
              </div>
              <div className="processed_card others_card">
                <div className="processed_card_header">
                  <img src={IconForFollowUpVisit} alt="" />
                  <div className="processed_card_label">未回访</div>
                </div>
                <div className="processed_card_footer">
                  <div className="processed_card_footer_count">
                    {getStatusOverview?.unvisited?.count || 0}单
                  </div>
                  <div
                    className="unreviewed_btn"
                    onClick={() => {
                      navigate(`/work_order/visited?key=1`);
                    }}
                  >
                    点回访
                  </div>
                </div>
              </div>
            </Space>
            <Space style={{ width: '100%' }} size="middle">
              <div className="processed_card others_card">
                <div className="processed_card_header">
                  <img src={ToBePaidIcon} alt="" />
                  <div className="processed_card_label">待支付</div>
                </div>
                <div className="processed_card_footer">
                  <div className="processed_card_footer_count">
                    {getStatusOverview?.pending_payment?.count || 0}单
                  </div>
                  <div
                    className="unreviewed_btn"
                    onClick={() => {
                      navigate(`/work_order/list?status=PendingPayment&key=1`);
                    }}
                  >
                    去收款
                  </div>
                </div>
              </div>
              <div className="processed_card others_card">
                <div className="processed_card_header">
                  <img src={ToBeInspectedIcon} alt="" />
                  <div className="processed_card_label">待验收</div>
                </div>
                <div className="processed_card_footer">
                  <div className="processed_card_footer_count">
                    {getStatusOverview?.pending_acceptance?.count || 0}单
                  </div>
                  <div
                    className="unreviewed_btn"
                    onClick={() => {
                      navigate(
                        `/work_order/list?status=PendingAcceptance&key=1`,
                      );
                    }}
                  >
                    查看
                  </div>
                </div>
              </div>
              <div className="processed_card others_card">
                <div className="processed_card_header">
                  <img src={ClosedIcon} alt="" />
                  <div className="processed_card_label">已关闭</div>
                </div>
                <div className="processed_card_footer">
                  <div className="processed_card_footer_count">
                    {getStatusOverview?.closed?.count || 0}单
                  </div>
                  <div
                    className="unreviewed_btn"
                    onClick={() => {
                      navigate(`/work_order/list?status=Closed&key=1`);
                    }}
                  >
                    查看
                  </div>
                </div>
              </div>
            </Space>
          </Space>
        </ProCard>
      </Space>
    </MyPageContainer>
  );
}
