import { Flex } from 'antd';
import classNames from 'classnames';
import React, { ReactNode, useEffect, useMemo, useState } from 'react';
import List from '../List';
import styles from './index.less';
import services from '@/services';
import PieCharts from '../PieCharts';
import AnalysisItem from '../AnalysisItem';
import EChartsReact from 'echarts-for-react';

const BottomTab: React.FC<{ objectId: string, dateType: string }> = (props) => {
  const { objectId, dateType } = props;

  const [largeClass, setLargeClass] = useState('category');

  const [smallClass, setSmallClass] = useState('type1');

  const [categoryData, setCategoryData] = useState<any>([])
  const [distinctData, setDistinctData] = useState<any>([])
  const [timesData, setTimesData] = useState<any>([])

  const largeTabs = [
    {
      key: 'category',
      name: '高发类型',
    },
    {
      key: 'times',
      name: '高发时段',
    },
    {
      key: 'distribute',
      name: '来源分布',
    },
  ];
  const smallTabs = [
    {
      key: 'type1',
      name: '大类',
    },
    {
      key: 'type2',
      name: '小类',
    },
    {
      key: 'type3',
      name: '细类',
    },
  ];

  const chartOptions = useMemo(() => {
    return {
      xAxis: {
        type: 'category',
        boundaryGap: false,
        // show: false,
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          color: '#fff',
          fontSize: 16,
        },
        data: timesData?.map(item => `${item.name}时`) || [],
      },
      yAxis: {
        type: 'value',
        show: false,
      },
      grid: {
        left: '10%', // 左边距
        right: '10%', // 右边距
        top: '10%', // 上边距
        bottom: '30%', // 下边距
      },
      series: [
        {
          data: timesData?.map(item => item.count) || [],
          symbol: 'none',
          type: 'line',
          lineStyle: {
            color: '#EB6A6A',
          },
          smooth: false,
    
          areaStyle: {
            // 区域填充样式。设置后显示成区域面积图。
            color: {
              type: 'linear',
              x: 0,
              y: 1,
              x2: 0,
              y2: 0.2,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(235, 106, 106, 0)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(235, 106, 106, 0.36)', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
      ],
    }
  }, [timesData]);

  const getCategoryData = async () => {
    const params = {
      keyAreaId: objectId, // objectId
      dateType: 'monthly', // dateType
      limit: 3
    }
    const res = await services.Physicalsign.getHighIncidenceTypeRoadCountForKeyAreas(params)
    if (res.code === 200) {
      console.log('getCategoryData', res.data)
      setCategoryData(res.data)
    }
  }

  const getDistinctData = async () => {
    const params = {
      keyAreaId: objectId, // objectId
      dateType: 'monthly', // dateType
    }
    const res = await services.Physicalsign.getHighIncidenceSourceCountForKeyAreas(params)
    if (res.code === 200) {
      console.log('getDistinctData', res.data)
      setDistinctData(res.data)
    }
  }

  const getTimesData = async () => {
    const params = {
      keyAreaId: objectId, // objectId
      dateType: 'monthly', // dateType
    }
    const res = await services.Physicalsign.getHighIncidenceTimeCountForKeyAreas(params)
    if (res.code === 200) {
      console.log('getTimesData', res.data)
      setTimesData(res.data)
    }
  }



  useEffect(() => {
    getCategoryData()
    getDistinctData()
    getTimesData()
  }, [objectId, dateType])

  return (
    <div className={styles.container}>
      <Flex justify="space-between" align="center">
        <div className={styles.tabBtnGroup}>
          {largeTabs.map((item, index) => {
            return (
              <div
                key={item.key}
                onClick={() => {
                  setLargeClass(item.key as any);
                }}
                className={classNames(
                  styles.tabBtn,
                  largeClass === item.key ? styles.tabBtnSelected : undefined,
                )}
              >
                {item.name}
              </div>
            );
          })}
        </div>

        {/* <div className={styles.btnGroup}>
          {smallTabs.map((item, index) => {
            return (
              <div
                key={item.key}
                onClick={() => {
                  setSmallClass(item.key as any);
                }}
                className={classNames(
                  styles.btn,
                  smallClass === item.key ? styles.btnSelected : undefined,
                )}
              >
                {item.name}
              </div>
            );
          })}
        </div> */}
      </Flex>

      {
        largeClass === 'category' ? (
          <List data={categoryData}></List>
        ) : (
          <>
            {
              largeClass === 'times' ? (
                <>
                  <EChartsReact
                    style={{ width: 562, height: 173 }}
                    option={chartOptions}
                  ></EChartsReact>
                </>
              ) : (
                <>
                  <Flex style={{ height: 200 }} gap={10} align='center'>
                    <div>
                      <PieCharts
                        dataSource={distinctData || []}
                        style={{ width: 140, height: 130 }}
                        color={['#FF9B5D', '#FFE335', '#29B5FF']}
                      />
                    </div>
                    <div>
                      {
                        distinctData?.map((source: any, index: number) => (
                          <AnalysisItem key={source.id} item={source} color={['#FF9B5D', '#FFE335', '#29B5FF'][index]} />
                        ))
                      }
                    </div>
                  </Flex>
                </>
              )
            }
          </>
        )
      }
    </div>
  );
};

export default BottomTab;
