import DescriptionItem from '@/components/DescriptionItem';
import ModuleTitleWithTabs from '@/pages/Home_v_2504/components/common/ModuleTitleWithTabs';
import services from '@/services';
import { useRequest } from 'ahooks';
import { Flex } from 'antd';
import ReactEcharts from 'echarts-for-react';
import { useMemo } from 'react';
import styles from './index.less';
const AbsorbSiteSituation = ({ searchTime }: { searchTime: any }) => {
  const commonValueStyle = {
    fontFamily: 'D-DIN',
    fontSize: '28px',
    fontWeight: 700,
  };

  const commonLabelStyle = {
    color: 'rgb(188, 206, 233)',
    fontSize: '14px',
    fontWeight: 400,
  };

  const commonUnitStyle = {
    color: '#BCCEE9',
    fontSize: '14px',
  };
  const { data } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-jzlj-gdslsxkc',
        params: {
          ...searchTime,
        },
      }).then((res) => {
        if (res.code === 200) {
          return res?.data?.data?.records;
        }
        throw new Error('获取数据失败');
      }),
    {
      refreshDeps: [searchTime],
    },
  );
  const infoData = useMemo(() => {
    const gds = data?.find((item: any) => item.lx === 'gds'); //固定式建筑垃圾消纳场
    const lsx = data?.find((item: any) => item.lx === 'lsx'); //临时性建筑垃圾转动调配场
    return {
      total: (gds?.zrl ?? 0) + (lsx?.zrl ?? 0),
      residue: (gds?.sykr ?? 0) + (lsx?.sykr ?? 0),
      list: [
        // {
        //   value: gds?.total ?? '--',
        //   label: '固定式建筑垃圾消纳场数量',
        //   unit: '个',
        // },
        // {
        //   value: lsx?.total??'--',
        //   label: '临时性建筑垃圾转动调配场数量',
        //   unit: '个',
        // },
        {
          value: (gds?.zrl ?? 0) + (lsx?.zrl ?? 0),
          label: '总容量',
          unit: '万方',
        },
        {
          value: (gds?.sykr ?? 0) + (lsx?.sykr ?? 0),
          label: '剩余容量',
          unit: '万方',
        },
      ],
    };
  }, [data]);

  const getOption = () => {
    return {
      grid: {
        top: '0%',
        left: '0%',
        right: '0%',
        bottom: '0%',
        containLabel: true,
      },
      tooltip: {
        show: true,
        borderWidth: '0',
        backgroundColor: 'rgba(73,81,92,.95)', //背景颜色
        textStyle: {
          color: '#fff', //字体颜色
        },
        formatter: (params: any) => {
        

          return `
              <div >
               <div style="display: flex; align-items: center;">
               <div style="width: 10px; height: 10px; border-radius: 50%; background: ${params.color}; margin-right: 5px"></div>
               <span style="font-size: 14px;">${params?.seriesName}</span>
               </div>
                <span style="font-size: 16px; font-weight: bold;">${params?.value?.toFixed(0)}</span>
              </div>
            `;
        },
      },
      legend: {
        show: false,
      },

      // 极坐标系的角度轴
      angleAxis: [
        {
          id: 1,
          max: infoData?.total || 100,
          clockwise: true, // 逆时针
          // 隐藏刻度线
          show: false,
          startAngle: 120,
          polarId: 1,
        },
      ],
      // 极坐标系的径向轴。
      radiusAxis: [
        {
          type: 'category',
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          polarId: 1,
        },
      ],
      // 极坐标系
      polar: [
        {
          id: 1,
          center: ['50%', '50%'], //中心点位置
          radius: '148%', //图形大小
        },
      ],
      series: [
        {
          type: 'bar',
          z: 10,
          data: [infoData?.residue],
          // data:[1000],
          name: '剩余容量',
          coordinateSystem: 'polar',

          barWidth: 15,
          itemStyle: {
            normal: {
              opacity: 1,
              color: '#31c6fa',
            },
          },
        },
        {
          type: 'pie',
          name: '内层细圆环',
          radius: ['76%', '71%'],
          center: ['50%', '50%'],
          startAngle: 120,
          hoverAnimation: false,
          clockWise: true,
          itemStyle: {
            normal: {
              color: '#246c85',
            },
          },
          tooltip: {
            show: false,
          },
          label: {
            show: false,
          },
          data: [infoData?.total],
        },
      ],
    };
  };
  return (
    <div className={styles.container}>
      <ModuleTitleWithTabs title="消纳场概况" />
      <Flex>
        <div style={{ padding: '30px 40px 18px 40px' }}>
          <ReactEcharts
            notMerge={true}
            lazyUpdate={true}
            option={getOption()}
            style={{ width: 190, height: 190 }}
          />
        </div>
        <div className={styles.descriptionWrapper}>
          {infoData?.list?.map((item: any, index: number) => (
            <DescriptionItem
              key={index}
              name={item.label}
              unit={'万方'}
              valueStyle={commonValueStyle}
              labelStyle={commonLabelStyle}
              unitStyle={commonUnitStyle}
              style={{
                justifyContent: 'start',
                marginBottom: index === 0 ? 10 : 0,
              }}
              decimals={0}
              value={item?.value}
            />
          ))}
        </div>
      </Flex>
    </div>
  );
};
export default AbsorbSiteSituation;
