import React, { useEffect, useState } from 'react'
import { zqrl, list} from "../../../../service/sssq";
import Sssw from './sssw';
import Sjcx from '../../../Home/MapCtrl/components/Sqjcsj/index'
import "./index.less"
import { Table } from 'antd';
export default function Sksq() {

  const columns = [
    {title: '水位(m)', key: 'z', dataIndex: 'z', align: 'center'},
    {title: '流量(m³/s)', key: 'q', dataIndex: 'q', align: 'center'},
  ]
    const [tableData, setTableData] = useState([])
    const [swtableData, setSwTableData] = useState([])
  const getData = async (params) => {
      let res = await list(params)
      setTableData(res);
      getSwTableData(res[0]?.stcd)
  }
  
  const getSwTableData = async (stcd) => {
    setSwTableData(await zqrl(stcd));
  };
    useEffect(() => {
      getData({args: "",sources: ["SH", "SW"]})
      }, [])
  return (
      <div className='lf' style={{ height: 'calc(100vh - 168px)', width: "100%" }}>
          <div className='content-sk'>
          <div className='content-left'>
          <div className='comomn-title'>
            <div style={{display:"flex",alignItems:"center"}}>
                <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 className='comomn-title'>
            <div style={{display:"flex",alignItems:"center"}}>
                <img alt='' src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} />
                <span style={{marginLeft:10}}>水位流量关系表</span>
            </div>
          </div>
          <div className='sssw-content' style={{padding:10}}>
            <Table
              dataSource={swtableData}
              rowKey="adcd"
              columns={columns}
              pagination={false}
            />
          </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>
  )
}