import React, { useEffect, useState } from 'react'
import ProjectBasciInfo from './projectBasicInfo'
import TzParams from './tzParams'
import KrLine from './KrLine'
import MonthLl from './monthLl'
import apiurl from '../../../../service/apiurl';
import { httpget2, httppost2 } from '../../../../utils/request';
import "./index.less"
export default function ShuikuBasicInfo() {
  const [tabVal, setTabVal] = useState('1')
  const [data,setData] =useState('')
  const getDataIfo = async () => {
    try {
        
        const res = await httppost2(apiurl.dataResourcesCenter.projectAndWater.shuikuBasicinfo.detail)
        // debugger;
        if (res.code == 200) {
            setData(res.data[0])
        }
    } catch (error) {
        console.log(error);
    }
}
  useEffect(()=>{
    getDataIfo()
  },[])
  return (
    <div className='shuiku-content-root'>
      <div className='fxdd_hsybjs_toolbar'>
        <div
          className={tabVal === '1' ? 'fxdd_hsybjs_toolbar_item hsybjs_checked' : 'fxdd_hsybjs_toolbar_item'}
          onClick={() => setTabVal('1')}>工程基础信息
        </div>
        <div
          className={tabVal === '2' ? 'fxdd_hsybjs_toolbar_item hsybjs_checked' : 'fxdd_hsybjs_toolbar_item'}
          onClick={() => setTabVal('2')}>主要特征参数
        </div>
        <div
          className={tabVal === '3' ? 'fxdd_hsybjs_toolbar_item hsybjs_checked' : 'fxdd_hsybjs_toolbar_item'}
          onClick={() => setTabVal('3')}>水库库容曲线
        </div>
        <div
          className={tabVal === '5' ? 'fxdd_hsybjs_toolbar_item hsybjs_checked' : 'fxdd_hsybjs_toolbar_item'}
          onClick={() => setTabVal('5')}>月生态流量
        </div>
      </div>
      <div
        className='shuiku-content'
        style={{marginLeft:(tabVal == 1 || tabVal == 2) ? 60 : 20}}
      >
        {tabVal === "1" ? <ProjectBasciInfo /> : null}
        {tabVal === "2" ? <TzParams /> : null}
        {tabVal === "3" ? <KrLine dataInfo={data}/> : null}
        {tabVal === "5" ? <MonthLl dataInfo={data}/> : null}
    
      </div>
    </div>
  )
}