import React, { useEffect, useState } from 'react'
import { reservoirlist, } from "../../../../service/sssq";
import Sssw from './sssw';
import Sjcx from '../../../Home/MapCtrl/components/Sksjcx/index'
import NormalSelect from '../../../../components/Form/NormalSelect';
import "./index.less"
import { helpers } from '@turf/turf';
import { Label } from 'react-konva';


const sj = {
  "stcd": "61610701",
  "stnm": "檀树岗2",
  "rvnm": "檀树岗河",
  "hnnm": "长江中游下段北岸",
  "bsnm": "长江",
  "lgtd": "114.744317000",
  "lttd": "31.505000000",
  "stlc": "黄冈市红安县七里镇檀树岗村",
  "alt": null,
  "mdbz": null,
  "mdpr": null,
  "dtmnm": "吴淞",
  "dtmel": null,
  "dtpr": "0.000",
  "sttp": "RR",
  "dfrtms": null,
  "fritm": null,
  "frgrd": "3",
  "esstym": "197103",
  "bgfrym": "197103",
  "edfrym": null,
  "atcunit": "黄冈市水利和湖泊局",
  "admauth": "黄冈水文",
  "locality": "湖北水文",
  "stbk": null,
  "stazt": null,
  "dstrvm": null,
  "drna": "78",
  "phcd": "TSG",
  "usfl": "1",
  "comments": "中小河流改造",
  "moditime": "2022-02-23 00:00:00",
  "remGd": null,
  "ogid": null,
  "vlfl": null,
  "atid": null,
  "sdfl": null,
  "rma": null,
  "mdps": null,
  "mddt": null,
  "stindex": null,
  "starea": null,
  "stlevel": null,
  "code": null,
  "ispbj": null,
  "issxst": null,
  "stpq": null,
  "sthday": null,
  "source": "SW",
  "importancy": 0,
  "clgtd": "114.744317000",
  "clttd": "31.505000000",
  "elev": null,
  "crucial": 0,
  "buildYear": null,
  "adcd": null,
  "lyid": null,
  "resCode": "42120250085",
  "rvCode": null,
  "status": 1,
  "agreement": null,
  "simCard": null,
  "bdCard": null,
  "v": 104.1
}


export default function Sksq() {
    const [tableData, setTableData] = useState([])
    const [selected, setSelected] = useState(0)

    const getData = async (params) => {
      const data = await await reservoirlist(params)
        setTableData([...data,sj]);
    }
    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 style={{display:"flex",alignItems:"center"}}>
                <img alt='' src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} />
                <span style={{marginLeft:10}}>实时水位</span>
            </div>
            <span>站点：
            <NormalSelect
              allowClear={false}
              style={{ width: '150px' }}
              options={tableData.map((item,index)=>({ label: item.stnm, value: index }))}
              value={selected}
              onChange={(e) => setSelected(e)}
            />
            </span>
            </div>
            <div className='sssw-content'>
                <Sssw data={tableData[selected] || {}}/> 
            </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[selected],height:true} || {}}/>
            </div>
          </div>
          </div>
          
      </div>
  )
}