import DescriptionItem from '@/components/DescriptionItem';
import services from '@/services';
import { useRequest } from 'ahooks';
import { Badge, Flex } from 'antd';
import classNames from 'classnames';
import EChartsReact from 'echarts-for-react';
import { cloneDeep } from 'lodash';
import React, { memo, useLayoutEffect, useMemo, useRef, useState } from 'react';
import BaseCard from '../../../components/BaseCard';
import styles from './index.less';
import option, { pieOption } from './option';
/** @name 全市已移交纳入管理综合管廊概况 */
const Overview: React.FC = memo(() => {
  const [activeTab, setActiveTab] = useState('1');

  const [pieData, setPieData] = useState(
    // [...Array(4)].map((_, i) => {
    //   return {
    //     value: Math.floor(Math.random() * 100),
    //     name: '给水（输水）管道' + i,
    //   };
    // }),
    [
      { value: 45.55, name: '支线', count: 30 },
      { value: 54.3, name: '干线', count: 11 },
      { value: 20.05, name: '小型', count: 5 },
      { value: 28.69, name: '缆线', count: 3 },
    ],
  );
  const chartRef = useRef<any>();

  const colors = [
    '#5DDDFF',
    '#A550FF',
    '#F07283',
    '#7664EC',
    '#77E67B',
    '#35B2FF',
    '#FFE335',
    '#FF9B5D',
  ];

  // 管廊概况
  const { data: glslData } = useRequest(() =>
    services.DataBase.getSjdzInfoData({
      typeCode: 'hygl-glsl',
    }).then((res) => {
      if (res.code === 200) {
        return res?.data?.data?.records[0] || {};
      }
      throw new Error('获取数据失败');
    }),
  );

  // 区域分布
  const { data: aqyglslData } = useRequest(() =>
    services.DataBase.getSjdzInfoData({
      typeCode: 'hygl-aqyglsl',
    }).then((res) => {
      if (res.code === 200) {
        return res?.data?.data?.records || [];
      }
      throw new Error('获取数据失败');
    }),
  );

  // 类型分布
  const { data: alxglzsData } = useRequest(() =>
    services.DataBase.getSjdzInfoData({
      typeCode: 'hygl-alxglzs',
    }).then((res) => {
      if (res.code === 200) {
        return res?.data?.data?.records || [];
      }
      throw new Error('获取数据失败');
    }),
  );

  const INFO = useMemo(() => {
    return [
      {
        name: '管廊条数',
        value: glslData?.num,
        unit: '条',
      },
      {
        name: '管廊长度',
        value: glslData?.cd,
        unit: glslData?.dw,
      },
      {
        name: '舱室总长度',
        value: glslData?.cszcd,
        unit: glslData?.dw,
      },
    ];
  }, [glslData]);

  const tabItems = useMemo(
    () => [
      {
        key: '1',
        label: '管廊区域分布',
      },
      {
        key: '2',
        label: '管廊类型分布',
      },
    ],
    [],
  );

  useLayoutEffect(() => {
    chartRef.current?.resize();
  }, []);

  const BarOption = useMemo(() => {
    const temp = cloneDeep(option) as any;
    const xAxis = aqyglslData?.map((v: any) => v.qymc);
    const yAxis = aqyglslData?.map((v: any) => v.cd);
    temp.xAxis[0].data = xAxis;
    temp.series[0].data = yAxis;
    return temp;
  }, [aqyglslData]);

  const PieOption = useMemo(() => {
    const temp = cloneDeep(pieOption) as any;
    temp.color = colors;
    temp.series[0].data =
      alxglzsData?.map((v: any) => {
        return {
          value: v.cd,
          name: v.lx,
        };
      }) || [];
    return temp;
  }, [alxglzsData]);

  return (
    <BaseCard w={902} h={394} title="全市运营维护综合管廊概况">
      <Flex
        style={{
          marginTop: 20,
          padding: '0 80px 0 10px',
          display: 'flex',
          justifyContent: 'space-between',
        }}
        align="center"
      >
        {/* <Flex gap={100} style={{ marginTop: 20 }} align="center"> */}
        {INFO.map((item) => {
          return (
            <DescriptionItem
              value={item.value}
              unit={item.unit}
              name={item.name}
              key={item.name}
              decimals={Number.isInteger(item.value) ? 0 : 2}
            />
          );
        })}
      </Flex>

      <Flex gap={36} style={{ marginTop: 20 }}>
        {tabItems.map((item, index) => {
          return (
            <div
              key={index}
              onClick={() => {
                setActiveTab(item.key);
              }}
              className={classNames(styles.tabItem, {
                [styles.active]: activeTab === item.key,
              })}
            >
              {item.label}
            </div>
          );
        })}
      </Flex>

      {activeTab === '1' ? (
        <div>
          <div style={{ margin: '10px 0' }}>单位：千米</div>
          <EChartsReact
            ref={chartRef}
            style={{
              height: 130,
            }}
            option={BarOption}
          ></EChartsReact>
        </div>
      ) : (
        <Flex align="center" gap={60} className={styles.container}>
          <div
            style={{
              height: 130,
              width: 130,
            }}
          >
            <EChartsReact
              ref={chartRef}
              style={{
                height: 130,
                width: 130,
              }}
              option={PieOption}
            ></EChartsReact>
          </div>

          <div className={styles.legendContent}>
            {alxglzsData.map((item: any, index: any) => {
              return (
                <Flex key={index} className={styles.legendBg} gap={14}>
                  <Badge color={colors[index % colors.length]} />
                  <div>
                    <div>{item.lx}</div>
                    {/* <div>{item.value} 条</div> */}
                    <div className={styles.legendInfo}>
                      <span className={styles.value}>{item.num}</span>
                      <span className={styles.unit}>条</span>
                      <span className={styles.value}>{item.cd}</span>
                      <span className={styles.unit}>{item.dw}</span>
                    </div>
                  </div>
                </Flex>
              );
            })}
          </div>
        </Flex>
      )}
    </BaseCard>
  );
});

export default Overview;
