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 VehicleOverview = ({ searchTime }: { searchTime: any }) => {
  const commonValueStyle = {
    background: 'linear-gradient(180deg, #9CF8F7 0%, #25BBFF 100%)',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    fontFamily: 'D-DIN',
    fontSize: '28px',
    fontWeight: 700,
  };

  const commonLabelStyle = {
    color: '#BCCEE9',
    marginRight: '8px',
    fontSize: '14px',
    fontWeight: 400,
  };

  const commonUnitStyle = {
    color: '#BCCEE9',
    fontSize: '14px',
  };
  const { data: infoData, loading: infoLoading } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-jzlj-gfclqk',
        params: {
          ...searchTime,
        },
      }).then((res) => {
        if (res.code === 200) {
          return res?.data?.data?.records?.[0];
        }
        throw new Error('获取数据失败');
      }),
    {
      refreshDeps: [searchTime],
    },
  );
  const vehicleData = useMemo(() => {
    if (!infoData) return null;
    const newEnergyPer = ((infoData?.xny / infoData?.zs) * 100).toFixed(0);
    return {
      total: infoData?.zs,
      list: [
        {
          value: infoData?.xny,

          name: '新能源车辆',
          percent: newEnergyPer,
        },
        {
          value: infoData?.ryc,

          name: '燃油车辆 ',
          percent: 100 - Number(newEnergyPer),
        },
      ],
    };
  }, [infoData]);

  const getOption = () => {
    return {
      color: ['#26ceb7', '#5b7178'],
      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: vehicleData?.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: vehicleData?.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}>
          {vehicleData?.list?.map((item: any, index: number) => {
            return (
              <div
                key={index}
                className={styles.descriptionItem}
                style={index === 0 ? { marginBottom: 10 } : {}}
              >
                <span>{item.name}</span>
                <DescriptionItem
                  direction="horizontal"
                  name={'总共'}
                  unit={'辆'}
                  valueStyle={commonValueStyle}
                  labelStyle={commonLabelStyle}
                  unitStyle={commonUnitStyle}
                  style={{ justifyContent: 'start' }}
                  decimals={0}
                  value={item?.value}
                />
                <DescriptionItem
                  direction="horizontal"
                  name={''}
                  unit={'%'}
                  valueStyle={{
                    fontFamily: 'D-DIN',
                    fontSize: '28px',
                    fontWeight: 700,
                    color: 'rgb(38, 206, 183)',
                  }}
                  labelStyle={commonLabelStyle}
                  unitStyle={commonUnitStyle}
                  style={{ justifyContent: 'start' }}
                  decimals={0}
                  value={item?.percent}
                />
              </div>
            );
          })}
        </div>
      </Flex>
    </div>
  );
};
export default VehicleOverview;
