import { MyPageContainer } from '@/common';
import { Apis } from '@/gen/Apis';
import { ProCard } from '@ant-design/pro-components';
import { useNavigate } from '@umijs/max';
import { FloatButton, Space } from 'antd';
import { useEffect, useState } from 'react';
import Icon3060 from './images/30_60_icon.svg';
import ClosedIcon from './images/ClosedIcon.svg';
import InPerformanceIcon from './images/InPerformanceIcon.svg';
import NotFiledIcon from './images/NotFiledIcon.svg';
import NotStampedIcon from './images/NotStampedIcon.svg';
import PendingApplicationIcon from './images/PendingApplicationIcon.svg';
import TerminatedIcon from './images/TerminatedIcon.svg';
import IconUnreviewed from './images/UnreviewedIcon.svg';
import './styleBi.scss';

export default function Index({ title = '合同Bi' }) {
  const navigate = useNavigate();
  const [getArchiveUsageInfo, setArchiveUsage] = useState<any>({});
  const [getContractsCount, setContractsCount] = useState<any>({});
  const getStatusOverview = async () => {
    const res = await Apis.Statistics.ContractsCount.StatusOverview();
    setContractsCount(res?.data);
    console.log(res, 'res');
  };

  const getArchiveUsage = async () => {
    const res = await Apis.Statistics.ContractsCount.ArchiveUsage();
    setArchiveUsage(res?.data);
  };

  useEffect(() => {
    getStatusOverview();
    getArchiveUsage();
  }, []);

  return (
    <MyPageContainer
      title={title}
      enableTabs={true}
      tabKey="contract_bi"
      tabLabel={title}
    >
      <Space direction="vertical" style={{ width: '100%' }} size="large">
        <ProCard
          bordered
          type="inner"
          gutter={10}
          title="待处理"
          headerBordered
        >
          <Space style={{ width: '100%' }} size="middle">
            <div className="processed_card">
              <div className="processed_card_header">
                <img src={IconUnreviewed} alt="" />
                <div className="processed_card_label">审核中</div>
              </div>
              <div className="processed_card_footer">
                <div className="processed_card_footer_count">
                  {getContractsCount?.pending?.under_approval?.count || 0}份
                </div>
                <div
                  className="unreviewed_btn"
                  onClick={() => {
                    navigate('/contract/contracts');
                  }}
                >
                  去查看
                </div>
              </div>
            </div>
            <div className="processed_card">
              <div className="processed_card_header">
                <img src={NotStampedIcon} alt="" />
                <div className="processed_card_label">未用印章</div>
              </div>
              <div className="processed_card_footer">
                <div className="processed_card_footer_count">
                  {getContractsCount?.pending?.not_sealed?.count || 0}份
                </div>
                <div
                  className="unreviewed_btn"
                  onClick={() => {
                    navigate('/contract/contract_seal_logs');
                  }}
                >
                  去处理
                </div>
              </div>
            </div>
            <div className="processed_card">
              <div className="processed_card_header">
                <img src={NotFiledIcon} alt="" />
                <div className="processed_card_label">未归档</div>
              </div>
              <div className="processed_card_footer">
                <div className="processed_card_footer_count">
                  {getContractsCount?.pending?.not_archived?.count || 0}份
                </div>
                <div
                  className="unreviewed_btn"
                  onClick={() => {
                    navigate('/contract/contract_archives');
                  }}
                >
                  去处理
                </div>
              </div>
            </div>
          </Space>
        </ProCard>
        <ProCard bordered type="inner" title="到期提醒" headerBordered>
          <Space style={{ width: '100%' }} size="middle">
            {/* <div className="processed_card others_card">
              <div className="processed_card_header">
                <img src={NotClosedIcon} alt="" />
                <div className="processed_card_label">未关闭</div>
              </div>
              <div className="processed_card_footer">
                <div className="processed_card_footer_count">
                  {getContractsCount?.reminder?.not_closed?.count || 0}份
                </div>
                <div
                  className="unreviewed_btn"
                  onClick={() => {
                    navigate('/contract/contracts');
                  }}
                >
                  去处理
                </div>
              </div>
            </div> */}
            <div className="processed_card others_card">
              <div className="processed_card_header">
                <img src={Icon3060} alt="" />
                <div className="processed_card_label">30天内到期</div>
              </div>
              <div className="processed_card_footer">
                <div className="processed_card_footer_count">
                  {getContractsCount?.reminder?.expire_30_days?.count || 0}份
                </div>
                <div
                  className="unreviewed_btn"
                  onClick={() => {
                    navigate('/contract/contracts');
                  }}
                >
                  去查看
                </div>
              </div>
            </div>
            <div className="processed_card others_card">
              <div className="processed_card_header">
                <img src={Icon3060} alt="" />
                <div className="processed_card_label">60天内到期</div>
              </div>
              <div className="processed_card_footer">
                <div className="processed_card_footer_count">
                  {getContractsCount?.reminder?.expire_60_days?.count || 0}份
                </div>
                <div
                  className="unreviewed_btn"
                  onClick={() => {
                    navigate('/contract/contracts');
                  }}
                >
                  去查看
                </div>
              </div>
            </div>
          </Space>
        </ProCard>
        <ProCard bordered type="inner" title="其他" headerBordered>
          <Space style={{ width: '100%' }} size="middle">
            <div className="processed_card others_card">
              <div className="processed_card_header">
                <img src={PendingApplicationIcon} alt="" />
                <div className="processed_card_label">待申请</div>
              </div>
              <div className="processed_card_footer">
                <div className="processed_card_footer_count">
                  {getContractsCount?.other?.temporary_storage?.count || 0}份
                </div>
                <div
                  className="unreviewed_btn"
                  onClick={() => {
                    navigate(`/contract/contracts?status=TemporaryStorage`);
                  }}
                >
                  去查看
                </div>
              </div>
            </div>
            <div className="processed_card others_card">
              <div className="processed_card_header">
                <img src={InPerformanceIcon} alt="" />
                <div className="processed_card_label">履约中</div>
              </div>
              <div className="processed_card_footer">
                <div className="processed_card_footer_count">
                  {getContractsCount?.other?.in_progress?.count || 0}份
                </div>
                <div
                  className="unreviewed_btn"
                  onClick={() => {
                    navigate('/contract/contracts');
                  }}
                >
                  去查看
                </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">
                  {getContractsCount?.other?.closed?.count || 0}份
                </div>
                <div
                  className="unreviewed_btn"
                  onClick={() => {
                    navigate(`/contract/contracts?status=Closed`);
                  }}
                >
                  去查看
                </div>
              </div>
            </div>
            <div className="processed_card others_card">
              <div className="processed_card_header">
                <img src={TerminatedIcon} alt="" />
                <div className="processed_card_label">已解除</div>
              </div>
              <div className="processed_card_footer">
                <div className="processed_card_footer_count">
                  {getContractsCount?.other?.terminated?.count || 0}份
                </div>
                <div
                  className="unreviewed_btn"
                  onClick={() => {
                    navigate(`/contract/contracts?status=Terminated`);
                  }}
                >
                  去处理
                </div>
              </div>
            </div>
          </Space>
        </ProCard>
        <ProCard bordered type="inner" title="档案利用" headerBordered>
          <Space style={{ width: '100%' }} size="middle">
            <div className="processed_card others_card">
              <div className="processed_card_header">
                <img src={PendingApplicationIcon} alt="" />
                <div className="processed_card_label">归档合同</div>
              </div>
              <div className="processed_card_footer">
                <div className="processed_card_footer_count">
                  {getArchiveUsageInfo?.archived_count?.count || 0}份
                </div>
                <div
                  className="unreviewed_btn"
                  onClick={() => {
                    navigate(`/contract/contract_archives?key=Finished`);
                  }}
                >
                  去查看
                </div>
              </div>
            </div>
            <div className="processed_card others_card">
              <div className="processed_card_header">
                <img src={InPerformanceIcon} alt="" />
                <div className="processed_card_label">借用中</div>
              </div>
              <div className="processed_card_footer">
                <div className="processed_card_footer_count">
                  {getArchiveUsageInfo?.borrowing_count?.count || 0}份
                </div>
                <div
                  className="unreviewed_btn"
                  onClick={() => {
                    navigate('/contract/contract_archive_use');
                  }}
                >
                  去查看
                </div>
              </div>
            </div>

            <div className="processed_card others_card">
              <div className="processed_card_header">
                <img src={PendingApplicationIcon} alt="" />
                <div className="processed_card_label">借阅数</div>
              </div>
              <div className="processed_card_footer">
                <div className="processed_card_footer_count">
                  {getArchiveUsageInfo?.read_count?.count || 0}份
                </div>
                <div
                  className="unreviewed_btn"
                  onClick={() => {
                    navigate(`/contract/contract_archive_use?key=Read`);
                  }}
                >
                  去查看
                </div>
              </div>
            </div>
          </Space>
        </ProCard>
        <FloatButton
          // icon={<Loading3QuartersOutlined />}
          description="刷新"
          onClick={() => {
            Apis.Statistics.ContractsCount.ClearCache().then(() => {
              // message.success('刷新成功');
              window.location.reload();
            });
          }}
        />
      </Space>
    </MyPageContainer>
  );
}
