import services from '@/services';
import { convertUnits } from '@/utils/ui';
import { useRequest } from 'ahooks';
import { Flex } from 'antd';

import * as echarts from 'echarts';
import EChartsReact from 'echarts-for-react';
import React, { useMemo, useState } from 'react';
import { useBridgeManage } from '../../context';
import styles from './index.less';
type TabKey = 'area' | 'num';

const BridgeAreaDistribution: React.FC = () => {
  const { viewType } = useBridgeManage();
  const tabLabels: Record<TabKey, string> = {
    area: '按面积',
    num: '按条数',
  };
  const tabs: TabKey[] = ['area', 'num'];

  const [activeTab, setActiveTab] = useState<TabKey>('area');

  //桥梁分布类型
  const { data: bridgeData } = useRequest(() =>
    services.DataBase.getSjdzInfoData({
      typeCode: 'zzcc-dq-qyfztj',
    }).then((res) => {
      if (res.code === 200) {
        return res?.data?.data?.records;
      }
      throw new Error('获取数据失败');
    }),
  );
  //道路分布类型
  const { data: roadData } = useRequest(() =>
    services.DataBase.getSjdzInfoData({
      typeCode: 'zzcc-dq-dlqyfztjdlsl   ',
    }).then((res) => {
      if (res.code === 200) {
        return res?.data?.data?.records;
      }
      throw new Error('获取数据失败');
    }),
  );
  const chartData = useMemo(() => {
    if (viewType == 'bridge' || viewType == 'location') {
      return bridgeData?.map((item) => {
        return {
          name: item?.regionName,
          value: item?.num,
        };
      });
    }
    return roadData?.map((item) => {
      return {
        name: item?.regionName,
        value: convertUnits(Number(item?.num))?.num,
      };
    });
  }, [bridgeData, viewType, roadData]);

  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', //字体颜色
      },
      // backgroundColor: '#46515d',
      // axisPointer: {
      //   type: 'line',

      //   lineStyle: {
      //     color: 'rgba(255,255,255,.5)',
      //     width: 2,
      //   },
      // },
    },
    xAxis: {
      type: 'category',
      //   data: areaData.map(item => item.name),
      data: chartData?.map((item) => item?.name),
      axisLabel: {
        color: '#E4EDFF',
        fontSize: 20,
        interval: 0,
        // rotate: 45,
      },

      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    dataZoom: [
      {
        // 设置滚动条的隐藏与显示
        show: true,
        // 设置滚动条类型
        type: 'slider',
        // 设置背景颜色
        backgroundColor: 'rgb(19, 63, 100)',
        // 设置选中范围的填充颜色
        // fillerColor: "rgb(16, 171, 198)",
        // 设置边框颜色
        borderColor: 'rgb(19, 63, 100)',
        // 是否显示detail，即拖拽时候显示详细数值信息
        showDetail: false,
        // 数据窗口范围的起始数值
        startValue: 0,
        // 数据窗口范围的结束数值（一页显示多少条数据）
        endValue: 6,
        // empty：当前数据窗口外的数据，被设置为空。
        // 即不会影响其他轴的数据范围
        filterMode: 'empty',
        // 设置滚动条宽度，相对于盒子宽度
        width: '50%',
        // 设置滚动条高度
        height: 8,
        // 设置滚动条显示位置
        left: 'center',
        // 是否锁定选择区域（或叫做数据窗口）的大小
        zoomLoxk: true,
        // 控制手柄的尺寸
        handleSize: 0,
        // dataZoom-slider组件离容器下侧的距离
        bottom: 0,
      },
      {
        // 没有下面这块的话，只能拖动滚动条，
        // 鼠标滚轮在区域内不能控制外部滚动条
        type: 'inside',
        // 滚轮是否触发缩放
        zoomOnMouseWheel: false,
        // 鼠标滚轮触发滚动
        moveOnMouseMove: true,
        moveOnMouseWheel: true,
      },
    ],
    yAxis: {
      type: 'value',
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        type: 'bar',
        barWidth: 20,
        barCategoryGap: 70,

        // data: areaData.map(item => ({
        data: chartData?.map((item) => ({
          ...item,
          itemStyle:
            viewType === 'road'
              ? {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0.03053, color: 'rgb(177, 255, 226)' },
                    { offset: 1, color: 'rgb(100, 213, 254)' },
                  ]),
                  borderRadius: [15, 15, 15, 15],
                }
              : {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0.03053, color: 'rgb(177, 180, 255)' },
                    { offset: 1, color: 'rgb(109, 99, 255)' },
                  ]),
                  borderRadius: [15, 15, 15, 15],
                },
        })),
        label: {
          show: true,
          position: 'top',
          color: '#fff',
          fontSize: 20,
          fontFamily: 'D-DIN',
          // formatter: (params: any) => {
          //   return viewType === 'road' ? `${params.value}` : `${params.value}`;
          //   // return viewType === 'road' ? `${params.value}万m²` : `${params.value}座`;
          // },
        },
        // emphasis: {
        //   itemStyle: {
        //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //       { offset: 0, color: 'rgba(89, 238, 255, 1)' },
        //       { offset: 1, color: 'rgba(89, 238, 255, 0.2)' }
        //     ])
        //   }
        // }
      },
    ],
  };

  const title = viewType === 'road' ? '道路区域分布' : '桥梁区域分布';
  const unit = viewType === 'road' ? '万m²' : '座';

  return (
    <div className={styles.container}>
      <Flex className={styles.header} justify="space-between">
        <div className={styles.title}>{title}</div>
        {/* {title === '道路区域分布' && (
          <Space size={10}>
            {tabs.map((tab) => (
              <div
                key={tab}
                className={`${styles.tabBtn} ${
                  activeTab === tab ? styles.active : ''
                }`}
                onClick={() => setActiveTab(tab)}
              >
                {tabLabels[tab]}
              </div>
            ))}
          </Space>
        )} */}
      </Flex>
      <div className={styles.unit}>单位：{unit}</div>

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

export default BridgeAreaDistribution;
