import React, { useEffect, useState } from 'react'
import { reservoirlist, } from "../../../../service/sssq";
import Sssw from './sssw';
import Sjcx from '../../../Home/MapCtrl/components/Sksjcx/index'
import "./index.less"
import { helpers } from '@turf/turf';
export default function Sksq() {
    const [tableData, setTableData] = useState([])
    const getData = async (params) => {
        setTableData(await reservoirlist(params));
    }
    useEffect(() => {
        let option = {
          sources: ["SW", "SK"],
          args: "",
        };
        getData(option)
      }, [])
  return (
      <div className='lf' style={{ height: 'calc(100vh - 168px)', width: "100%" }}>
          <div className='content-sk'>
          <div className='content-left'>
          <div className='comomn-title'>
            <div>
                <img alt='' src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} />
                <span style={{marginLeft:10}}>实时水位</span>
            </div>
            <span>站点：{tableData[0]?.stnm}</span>
            </div>
            <div className='sssw-content'>
                <Sssw data={tableData[0] || {}}/>
            </div>
          </div>
          <div className='content-right'>
          <div className='comomn-title'>
            <div style={{display:"flex",alignItems:"center",columnGap:10}}>
            <img alt='' src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} />
            <span>数据查询</span>
            </div>
            </div>
            <div className='sjcx-content'>
                <Sjcx record={{...tableData[0],height:true} || {}}/>
            </div>
          </div>
          </div>
          
      </div>
  )
}