import { Component } from 'react'
import Taro from '@tarojs/taro'
import { CoverView, View } from '@tarojs/components'

import './index.less'

export default class Index extends Component {
  state = {
    selected: 0,
    color: '#999999',
    selectedColor: '#ffffff',
    backgroundColor: '#000000',
    fontSize: 22,
    list: [
      {
        pagePath: '/pages/category/index',
        text: '首页'
      },
      {
        pagePath: '/pages/home/home',
        text: '我的'
      }
    ]
  }

  switchTab(index, url) {
    this.setSelected(index)
    Taro.switchTab({ url })
  }

  setSelected (idx: number) {
    this.setState({
      selected: idx
    })
  }

  render() {
    const { list, selected, color, selectedColor, backgroundColor, fontSize } = this.state

    return (
      <CoverView className='tab-bar' style={{ backgroundColor: backgroundColor}}>
        <CoverView className='tab-bar-border'></CoverView>
        {list.map((item, index) => {
          return (
            <CoverView key={index} className='tab-bar-item' onClick={this.switchTab.bind(this, index, item.pagePath)}>
              <CoverView style={{ color: selected === index ? selectedColor : color, fontSize: fontSize }}>{item.text}</CoverView>
              <View className='line' style={{ backgroundColor: selected === index ? 'white' : 'transparent'  }}></View>
            </CoverView>
          )
        })}
      </CoverView>
    )
  }
}