import React,{Component} from 'react';
import Taro from '@tarojs/taro';
import { View , CoverImage,CoverView } from '@tarojs/components'
import './index.less'

import icon_component from './image/icon_component.png';
import icon_component_HL from './image/icon_component_HL.png';
import icon_API from './image/icon_API.png';
import icon_API_HL from './image/icon_API_HL.png';
import {connect} from "react-redux";
import {add, asyncAdd, minus} from "../actions/counter";

@connect(({ counter }) => ({
  counter
}), (dispatch) => ({
  add () {
    dispatch(add())
  },
  dec () {
    dispatch(minus())
  },
  asyncAdd () {
    dispatch(asyncAdd())
  }
}))
class CustomTabBar extends Component{
  constructor(props) {
    super(props);
    this.state={
      color: "#9C9ABB",
      selectedColor: "#76D3FF",
      list: [
        {
          pagePath: "/pages/index/index",
          iconPath: icon_component,
          selectedIconPath: icon_component_HL,
          text: "首页"
        },
        {
          pagePath: "/pages/index/index",
          iconPath: icon_API,
          selectedIconPath: icon_API_HL,
          text: "课程"
        },
        {
          pagePath: "/pages/user/index",
          iconPath: icon_API,
          selectedIconPath: icon_API_HL,
          text: "我的"
        },
      ]
    }
    this.switchTab = this.switchTab.bind(this);
  }

  switchTab(value,key) {
    Taro.switchTab({
      url: value.pagePath
    })
  }

  render() {
    return(
      <View className='tab-bar'>
          {/*<View  className='tab-bar-border'/>*/}
          {
            this.state.list.map((v,key)=>(
              <View key={key} className='tab-bar-item' dataPath={v.pagePath} dataIndex={key} onClick={()=>{
                this.switchTab(v,key);
              }}>
                {
                  key !== 1 ?
                    <>
                      <CoverImage className='coverImage' src={this.props.counter.num === key ? v.selectedIconPath : v.iconPath}/>
                      <View className='View'  style={{color:this.props.counter.num === key ? this.state.selectedColor : this.state.color}}>
                        {v.text}
                      </View>
                    </>:
                    <View className='zhong'>
                      <CoverImage className='coverImage' src={this.props.counter.num === key ? v.selectedIconPath : v.iconPath}/>
                      <View className='View'  style={{color:this.props.counter.num === key ? this.state.selectedColor : this.state.color}}>{v.text}</View>
                    </View>
                }
              </View >
            ))
          }
      </View >
    )
  }
}

export default CustomTabBar;
