import { MyColumns, MyProTableProps, renderTextHelper } from '@/common';
import { GetFromNow, ShowCurrentDayTime } from '@/common/utils/day';
import { Apis } from '@/gen/Apis';
import {
  CompanyEmployeeBacklogsTypeEnum,
  HouseBillsTypeEnum,
} from '@/gen/Enums';
import { ClockCircleOutlined, FundOutlined } from '@ant-design/icons';
import { ProCard, ProTable } from '@ant-design/pro-components';
import { Col, Empty, Row, Space } from 'antd';
import { useEffect, useState } from 'react';
import CountUp from 'react-countup';
import MyFinancialAnalysisLine from '../charts/FinancialAnalysisLine';
import './style_left.scss';
const RealTimeDynamicsEmployeeBacklogsTypeEnum = {
  ...HouseBillsTypeEnum,
  ...CompanyEmployeeBacklogsTypeEnum,
};
export default function LayoutLeft() {
  const [financialAnalysis, setFinancialAnalysis] = useState<any>({});
  const [todayDynamics, setTodayDynamics] = useState<any>({});
  const [currentTime, setCurrentTime] = useState<string>(ShowCurrentDayTime());
  const getFinancialAnalysis = async () => {
    let res = await Apis.Statistics.IndexCount.FinancialAnalysis();
    setFinancialAnalysis(res?.data);
  };
  const getTodayDynamics = async () => {
    let res = await Apis.Statistics.IndexCount.TodayDynamics();
    setTodayDynamics(res?.data);
  };

  useEffect(() => {
    getFinancialAnalysis();
    getTodayDynamics();

    // 每5分钟调用一次 getTodayDynamics()
    const intervalId = setInterval(() => {
      getFinancialAnalysis();
      getTodayDynamics();
    }, 5 * 60 * 1000); // 5分钟

    return () => {
      clearInterval(intervalId);
    };
  }, []);

  // 每秒更新当前时间
  useEffect(() => {
    const intervalId = setInterval(() => {
      setCurrentTime(ShowCurrentDayTime());
    }, 1000);

    return () => {
      clearInterval(intervalId);
    };
  }, []);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <div style={{ display: 'flex', gap: '15px', flexWrap: 'wrap' }}>
        <ProCard
          title="财务分析"
          className="finance_pro_card financial_analysis_card"
          style={{ flex: '0.5 1 400px', minWidth: '300px' }}
        >
          <div className="finance_pro_card_content pt-15">
            <Row>
              <Col span={8}>
                <div className="finance_pro_card_item">
                  <div className="finance_pro_card_item_val">
                    {financialAnalysis?.month_receivable}
                    <span>元</span>
                  </div>
                  <div style={{ fontSize: '14px' }}>本月应收款</div>
                </div>
              </Col>
              <Col span={8}>
                <div className="finance_pro_card_item">
                  <div className="finance_pro_card_item_val">
                    {financialAnalysis?.month_received}
                    <span>元</span>
                  </div>
                  <div style={{ fontSize: '14px' }}>本月实收款</div>
                </div>
              </Col>
              <Col span={8}>
                <div className="finance_pro_card_item">
                  <div className="finance_pro_card_item_val">
                    {financialAnalysis?.month_rate}%
                  </div>
                  <div style={{ fontSize: '14px' }}>本月收款率</div>
                </div>
              </Col>
            </Row>
          </div>
          <div className="finance_pro_card_content">
            <Row>
              <Col span={8}>
                <div className="finance_pro_card_item">
                  <div className="finance_pro_card_item_val">
                    {financialAnalysis?.year_receivable}
                    <span>元</span>
                  </div>
                  <div style={{ fontSize: '14px' }}>年度应收款</div>
                </div>
              </Col>
              <Col span={8}>
                <div className="finance_pro_card_item">
                  <div className="finance_pro_card_item_val">
                    {financialAnalysis?.year_received}
                    <span>元</span>
                  </div>
                  <div style={{ fontSize: '14px' }}>年度实收款</div>
                </div>
              </Col>
              <Col span={8}>
                <div className="finance_pro_card_item">
                  <div className="finance_pro_card_item_val">
                    {financialAnalysis?.year_rate}%
                  </div>
                  <div style={{ fontSize: '14px' }}>年度收款率</div>
                </div>
              </Col>
            </Row>
          </div>
          <MyFinancialAnalysisLine item={financialAnalysis?.chart_data || []} />
        </ProCard>
        <ProCard
          title="今日动态"
          style={{ flex: '1.5 1 400px', minWidth: '300px' }}
          className="finance_pro_card"
          extra={
            <Space align="center">
              <ClockCircleOutlined />
              {currentTime}
              <div className="circle_content">
                <div className="circle_center"></div>
              </div>
            </Space>
          }
        >
          <Space
            direction="vertical"
            style={{
              width: '100%',
            }}
          >
            <ProCard
              style={{
                backgroundColor: '#F3F8FB',
                width: '100%',
                borderRadius: '8px',
              }}
              title="今日收款"
              extra={
                <div className="today_amount_contents">
                  <span className="amount">
                    <CountUp
                      end={todayDynamics?.today_amount}
                      duration={3}
                      separator=","
                      prefix="¥"
                      decimals={2}
                    />
                  </span>
                  <span className="unit">元</span>
                </div>
              }
            >
              <Row gutter={[15, 15]}>
                {todayDynamics?.type_distribution?.map(
                  (res: any, index: number) => {
                    return (
                      <Col span={6} key={`item_${index}`}>
                        <div className="card_item">
                          <div className="card_item_title">{res?.name}</div>
                          <div>
                            <CountUp
                              end={res?.value}
                              duration={3}
                              separator=","
                              prefix="¥"
                              decimals={2}
                            />
                          </div>
                        </div>
                      </Col>
                    );
                  },
                )}
              </Row>
            </ProCard>

            <div>
              <Space className="bi_min_title">
                <FundOutlined />
                <div className="title">实时动态</div>
              </Space>
              <div className="dynamics_contents">
                {todayDynamics?.dynamics?.length ? '' : <Empty />}
                {todayDynamics?.dynamics?.map((res: any, index: number) => {
                  return (
                    <div key={`item_${index}`} className="real_time_dynamics">
                      <div className={`dynamics_type type_${res?.type}`}></div>
                      <span>{GetFromNow(res?.time)}</span>
                      {res?.type === 'WorkOrder' ? '提报' : '收到'}【
                      {res?.target}】 【
                      <renderTextHelper.Tag
                        Enums={RealTimeDynamicsEmployeeBacklogsTypeEnum}
                        value={res?.type}
                        isColor={false}
                        key="type"
                      />
                      】{res?.amount ? `${res?.amount}元` : ''}
                    </div>
                  );
                })}
              </div>
            </div>
          </Space>
        </ProCard>
      </div>
      <div
        style={{
          flex: 1,
          marginTop: '15px',
        }}
      >
        <ProCard title="小区概括分析" className="finance_pro_card">
          <ProTable
            {...MyProTableProps.props}
            request={async (params, sort) => {
              return MyProTableProps.request(
                params,
                sort,
                Apis.Statistics.IndexCount.CommunityOverview,
              );
            }}
            search={false}
            options={false}
            columns={[
              MyColumns.ID({
                search: false,
              }),
              {
                title: '项目名称',
                dataIndex: 'name',
              },
              {
                title: '房屋数',
                dataIndex: 'house_count',
              },
              {
                title: '车位数',
                dataIndex: 'car_port_count',
              },
              {
                title: '绑定客户数',
                dataIndex: 'customer_count',
              },
              {
                title: '收缴率',
                dataIndex: 'collection_rate',
              },
            ]}
          />
        </ProCard>
      </div>
    </div>
  );
}
