import React, { useState } from 'react'
import ProjectBasciInfo from './projectBasicInfo'
import TzParams from './tzParams'
import KrLine from './KrLine'
import MonthLl from './monthLl'
import "./index.less"
export default function ShuikuBasicInfo() {
  const [tabVal, setTabVal] = useState('1')
  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 /> : null}
        {tabVal === "5" ? <MonthLl /> : null}
    
      </div>
    </div>
  )
}