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 CertificateOverview = ({ searchTime }: { searchTime: any }) => {
  const commonValueStyle = {
    fontFamily: 'D-DIN',
    fontSize: '28px',
    fontWeight: 700,
  };

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

  const commonUnitStyle = {
    color: '#BCCEE9',
    fontSize: '14px',
  };

  const { data: infoLeftData } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-jzlj-gfzsblqk',
        params: {
          ...searchTime,
        },
      }).then((res) => {
        if (res.code === 200) {
          return res?.data?.data?.records?.[0];
        }
        throw new Error('获取数据失败');
      }),
    {
      refreshDeps: [searchTime],
    },
  );

  const cardData = useMemo(() => {
    return {
      total: infoLeftData?.zs,
      list: [
        { value: infoLeftData?.pfz, name: '排放证办理', color: '#85ffaf' },
        {
          value: infoLeftData?.lsxnbas,
          name: '临时消纳备案',
          color: '#2e93ff',
        },
        { value: infoLeftData?.xnz, name: '消纳证办理', color: '#d4f291' },

        {
          value: infoLeftData?.zhly,
          name: '综合利用（回填）登记',
          color: '#8879bf',
        },
      ],
    };
  }, [infoLeftData]);
  console.log(cardData);
  const getOption = () => {
    return {
      color: ['#85ffaf', '#2e93ff', '#d4f291', '#8879bf'],
      tooltip: {
        // confine: true,
        borderWidth: '0',
        backgroundColor: 'rgba(73,81,92,.95)', //背景颜色
        textStyle: {
          color: '#fff', //字体颜色
        },
        formatter: (params: any) => {
          console.log(params);

          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.name}</span>
               </div>
                <span style="font-size: 16px; font-weight: bold;">${params.value}</span>
              </div>
            `;
        },
      },
      title: {
        text: cardData?.total,
        subtext: '办证总数',
        left: '30px', // 根据需求调整位置
        top: '30px', // 根据需求调整位置
        textStyle: {
          color: '#bccee9',
          fontSize: 30,
          fontFamily: 'D-DIN',
        },
        subtextStyle: {
          color: '#bccee9',
          fontSize: 16,
        },
      },
      series: [
        {
          name: '',
          type: 'pie',
          //   padAngle: 5,
          minAngle: 5, //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互。
          radius: ['70%', '88%'],
          label: {
            show: false,
          },
          data: cardData?.list || [],
        },
      ],
    };
  };
  return (
    <div className={styles.container}>
      <ModuleTitleWithTabs title="办证总览" />

      <Flex>
        <div style={{ padding: '18px 40px 18px 40px' }}>
          <ReactEcharts
            notMerge={true}
            lazyUpdate={true}
            option={getOption()}
            style={{ width: 130, height: 130 }}
          />
        </div>
        <div className={styles.descriptionWrapper}>
          {cardData?.list?.map((item: any, index: number) => {
            return (
              <DescriptionItem
                direction="vertical"
                name={item.name}
                unit={'件'}
                valueStyle={{ ...commonValueStyle, color: item.color }}
                labelStyle={commonLabelStyle}
                unitStyle={commonUnitStyle}
                style={{ justifyContent: 'start' }}
                decimals={0}
                value={item?.value}
              />
            );
          })}
        </div>
      </Flex>
    </div>
  );
};
export default CertificateOverview;
