import {useEffect, useState} from "react";
import {Tabs, TabPane} from '@nutui/nutui-react-taro'

const list = [
  {
    title: '今天',
    id: 1
  },
  {
    title: '昨天',
    id: 2
  },
  {
    title: '过去7天',
    id: 3
  },
  {
    title: '过去30天',
    id: 4
  }
]
const Chart = () => {
  const [tapIndex, setTapIndex] = useState<string | number>('0')
  const reload = () => {

  }

  useEffect(() => {
    reload()
  }, [])

  return (
    <>
      <Tabs
        align={'left'}
        tabStyle={{position: 'sticky', top: '0px'}}
        value={tapIndex}
        onChange={(paneKey) => {
          setTapIndex(paneKey)
        }}
      >
        {
          list?.map((item, index) => {
            return (
              <TabPane key={index} title={item.title}/>
            )
          })
        }
      </Tabs>
      {
        list?.map((item, index) => {
          console.log(item.title)
          return (
            <div key={index} className={'px-3'}>
              {
                tapIndex != index ? null :
                  <div className={'bg-white rounded-lg p-4 flex justify-center items-center text-center text-gray-300'} style={{height: '200px'}}>
                    线状图
                  </div>
              }
            </div>
          )
        })
      }
    </>

  )
}
export default Chart