import BlueTable from '@/components/BlueTable';
import services from '@/services';
import { useSetState } from 'ahooks';
import type { ColumnsType } from 'antd/es/table';
import React, { useEffect, useRef, useState } from 'react';
import styles from './index.less';

interface DataType {
  deviceName: string;
  deviceStatus: string;
  lightIntensity: string;
  rainfall: string;
  windDirection: string;
  windSpeed: string;
}

const MonitorTable: React.FC = () => {
  const [activeTab, setActiveTab] = useState<'tab1' | 'tab2' | 'tab3'>('tab1');

  const [dataSource, setDataSource] = useSetState<Record<string, any[]>>({});

  const pageInfo = useRef<Record<string, any>>({
    tab1: {
      total: 100,
      pageSize: 10,
      current: 1,
    },
    tab2: {
      total: 100,
      pageSize: 10,
      current: 1,
    },
    tab3: {
      total: 100,
      pageSize: 10,
      current: 1,
    },
  });

  const columns: ColumnsType<DataType> = [
    {
      title: '设备名称',
      dataIndex: 'deviceName',
      key: 'deviceName',
      width: 200,
      className: styles.tableCell,
    },
    {
      title: '设备状态',
      dataIndex: 'deviceStatus',
      key: 'deviceStatus',
      width: 120,
      className: styles.tableCell,
      render: (text) => (
        <span
          className={text === 1 ? styles.onlineStatus : styles.offlineStatus}
        >
          {text === 1 ? '在线' : '离线'}
        </span>
      ),
    },
    {
      title: '光照度(Lux)',
      dataIndex: 'lux',
      key: 'lux',
      width: 150,
      className: styles.tableCell,
    },
    {
      title: '雨量(毫米)',
      dataIndex: 'rainFall',
      key: 'rainFall',
      width: 150,
      className: styles.tableCell,
    },
    {
      title: '风向(°)',
      dataIndex: 'windDirection',
      key: 'windDirection',
      width: 120,
      className: styles.tableCell,
    },
    {
      title: '风速(m/s)',
      dataIndex: 'windSpeed',
      key: 'windSpeed',
      width: 120,
      className: styles.tableCell,
    },
  ];

  const columns1 = [
    {
      title: '设备名称',
      dataIndex: 'deviceName',
      key: 'deviceName',

      className: styles.tableCell,
    },
    {
      title: '设备状态',
      dataIndex: 'deviceStatus',
      key: 'deviceStatus',
      render: (text: number) => (
        <span
          className={text === 1 ? styles.onlineStatus : styles.offlineStatus}
        >
          {text === 1 ? '在线' : '离线'}
        </span>
      ),
      className: styles.tableCell,
    },
    {
      title: '告警状态',
      dataIndex: 'alarmStatus',
      key: 'alarmStatus',
      render: (text: number) => (
        <span className={text === 1 ? styles.alarmStatus : styles.normalStatus}>
          {text === 1 ? '告警' : '正常'}
        </span>
      ),
      className: styles.tableCell,
    },
  ];

  const columns2 = [
    {
      title: '设备名称',
      dataIndex: 'deviceName',
      key: 'deviceName',

      className: styles.tableCell,
    },
    {
      title: '设备状态',
      dataIndex: 'deviceStatus',
      key: 'deviceStatus',
      render: (text: number) => (
        <span
          className={text === 1 ? styles.onlineStatus : styles.offlineStatus}
        >
          {text === 1 ? '在线' : '离线'}
        </span>
      ),
      className: styles.tableCell,
    },
    {
      title: '光照度(lux)',
      dataIndex: 'lux',
      key: 'lux',

      className: styles.tableCell,
    },
  ];

  const ColumnsMap = {
    tab1: columns,
    tab2: columns1,
    tab3: columns2,
  };

  /** 获取自然光以及雨量监测表 */
  const getNaturalLightAndRainMonitoringList = (page: number) => {
    const newPage =
      page !== undefined ? page : pageInfo.current.tab1.current + 1;
    services.DataBase.getGzInfoData({
      typeCode: 'gz-gl-zrgfyl',
      params: {
        current: newPage,
        size: 10,
      },
    }).then((res) => {
      if (res.code === 200) {
        setDataSource({
          tab1: res.data.records,
        });

        pageInfo.current.tab1 = {
          total: res.data.total,
          current: res.data.current,
          pageSize: res.data.size,
        };
      }
    });
  };
  /** 获取水浸设备列表 */
  const getListOfRealtimeFloodingMonitoring = (page: number) => {
    const newPage =
      page !== undefined ? page : pageInfo.current.tab2.current + 1;
    services.DataBase.getGzInfoData({
      typeCode: 'gz-gl-sqsslb',
      params: {
        current: newPage,
        size: 10,
      },
    }).then((res) => {
      if (res.code === 200) {
        setDataSource({
          tab2: res.data.records,
        });

        pageInfo.current.tab2 = {
          total: res.data.total,
          current: res.data.current,
          pageSize: res.data.size,
        };
      }
    });
  };

  const getFixedIlluminanceMonitoringTable = (page: number) => {
    const newPage =
      page !== undefined ? page : pageInfo.current.tab3.current + 1;
    services.DataBase.getGzInfoData({
      typeCode: 'gz-dl-dlgzd',
      params: {
        current: newPage,
        roadName: '',
        size: 10,
      },
    }).then((res) => {
      if (res.code === 200) {
        setDataSource({
          tab3: res.data.records,
        });

        pageInfo.current.tab3 = {
          total: res.data.total,
          current: res.data.current,
          pageSize: res.data.size,
        };
      }
    });
  };

  const getData = (page?: number) => {
    if (activeTab === 'tab1') {
      getNaturalLightAndRainMonitoringList(page ?? 1);
    }
    if (activeTab === 'tab2') {
      getListOfRealtimeFloodingMonitoring(page ?? 1);
    }
    if (activeTab === 'tab3') {
      getFixedIlluminanceMonitoringTable(page ?? 1);
    }
  };

  useEffect(() => {
    getData();
  }, [activeTab]);

  return (
    <div className={styles.tableSection}>
      <div className={styles.tabs}>
        <div
          className={`${styles.tab} ${
            activeTab === 'tab1' ? styles.active : ''
          }`}
          onClick={() => setActiveTab('tab1')}
        >
          自然光及风雨量监测列表
        </div>
        <div
          className={`${styles.tab} ${
            activeTab === 'tab2' ? styles.active : ''
          }`}
          onClick={() => setActiveTab('tab2')}
        >
          水浸实时监测列表
        </div>
        <div
          className={`${styles.tab} ${
            activeTab === 'tab3' ? styles.active : ''
          }`}
          onClick={() => setActiveTab('tab3')}
        >
          固定光照度监测表
        </div>
      </div>
      <BlueTable
        columns={ColumnsMap[activeTab]}
        dataSource={dataSource?.[activeTab] ?? []}
        scroll={{ y: 520 }}
        pagination={{
          total: pageInfo.current[activeTab]?.total,
          pageSize: 10,
          current: pageInfo.current[activeTab]?.current,
          onChange(page) {
            getData(page);
          },
        }}
      />
    </div>
  );
};

export default MonitorTable;
