import { Badge, Flex, Space } from 'antd';
import EChartsReact from 'echarts-for-react';
import { cloneDeep, values } from 'lodash';
import React, { useLayoutEffect, useMemo, useRef } from 'react';
import BaseCard from '../../../components/BaseCard';
import styles from './index.less';
import option from './option';
import { useRequest } from 'ahooks';
import services from '@/services';

/** @name 情况 */
const PipelineSituation: React.FC = () => {
  const chartRef = useRef<any>();

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

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

   // 管廊概况
   const { data: gxflData } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'hyzm-gl-gxfl',
      }).then((res) => {
        if (res.code === 200) {
          return res?.data?.data?.records || {};
        }
        throw new Error('获取数据失败');
      })
  );

  const pieData = useMemo(() => {
    if(gxflData?.length) {
      return gxflData?.map((item: any) => {
        return {
          value: Number(item.cd).toFixed(3),
          name: item.gxlxmc
        }
      })
    }
    return []
  }, [gxflData]);

  // 计算总和用于计算百分比
  const total = useMemo(() => pieData.reduce((sum, item) => sum + Number(item.value), 0), [pieData]);

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

  return (
    <BaseCard
      w={902}
      h={304}
      title={
        <Space size={20}>
          <span>
            全市入廊投运管线情况
          </span>
          <Space>共 <span style={{ color:'#fff' }}>{gxflData?.length}</span> 类管线</Space>
          <Space>共 <span style={{ color:'#fff' }} >{total?.toFixed(3)}</span> 千米</Space>
        </Space>
      }
    >
      <Flex align="center" gap={60} className={styles.container}>
        <div
          style={{
            height: 160,
            width: 160,
          }}
        >
          <EChartsReact
            ref={chartRef}
            style={{
              height: 160,
              width: 160,
            }}
            option={PieOption}
          />
        </div>

        <div className={styles.legendContent}>
          {pieData.map((item, index) => {
            const percentage = ((item.value / total) * 100).toFixed(2);
            return (
              <div key={index} className={styles.legendBg}>
                <Badge color={colors[index % colors.length]} text={item.name} />
                {/* <Badge color={colors[index]} /> */}
                <div className={styles.legendInfo}>
                  {/* <span className={styles.name}>{item.name}</span> */}
                  <span className={styles.value}>{item.value}千米</span>
                  <span className={styles.percentage}>{percentage}%</span>
                </div>
              </div>
            );
          })}
        </div>
      </Flex>
    </BaseCard>
  );
};

export default PipelineSituation;
