import rightBack from '@/assets/images/newMain/rightBack.png';
import DescriptionItem from '@/components/DescriptionItem';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import { ConfigProvider, Popover } from 'antd';
import classNames from 'classnames';
import React, { useEffect, useState } from 'react';
import styles from './index.less';
import dayjs from 'dayjs';
import services from '@/services';

const LS = {
  color: '#BCCEE9',
  // fontFamily: 'DingTalk JinBuTi',
  fontSize: '20px',
  fontWeight: 400,
  lineHeight: 1.1,
};

const ResourceElements: React.FC = () => {
  const { dispatch } = useGlobalModalServices();
  const [sensorCount, setSensorCount] = useState<number>(0);

  const handleClick = (item: { url?: string; onClick?: () => void }) => {
    if (item.onClick) {
      item.onClick();
    } else if (item.url) {
      window.open(item.url, '_blank');
    }
  };
  const jumpSystem = [
    {
      name: '物联感知平台',
      url: 'https://10.1.174.34:13200/iot-platform-screen',
    },
    {
      name: '网格基座',
      url: 'https://10.1.174.34:13600/user/autoLogin',
    },
  ];

  const list = [
    {
      name: '汇聚数据',
      unit: '亿条',
      decimals: 2,
      path: 'DataGovernance',
      value: 12.13,
    },
    {
      name: '感知委内接入',
      unit: '万个',
      decimals: 2,
      path: '',
      value: sensorCount,
    },

    {
      name: '资源',
      unit: '类',
      path: '',
      value: 18,
    },
    {
      name: '部件',
      unit: '万个',
      decimals: 2,
      path: '',
      value: 379.9,
    },
    {
      name: '网格',
      unit: '个',
      value: 19872,
      path: '',
    },
  ];

  
  /** 获取数据   */
  const getData = () => {
    services.DataBase.getGzInfoData({
      typeCode: 'gz-sbzs',
    }).then((res) => {
      if (res.code === 200) {
        // 将感知源数量转换为万个单位
        const sensorCountInTenThousand = (res.data?.sensorInner || 0) / 10000;
        setSensorCount(sensorCountInTenThousand);
      }
    });
  };

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

  return (
    <div className={styles.container}>
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}
      >
        <div className={styles.title}>
          <span>城管资源要素</span>
        </div>
        <ConfigProvider
          theme={{
            token: {
              sizePopupArrow: 0,
              colorBgElevated: 'rgba(41, 84, 136, 0.95)',
            },
          }}
        >
          <Popover
            trigger={'click'}
            content={
              <div className={styles.otherSystem}>
                {jumpSystem?.map((it) => (
                  <div key={it.name} className={styles.systemItem}>
                    <span onClick={() => handleClick(it)}>{it.name}</span>
                  </div>
                ))}
              </div>
            }
            placement="bottomRight"
          >
            <div
              className={classNames(styles.rightBtn, {
                [styles.bindClick]: !Boolean(jumpSystem?.length),
              })}
            >
              <img src={rightBack} alt="" />
            </div>
          </Popover>
        </ConfigProvider>
      </div>

      <div className={styles.content}>
        {list.map((item) => {
          return (
            <DescriptionItem
              key={item.name}
              onClick={
                item.path.length > 0
                  ? () => {
                      dispatch.push(item.path as any);
                    }
                  : undefined
              }
              value={item.value}
              decimals={item.decimals ?? 0}
              name={item.name}
              unit={item.unit}
              labelStyle={LS}
            />
          );
        })}
      </div>
    </div>
  );
};

export default ResourceElements;
