import React, { Component } from 'react'
import { connect } from 'react-redux';
import { switchTab } from '@tarojs/taro'
import { CoverView, CoverImage, Text , View} from '@tarojs/components'
import './index.scss'

interface CustomTabBarState {
  dispatch,
  common,
}

const NORMAL_COLOR = '#999999'
const SELECTED_COLOR = '#FE7741'



@connect(({ common }) => ({
  common,
}))
export default class CustomTabBar extends Component<CustomTabBarState> {
  state = {
    current: 0,
  }
  

  changeTab = (item: any) => {
     const { dispatch } =this.props;
     switchTab({ url: item.pagePath })
    dispatch({
      type: 'common/updateState',
       payload: {
        selectedPath:item.pagePath
       },
    })
  }

  render() {
    const { common:{selectedPath, tabList }} = this.props; 
    return (
      <CoverView className='tab'>
        {tabList.map((item, index) => {
          return (
            <CoverView
              className='tab-item'
              onClick={this.changeTab.bind(this, item, index)}
              data-path={item.pagePath}
              key={item.text}
            >
              {/* 请使用 base64 格式，否则会存在性能问题 */}
                  <CoverImage
                    className='tab-item-img'
                    src={
                      selectedPath === item.pagePath ? item.selectedIconPath : item.iconPath
                    }
                  />
                  <View
                    className='tab-item-text'
                    style={{
                      color: selectedPath === item.pagePath ? SELECTED_COLOR : NORMAL_COLOR,
                    }}
                  >
                    {item.text}
                  </View>
                </CoverView>
              )
            })}
          </CoverView>
    )
  }
}