import services from '@/services';
import { useRequest } from 'ahooks';
import { Flex, Space } from 'antd';
import EChartsReact from 'echarts-for-react';
import React, { useEffect, useRef, useState } from 'react';
import { useBridgeManage } from '../../context';
import styles from './index.less';

const BridgeTrend: React.FC = () => {
  const [activeYear, setActiveYear] = useState('2024');
  const { viewType, isUsingValue } = useBridgeManage();
  const ref = useRef(null);
  const years = ['2022', '2023', '2024'];

  const { data: bridgeData } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-dq-dlqljcqk',
        params: {
          type: viewType == 'bridge' || viewType == 'location' ? 'ql' : 'dl',
          nd: activeYear,
        },
      }).then((res) => {
        if (res.code === 200) {
       
          return res?.data?.data?.records;
        }
        throw new Error('获取数据失败');
      }),
    {
      refreshDeps: [activeYear, viewType],
    },
  );

  const data = {
    bridge: {
      title: '桥梁检测',
      legend: ['常规定期检测', '结构定期检测', '特殊检测', '应急检测'],
      yAxisLabels: ['A', 'B', 'C', 'D', 'E', '合格', '不合格'],
    },
    road: {
      title: '道路检测',
      legend: ['道路定期检测', '特殊检测', '应急检测'],
      yAxisLabels: ['A', 'B', 'C', 'D', 'E'],
    },
  };

  const currentData = data[viewType === 'road' ? 'road' : 'bridge'];
  const barOption = {
    color: ['#56A8FF', '#00DD97', '#FFDC00', '#FF9E00'],
    legend: {
      data: currentData.legend,
      textStyle: {
        color: '#CBEDFF',
        fontSize: 16,
      },
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 24,
      top: 0,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      textStyle: {
        color: '#fff', //字体颜色
      },
      borderWidth: '0',
      backgroundColor: 'rgba(73,81,92,.95)',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '8%',
      top: '15%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: currentData?.yAxisLabels,
      axisLabel: {
        color: '#E4EDFF',
        fontSize: 20,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },

    series:
      viewType === 'road'
        ? [
            {
              name: '道路定期检测',
              type: 'bar',
              stack: 'total',
              barWidth: 12,
              data: bridgeData
                ?.filter((item) => item.jclx == '道路定期检测')
                ?.map((item) => item?.num),
            },
            {
              name: '特殊检测',
              type: 'bar',
              stack: 'total',
              barWidth: 12,
              data: bridgeData
                ?.filter((item) => item.jclx == '特殊检测')
                ?.map((item) => item?.num),
            },
            {
              name: '应急检测',
              type: 'bar',
              stack: 'total',
              barWidth: 12,
              data: bridgeData
                ?.filter((item) => item.jclx == '应急检测')
                ?.map((item) => item?.num),
            },
          ]
        : [
            {
              name: '常规定期检测',
              type: 'bar',
              stack: 'total',
              barWidth: 12,
              data: bridgeData
                ?.filter((item) => item.jclx == '常规定期检测')
                ?.map((item) => item?.num),
            },
            {
              name: '结构定期检测',
              type: 'bar',
              stack: 'total',
              barWidth: 12,
              data: bridgeData
                ?.filter((item) => item.jclx == '结构定期检测')
                ?.map((item) => item?.num),
            },
            {
              name: '特殊检测',
              type: 'bar',
              stack: 'total',
              barWidth: 12,
              data: bridgeData
                ?.filter((item) => item.jclx == '特殊检测')
                ?.map((item) => item?.num),
            },
            {
              name: '应急检测',
              type: 'bar',
              stack: 'total',
              barWidth: 12,
              data: bridgeData
                ?.filter((item) => item.jclx == '应急检测')
                ?.map((item) => item?.num),
            },
          ],
  };
  useEffect(() => {
    const echartInstance = ref.current?.getEchartsInstance();
    echartInstance?.setOption({ ...barOption }, true);
  }, [viewType, bridgeData,barOption]);
  return (
    <div className={styles.container}>
      <Flex justify="space-between" align="center" className={styles.header}>
        <div className={styles.title}>{currentData.title}</div>
        <Space size={10}>
          {years.map((year) => (
            <div
              key={year}
              className={`${styles.yearBtn} ${
                activeYear === year ? styles.active : ''
              }`}
              onClick={() => setActiveYear(year)}
            >
              {year}年
            </div>
          ))}
        </Space>
      </Flex>

      <div className={styles.chart}>
        <EChartsReact
          ref={ref}
          option={barOption}
          style={{ height: 270, width: '665px' }}
        />
      </div>
    </div>
  );
};

export default BridgeTrend;
