import EmptyWithConditions from '@/components/EmptyWithConditions';
import services from '@/services';
import { getPercentWithPrecision } from '@/utils';
import { Badge, Flex } from 'antd';
import EChartsReact from 'echarts-for-react';
import { cloneDeep } from 'lodash';
import React, {
  memo,
  useEffect,
  useLayoutEffect,
  useMemo,
  useRef,
  useState,
} from 'react';
import BaseCard from '../../../components/BaseCard';
import styles from './index.less';
import { pieOption } from './option';

/** @name 全市已移交纳入管理综合管廊概况 */
const Overview: React.FC<{ total: number }> = memo((props) => {
  const { total } = props;
  const [pieData, setPieData] = useState<
    {
      name: string;
      value: number;
      percent?: number;
    }[]
  >([]);
  const chartRef = useRef<any>();

  /** 获取数据*/
  const getData = () => {
    services.DataBase.getSjdzInfoData({
      typeCode: 'hyzm-zxssjbqk',
    }).then((res) => {
      if (res.code === 200) {
        const record = res.data?.data?.records[0];
        /** 获取百分比  */
        const percent = getPercentWithPrecision(
          [record.led, record.zmd - record.led],
          2,
        );
        const data = [
          {
            name: 'LED光源灯盏数',
            value: record.led,
            percent: percent[0],
          },
          {
            name: '其他灯盏数',
            value: record.zmd - record.led,
            percent: percent[1],
          },
        ];

        setPieData(data);
      }
    });
  };

  useEffect(() => {
    getData();
  }, []);
  const colors = [
    '#5DDDFF',
    '#A550FF',
    '#F07283',
    '#7664EC',
    '#77E67B',
    '#35B2FF',
    '#FFE335',
    '#FF9B5D',
  ];

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

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

  return (
    <BaseCard
      w={755}
      h={281}
      title={`市管功能照明灯盏数    ${total ?? '--'} 万盏    功率  23031 千瓦`}
    >
      <EmptyWithConditions conditions={pieData.length === 0}>
        <Flex align="center" gap={60} className={styles.container}>
          <div
            style={{
              height: 130,
              width: 130,
            }}
          >
            <EChartsReact
              ref={chartRef}
              style={{
                height: 130,
                width: 130,
              }}
              option={PieOption}
            ></EChartsReact>
          </div>

          <div className={styles.legendContent}>
            {pieData.map((item, index) => {
              return (
                <Flex key={index} className={styles.legendBg} gap={20}>
                  <Badge color={colors[index % colors.length]} />

                  <div>{item.name}</div>
                  <div>{item.value} 盏</div>
                  <div>{item.percent} %</div>
                </Flex>
              );
            })}
          </div>
        </Flex>
      </EmptyWithConditions>
    </BaseCard>
  );
});

export default Overview;
