import DescriptionItem from '@/components/DescriptionItem';
import { Flex } from 'antd';
import classNames from 'classnames';
import EChartsReact from 'echarts-for-react';
import { cloneDeep } from 'lodash';
import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
import BaseCard from '../../../components/BaseCard';
import styles from './index.less';
import option from './option';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import { useRequest } from 'ahooks';
import services from '@/services';

/** @name 管廊感知态势 */
const PipeCorridorSensesTheSituation: React.FC = () => {
  const chartRef = useRef<any>();
  const [activeTab, setActiveTab] = useState('1');
  const { dispatch } = useGlobalModalServices();

  let isTrigger = true;

  const tabItems = useMemo(
    () => [
      {
        key: '1',
        label: '各类型设备在线率',
      },
      // {
      //   key: '2',
      //   label: '各类型设备预警数',
      // },
    ],
    [],
  );

  // 监测信息
  const { data: cpzxlData } = useRequest(
    () =>
      services.DataBase.getGzInfoData({
        typeCode: 'gz-gl-cpzxl',
      }).then((res) => {
        if (res.code === 200) {
          return res?.data || {};
        }
        throw new Error('获取数据失败');
      })
  );

  const INFO = useMemo(() => {
    return [
      {
        name: '已接入感知设备',
        value: cpzxlData?.utilityTunnelNum,
        unit: '个',
      },
      {
        name: '设备在线率',
        value: cpzxlData?.utilityTunnelOnlineRate * 100,
        unit: '%',
        vColor: '#55D355',
      },
      // {
      //   name: '预警数',
      //   value: 42,
      //   unit: '个',
      //   vColor: '#FFB05A',
      // },
    ];
  }, [cpzxlData]);

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

  const BarOption = useMemo(() => {
    const temp = cloneDeep(option) as any;
    const xAxis = cpzxlData?.sensorList?.map(v => v.productName);

    const yAxis = cpzxlData?.sensorList?.map(v => Number.isInteger(v.onlineRate * 100) ? v.onlineRate * 100 : (v.onlineRate * 100)?.toFixed(2));
    temp.xAxis[0].data = xAxis;
    temp.series[0].data = yAxis;
    if (activeTab === '1') {
      temp.series[0].itemStyle.color = {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#76FDD2', // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#02BAFE', // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      };
      temp.series[0].label.formatter = (params:any) => {
        return params.value > 0 ? `${params.value}%` : params.value;
      }
      temp.series[1] = {
        type: 'bar',
        barWidth: 20,
        barGap: "-100%",
        itemStyle: {
          color: "#33658D",
          borderRadius: 20
        },
        data: cpzxlData?.sensorList?.map(v => 100),
        z: 1,
      }
    }
    return temp;
  }, [cpzxlData]);

  return (
    <BaseCard w={917} h={357} title="监测信息 ">
      <Flex gap={100} style={{ marginTop: 20 }} align="center">
        {INFO.map((item) => {
          return (
            <DescriptionItem
              value={item.value}
              decimals={item.value && !Number.isInteger(item.value) ? 2 : 0}
              direction="horizontal"
              unit={item.unit}
              valueStyle={{
                margin: '0 12px',
                color: item.vColor,
              }}
              name={item.name}
              key={item.name}
              onClick={() => {
                if (isTrigger) {
                  // 管廊-监测信息弹窗
                  dispatch.push('PipelineMonitor', {
                  });
                }
              }}
            />
          );
        })}
      </Flex>
      <div>
        <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>
        <EChartsReact
          ref={chartRef}
          style={{
            height: 150,
          }}
          option={BarOption}
        ></EChartsReact>
      </div>
    </BaseCard>
  );
};

export default PipeCorridorSensesTheSituation;
