import React, { useEffect, useState } from 'react'
import { reservoirlist, } from "../../../../service/sssq";
import { message } from 'antd';
import Sssw from './sssw';
// import Sjcx from '../../../Home/MapCtrl/components/Jcsj/index'
import Sjcx from './sjcx'
import "./index.less"
import { httppost2 } from '../../../../utils/request';
import apiurl from '../../../../service/apiurl';
import { helpers } from '@turf/turf';
import NormalSelect from '../../../../components/Form/NormalSelect';
export default function Sksq() {
  const [selectList, setSelectList] = useState([])
  const [selected, setSelected] = useState(0)
  const getList = async() => {
    try {
      const data = await reservoirlist()
      const list = data?.map((item,index)=>({
        label:item.stnm,
        value:index,
        data:item
      }))
      setSelectList(list)
    } catch (error) {
      console.log(error);
    }
  }

  
  
  useEffect(() => {
    getList()
  }, [])
   
  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",columnGap:0}}>
                <img alt='' src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} />
                <span style={{marginLeft:10}}>实时数据</span>
            </div>
            <div style={{display:"flex",columnGap:10,width:"45%",alignItems:"center"}}>
            <span style={{width:"18%"}}>站点：</span>
              {/* {selectList?.[0]?.stnm} */}
              <NormalSelect
                style={{ width: '77%' }}
                allowClear
                options={selectList}
                value={selected}
                onChange={(e) => setSelected(e)}
              />
            </div>
            </div>
            <div className='sssw-content'>
                <Sssw data={selectList?.[selected]?.data || {}}/>
            </div>
          </div>
          <div className='content-right' style={{display:'flex',flexDirection:'column'}}>
          <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' style={{flex:1}}>
              <Sjcx data={selectList?.[selected]?.data || {}}/>
            </div>
          </div>
          </div>
          
      </div>
  )
}