ss-dp/src/views/Home/components/Business/SiYu/components/WaterRainSection/index.js

import React, { useState, useEffect } from 'react';
import { Table } from 'antd';
import selectedBg from '@/assets/images/modal/selected.png';
import apiurl from '@/service/apiurl';
import { httpget } from '@/utils/request';
import CommonModal from '@/views/Home/components/UI/CommonModal';
import RightPanel from '../../../SiQuan/components/ModalComponents/AllWeatherModal/RainMonitor/RightPanel';
import ReservoirPanel from '../../../SiQuan/components/ModalComponents/AllWeatherModal/ReservoirPanel';
import FlowPanel from '../../../SiQuan/components/ModalComponents/AllWeatherModal/FlowPanel';
import './index.less';

const WaterRainSection = () => {
  const [activeTab, setActiveTab] = useState('rain');
  const [dataList, setDataList] = useState([]);
  const [loading, setLoading] = useState(false);
  
  // Detail Modal State
  const [detailVisible, setDetailVisible] = useState(false);
  const [selectedItem, setSelectedItem] = useState(null);

  const tabs = [
    { key: 'rain', label: '实时雨情' },
    { key: 'reservoir', label: '实时水库水情' },
    { key: 'flow', label: '出入库流量' }
  ];

  // Fetch Data Functions
  const getRainList = async () => {
    setLoading(true);
    try {
      const result = await httpget(apiurl.sy.sssyq.reservoir);
      if (result.code === 200) {
        setDataList(result.data);
      }
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  const getReservoirList = async () => {
    setLoading(true);
    try {
      const result = await httpget(apiurl.sy.sssyq.rain);
      if (result.code === 200) {
        setDataList(result.data);
      }
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  const getFlowList = async () => {
    setLoading(true);
    try {
      const result = await httpget(apiurl.sy.sssyq.flow);
      if (result.code === 200) {
        setDataList(result.data);
      }
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    setDataList([]);
    if (activeTab === 'rain') {
      getRainList();
    } else if (activeTab === 'reservoir') {
      getReservoirList();
    } else if (activeTab === 'flow') {
      getFlowList();
    }
  }, [activeTab]);

  // Columns Definitions
  const rainColumns = [
    {
      title: '站点名称',
      dataIndex: 'stnm',
      key: 'stnm',
      align: 'center',
      width: 120,
      ellipsis: true
    },
    {
      title: '今日',
      dataIndex: 'todayDrp',
      key: 'todayDrp',
      align: 'center',
      render: (text) => text ?? '-' 
    },
    {
      title: '昨日',
      dataIndex: 'yesterdayDrp',
      key: 'yesterdayDrp',
      align: 'center',
      render: (text) => text ?? '-' 
    },
    {
      title: '24h',
      dataIndex: 'drp24',
      key: 'drp24',
      align: 'center',
      render: (text) => text ?? '-' 
    },
    {
      title: '48h',
      dataIndex: 'drp48', // Assuming API has this, otherwise mock/calc
      key: 'drp48',
      align: 'center',
      render: (text) => text ?? '-' 
    },
    {
      title: '72h',
      dataIndex: 'drp72', // Assuming API has this
      key: 'drp72',
      align: 'center',
      render: (text) => text ?? '-' 
    }
  ];

  const reservoirColumns = [
    {
      title: '站点名称',
      dataIndex: 'stnm',
      key: 'stnm',
      align: 'center',
      width: 120,
      ellipsis: true
    },
    {
      title: '实时水位(m)',
      dataIndex: 'rz',
      key: 'rz',
      align: 'center',
      render: (text) => text ?? '-' 
    },
    {
      title: '监测时间',
      dataIndex: 'tm',
      key: 'tm',
      align: 'center',
      width: 140,
      render: (text) => text ? text.substring(5, 16) : '-' // Format: MM-DD HH:mm
    }
  ];

  const flowColumns = [
    {
      title: '站点名称',
      dataIndex: 'stnm',
      key: 'stnm',
      align: 'center',
      width: 120,
      ellipsis: true
    },
    {
      title: '实时流量(m³/s)',
      dataIndex: 'q',
      key: 'q',
      align: 'center',
    },
    {
      title: '监测时间',
      dataIndex: 'tm',
      key: 'tm',
      align: 'center',
      width: 140,
      render: (text) => text ? text.substring(5, 16) : '-' // Format: MM-DD HH:mm
    }
  ];

  const getColumns = () => {
    switch (activeTab) {
      case 'rain': return rainColumns;
      case 'reservoir': return reservoirColumns;
      case 'flow': return flowColumns;
      default: return [];
    }
  };

  const handleRowClick = (record) => {
    setSelectedItem(record);
    setDetailVisible(true);
  };

  const renderModalContent = () => {
    if (!selectedItem) return null;

    if (activeTab === 'rain') {
      return <RightPanel stcd={selectedItem.stcd} cleanMode={true} />;
    } else if (activeTab === 'reservoir') {
      return <ReservoirPanel stcd={selectedItem.stcd} cleanMode={true} />;
    } else if (activeTab === 'flow') {
      return <FlowPanel stcd={selectedItem.stcd} cleanMode={true} />;
    }
    return null;
  };

  const getModalTitle = () => {
      if(activeTab === 'rain') return selectedItem?.stnm || '雨情详情';
      if(activeTab === 'reservoir') return selectedItem?.stnm || '水库详情';
      if(activeTab === 'flow') return selectedItem?.stnm || '流量详情';
      return '详情';
  }

  return (
    <div className="water-rain-section">
      <div className="tabs-container">
        {tabs.map(tab => (
          <div
            key={tab.key}
            className={`tab-item ${activeTab === tab.key ? 'active' : ''}`}
            onClick={() => setActiveTab(tab.key)}
            style={activeTab === tab.key ? { backgroundImage: `url(${selectedBg})` } : {}}
          >
            {tab.label}
          </div>
        ))}
      </div>

      <div className="content-list">
        {activeTab === 'rain' && <div className="unit-label">单位：mm</div>}
        <Table
          columns={getColumns()}
          dataSource={dataList}
          pagination={false}
          size="small"
          rowKey="stcd"
          loading={loading}
          scroll={{ y: 200 }}
          onRow={(record) => ({
            onClick: () => handleRowClick(record)
          })}
        />
      </div>

      <CommonModal
        title={getModalTitle()}
        visible={detailVisible}
        onClose={() => setDetailVisible(false)}
        width={"80%"}
      >
        {renderModalContent()}
      </CommonModal>
    </div>
  );
};

export default WaterRainSection;