import Taro, { useState } from '@tarojs/taro'
import { View } from '@tarojs/components'
import './style.scss'

export default function Tab(props) {
  const [current, setCurrent] = useState(props.default || 0)
  const tabList = props.dataset ? props.dataset.filter(x => x.num) : []
  const handleClick = index => () => {
    setCurrent(index)
    if (typeof props.onChange === 'function') {
      props.onChange(index, tabList[index])
    }
  }

  return (
    <View className="around-tab">
      {tabList.map((item, index) => {
        const { key, label, num } = item || {}
        console.log(item,'123456')
        return (
          <View
            key={key}
            className={`around-tab__item ${current === index ? 'active' : ''}`}
            onClick={handleClick(index)}
          >
            {`${label}(${num})`}
          </View>
        )
      })}
    </View>
  )
}
