import React, { useEffect, useState } from 'react';
import moment from "moment"
import {
  CloseOutlined,
} from '@ant-design/icons';
import { Modal, Tabs } from 'antd';
import genDamImage from '../../../../components/DamGraph/DamImage';
import Spjc from "../components/Spjc";
import Txjc from "../components/Txjc";
import Skssjc from "../components/Skssjc";
import Sksjcx from "../components/Sksjcx";
import {reservoirlist, reswarn} from "../../../../service/sssq";
import './TangYanBa.less'



function ShuikuPop({ id, data, dispatch }) {
  const [picData, setPicData] = useState({});
  const [damGraph, setDamGraph] = useState();
  const [tableData, setTableData] = useState([])

  const getData = async (params) => {
    setTableData(await reservoirlist(params));
  }
  
  useEffect(() => {
    if (data.url && data.url.length > 1) {
      setPicData({
        pic1: data.url[0]?.imgPath,
        pic2: data.url[1]?.imgPath,
        pic1Tm: moment(data.url[0]?.tm).format('YYYY-MM-DD HH:mm:ss'),
        pic2Tm: moment(data.url[1]?.tm).format('YYYY-MM-DD HH:mm:ss'),
      });
    } else if (data.url && data.url.length == 1) {
      setPicData({
        pic1: data.url[0]?.imgPath,
        pic1Tm: moment(data.url[0]?.tm).format('YYYY-MM-DD HH:mm:ss'),
      });
    }

  }, [data]);// eslint-disable-line
 
  useEffect(() => {
    const img = genDamImage(data, 400, 260)
    setDamGraph(img);
  }, [data]);// eslint-disable-line

  useEffect(() => {
    let option = {
      sources: ["SW", "SK"],
      args: "",
    };
    getData(option)
  }, [])
  const closePop = () => {
    dispatch.runtime.closeFeaturePop(id);
  };
  const width = 1050;

  return (
    <>
      <div className="dp-popup" style={{ position: 'absolute', top: 0, width,left: 0,height:646, lineHeight: 1,backgroundColor:'#fff',borderRadius:'10px'}}>
        <div className="dp-popup-content" style={{height:'100%',borderRadius:'10px'}}>
          <div className="content-body tyb skpop" id='tyb' style={{ height: '100%' }}>
            <div className="normalModalStyle" style={{borderRadius:10}}>
           <div className="normalModalStyle_title" style={{marginBottom:0}}>
                        <div className="normalModalStyle_title_icon"></div>
                        <span>{data?.name}&emsp;</span>
                        {(data?.sttp && data?.stnm==='檀树岗') && 
            <span style={
              { 
                display:"inline-block",
                padding: "5px 10px",
                color: "#74a7ff",
                border: "1px solid #74a7ff",
                borderRadius: "5px"
              }
            }> {{MM: '气象站',PP: '雨量站',RR: '水库水文站',ZZ: '河道水位站',ZQ:"河道水文站"}?.[data?.sttp]}（{{'SH':'山洪','SW':'水文','QX':'气象','SK':'水库'}?.[data.source]}）</span>}
                        <div className="normalModalStyle_title_cancel">
                  <CloseOutlined onClick={closePop} style={{color:"#333"}}/>
                </div>
              </div>
          <div style={{paddingLeft:15}}>
          <Tabs defaultActiveKey="1">
          <Tabs.TabPane tab="实时监测" key="1">
            <Skssjc data={{...data,...tableData[0]}}/>
          </Tabs.TabPane>
          <Tabs.TabPane tab="数据查询" key="2">
            <Sksjcx record={data}/>
          </Tabs.TabPane>
          {/* <Tabs.TabPane tab="图像监测" key="3">
            <Txjc record={data}/>
          </Tabs.TabPane>
          <Tabs.TabPane tab="视频监测" key="4">
            <Spjc record={data}/>
          </Tabs.TabPane> */}
        </Tabs>
          </div>
          </div>
            </div >
          <div className="boxfoot"></div>
        </div>
      </div>
    </>
  )
}

export default React.memo(ShuikuPop);