import services from '@/services';
import { useRequest } from 'ahooks';
import { Tabs } from 'antd';
import * as echarts from 'echarts';
import React, { useEffect, useRef, useState } from 'react';
import styles from './index.less';

interface DistributionChartProps {
  searchTime: {
    startTime: string;
    endTime: string;
  };
  tabKey?: string;
}

const DistributionChart: React.FC<DistributionChartProps> = ({
  searchTime,
  tabKey,
}) => {
  const chartRef = useRef<HTMLDivElement>(null);
  const [activeTab, setActiveTab] = useState(tabKey || '1');
  const tabItems = [
    {
      key: '1',
      label: '建筑垃圾申报排放量区域分布',
    },
    {
      key: '2',
      label: '疑似违规倾倒点位区域分布',
    },
  ];

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

  //倾倒点
  const { data: dumpData } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-jzlj-wgqddwh',
        params: {
          ...searchTime,
        },
      }).then((res) => {
        if (res.code === 200) {
          console.log(res);

          return res?.data?.data?.records?.[0]?.list;
        }
        throw new Error('获取数据失败');
      }),
    {
      refreshDeps: [searchTime],
    },
  );

  useEffect(() => {
    if (!chartRef.current) return;

    const chart = echarts.init(chartRef.current);

    let data = [];
    let show = false;
    if (activeTab == '1' && emitData) {
      data = emitData?.list?.map((item) => ({
        ...item,
        name: item.areaName,
        value: item?.num,
      }));
    }
    if (activeTab == '2' && dumpData?.length) {
      console.log(dumpData);

      data = dumpData?.map((item) => ({
        ...item,
        name: item.areaName,
        value: item?.num,
      }));
    } else if (activeTab == '2' && !dumpData?.length) {
      show = true;
    }

    const option = {
      title: {
        text: '暂无问题',
        show: show,
        textStyle: {
          color: '#fff',
          fontSize: 16,
        },
        left:'50%',
        top:'30%'
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(8, 24, 63, 0.9)',
        borderColor: '#13659680',
        borderWidth: 1,
        textStyle: {
          color: '#BCCEE9',
        },
      },
      grid: {
        left: '1%',
        right: '3%',
        bottom: '3%',
        top: '20%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data:
          activeTab == '1'
            ? emitData?.list?.map((item) => item?.areaName)
            : dumpData?.map((item) => item?.areaName),

        // data: [
        //   '锦江区',
        //   '青羊区',
        //   '金牛区',
        //   '武侯区',
        //   '成华区',
        //   '龙泉驿区',
        //   '青白江区',
        //   '新都区',
        //   '温江区',
        //   '双流区',
        //   '郫都区',
        //   '新津区',
        //   '简阳市',
        //   '都江堰市',
        //   '彭州市',
        //   '邛崃市',
        //   '崇州市',
        //   '金堂县',
        //   '大邑县',
        //   '蒲江县',
        //   '新津县',
        // ],
        axisLine: {
          show: false,
        },
        // axisLine: {
        //   lineStyle: {
        //     color: 'rgba(255, 255, 255, 0.1)'
        //   }
        // },
        axisLabel: {
          color: '#E4EDFF',
          fontSize: 20,
          interval: 0,
        },
      },
      yAxis: {
        type: 'value',
        // max: maxValue,
        nameTextStyle: {
          color: '#BCCEE9',
          fontSize: 16,
          padding: [0, 0, 0, 50],
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          color: '#E4EDFF',
          fontSize: 16,
          // interval: 0,
        },
      },
      series: [
        {
          type: 'bar',
          barWidth: 20,
          z: 1,
          barGap: '-100%',
          tooltip: {
            show: false,
          },
          data: data?.map((item) => ({
            ...item,
            itemStyle: {
              color: '#33658D',
              // color: 'rgba(57, 122, 183, 0.2)',
              borderRadius: [15, 15, 15, 15],
            },
          })),
        },
        {
          type: 'bar',
          barWidth: 20,
          z: 2,
          barGap: '-100%',

          data: data.map((item) => ({
            // value: activeTab === '1' ? item.wasteAmount : item.siteCount,
            ...item,
            itemStyle: {
              color: activeTab === '1' ? 'rgba(89, 238, 255, 0.6)' : '#FFB36B',
              borderRadius: [15, 15, 15, 15],
            },
          })),
          label: {
            show: true,
            position: 'top',
            color: '#E4EDFF',
            fontSize: 20,
            formatter: (params: any) => {
              return params.value;
            },
          },
        },
      ],
    };

    chart.setOption(option);

    return () => {
      chart.dispose();
    };
  }, [activeTab, emitData]);

  return (
    <div className={styles.container}>
      <Tabs
        className={styles.tabs}
        activeKey={activeTab}
        onChange={setActiveTab}
        items={tabItems}
      />
      <div className={styles.chartWrapper}>
        <div className={styles.yAxisLabel}>
          单位：{activeTab === '1' ? '万方' : '个'}
        </div>
        <div ref={chartRef} style={{ width: '100%', height: '100%' }} />
      </div>
    </div>
  );
};

export default DistributionChart;
