import { ComponentClass } from 'react'
import Taro, { Component } from '@tarojs/taro'
import { View, Label } from '@tarojs/components'
import './index.scss'
interface DataInterface {
  key: any
  value: string
}
type PageOwnProps = {
  className?: string
  data: DataInterface[]
  active: any
  onClick?: any
}

type IProps = PageOwnProps

interface Index {
  props: IProps;
}

class Index extends Component {

  static options = {
    addGlobalClass: true
  }

  handleNav = e => {
    this.props.onClick(e)
  }

  render() {
    const { data, active } = this.props
    return (
      <View className={'sd-navbar-sub ' + (this.props.className || '')}>
        {
          data.map(e => {
            return <Label key={e.key}
              className={'sd-navbar-sub-item ' + (active === e.key ? 'sd-navbar-sub-active' : '')}
              onClick={this.handleNav.bind(this, e.key)}>{e.value}</Label>
          })
        }
      </View>
    )
  }
}

export default Index as ComponentClass<PageOwnProps>