import ModuleTitleWithTabs from '@/pages/Home_v_2504/components/common/ModuleTitleWithTabs';

import services from '@/services';
import { useRequest } from 'ahooks';
import * as echarts from 'echarts';
import EChartsReact from 'echarts-for-react';
import { useMemo } from 'react';
import styles from './index.less';
const DeclareDischargeType = ({ searchTime }: { searchTime: any }) => {
  const { data: charData } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-jzlj-lxtjlssbpfl',
        params: {
          ...searchTime,
        },
      }).then((res) => {
        if (res.code === 200) {
          return res?.data?.data?.records;
        }
        throw new Error('获取数据失败');
      }),
    {
      refreshDeps: [searchTime],
    },
  );

  const data = useMemo(() => {
    const gczt = charData?.find((item: any) => item.name === 'gczt')?.num ?? 0;
    const gcnj = charData?.find((item: any) => item.name === 'gcnj')?.num ?? 0;
    const zxlj = charData?.find((item: any) => item.name === 'zxlj')?.num ?? 0;
    const gclj = charData?.find((item: any) => item.name === 'gclj')?.num ?? 0;
    const cclj = charData?.find((item: any) => item.name === 'cclj')?.num ?? 0;

    return [
      {
        name: '工程渣土',
        value: gczt,

        color: '#FF9B5D',
      },
      {
        name: '工程泥浆',
        value: gcnj,

        color: '#FFE335',
      },
      {
        name: '装修垃圾',
        value: zxlj,

        color: '#35B2FF',
      },
      {
        name: '工程垃圾',
        value: gclj,

        color: '#77E67B',
      },
      {
        name: '拆除垃圾',
        value: cclj,

        color: '#00FFB3',
      },
    ];
  }, [charData]);
  const barOption = {
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      //   top: '3%',
      top: '10%',
      containLabel: true,
    },
    tooltip: {
      borderWidth: '0',
      backgroundColor: 'rgba(73,81,92,.95)', //背景颜色
      textStyle: {
        color: '#fff', //字体颜色
      },
    
    },
    xAxis: [
      {
        type: 'category',
      

        data: data?.map((item) => item?.name),
        axisLabel: {
          color: '#cbedff',
          fontSize: 16,
          interval: 0,
          // rotate: 45,
        },

        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
      {
        type: 'category',
      
        data: data?.map((item) => item?.value),
        axisLabel: {
          color: '#ffffff',
          fontSize: 24,
          interval: 0,
          fontWeight: 700,
          // rotate: 45,
        },

        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
    ],

    yAxis: {
      type: 'value',
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        type: 'bar',
        barWidth: 12,
        barCategoryGap: 70,
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(144, 205, 229, 0.2)',
          borderRadius: [15, 15, 15, 15],
        },
  
        data: data?.map((item) => ({
          ...item,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0.03053, color: 'rgb(255, 241, 213)' },
              { offset: 1, color: 'rgb(77, 189, 53)' },
            ]),

            borderRadius: [15, 15, 15, 15],
          },
        })),
        label: {
          show: false,
          position: 'top',
          color: '#fff',
          fontSize: 20,
          fontFamily: 'D-DIN',
        },
      },
    ],
  };

  return (
    <div className={styles.container}>
      <ModuleTitleWithTabs title="申报排放类型" />
      <div>
        <div className={styles.yAxisLabel}>单位：万方</div>
        <EChartsReact
          option={barOption}
          style={{ height: 220, width: '100%' }}
        />
      </div>
    </div>
  );
};
export default DeclareDischargeType;
