import EmptyWithConditions from '@/components/EmptyWithConditions';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import services from '@/services';
import { useSetState } from 'ahooks';
import { Badge, Flex } from 'antd';
import EChartsReact from 'echarts-for-react';
import { cloneDeep } from 'lodash';
import React, { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
import BaseCard from '../../../components/BaseCard';
import styles from './index.less';
import option from './option';
/** @name 感知设备 */
const SensingDevice: React.FC = () => {
  const chartRef = useRef<any>();
  const { dispatch } = useGlobalModalServices();

  const [dataSource, setDataSource] = useSetState<{
    total?: string;
    list: {
      name: string;
      value: number;
    }[];
  }>({
    list: [],
  });

  const colors = [
    '#5DDDFF',
    '#A550FF',
    '#F07283',
    '#7664EC',
    '#77E67B',
    '#35B2FF',
    '#FFE335',
    '#FF9B5D',
  ];

  useLayoutEffect(() => {
    chartRef.current?.resize();
  }, []);

  /** 获取数据*/
  const getData = () => {
    services.DataBase.getGzInfoData({
      typeCode: 'gz-zm-sblx',
    }).then((res) => {
      if (res.code === 200) {
        const total = res.data.reduce((pre: number, cur: any) => {
          return pre + cur.sensorTotal;
        }, 0);

        const list = res.data.map((item: any) => {
          return {
            name: item.dataCodeName,
            value: item.sensorTotal,
          };
        });
        setDataSource({
          total,
          list,
        });
      }
    });
  };

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

  const PieOption = useMemo(() => {
    const temp = cloneDeep(option) as any;
    temp.color = colors;
    temp.series[0].data = dataSource.list;
    return temp;
  }, [dataSource.list]);

  return (
    <BaseCard w={755} h={222} title={`感知设备${dataSource.total ?? '--'}个`}>
      <EmptyWithConditions conditions={dataSource.list.length === 0}>
        <Flex
          gap={30}
          className={styles.container}
          onClick={() => {
            // if (false) {
            dispatch.push('LightingDeviceStatus', {
              title: `感知设备运行态势`,
            });
            // }
          }}
        >
          <div
            style={{
              height: 120,
              width: 120,
            }}
          >
            <EChartsReact
              ref={chartRef}
              style={{
                height: 120,
                width: 120,
              }}
              option={PieOption}
            ></EChartsReact>
          </div>

          <div className={styles.legendContent}>
            {dataSource.list?.map((item, index) => {
              return (
                <div key={index} className={styles.legendBg}>
                  <Badge
                    color={colors[index % colors.length]}
                    text={item.name}
                  />
                  <div className={styles.legendText}>{item.value}</div>
                  <div>个</div>
                </div>
              );
            })}
          </div>
        </Flex>
      </EmptyWithConditions>
    </BaseCard>
  );
};

export default SensingDevice;
