import Taro, { Component } from '@tarojs/taro'
// import { View } from '@tarojs/components'
import { AtTabBar } from 'taro-ui'
import './index.scss'
export default class Footer extends Component {
  constructor (props) {
    super(props)
    const bg1 = require('./img/i_f_1.png')
    const bg1c = require('./img/i_f_1c.png')
    const bg2 = require('./img/i_f_2.png')
    const bg2c = require('./img/i_f_2c.png')
    const bg3 = require('./img/i_f_3.png')
    const bg3c = require('./img/i_f_3c.png')
    const bg4 = require('./img/i_f_4.png')
    const bg4c = require('./img/i_f_4c.png')
    const bg5 = require('./img/i_f_5.png')
    const bg5c = require('./img/i_f_5c.png')
    this.state = {
      current: props.current || 0,
      tabList: [
        { title: '首页', image: bg1, selectedImage: bg1c, url: '/pages/index/index' },
        { title: '找房', image: bg2, selectedImage: bg2c, url: '/pagesHouse/index' },
        { title: '发现', image: bg3, selectedImage: bg3c, url: '/pagesMore/news/index?nav=1' },
        { title: '学区', image: bg4, selectedImage: bg4c, url: '/pagesSchool/area' },
        { title: '我的', image: bg5, selectedImage: bg5c, url: '/pagesMore/center/index' },
      ]
    }
  }

  handleClick (value) {
    const { tabList } = this.state
    if (!tabList[value].url || tabList[value].dev) {
      Taro.$msg('开发中~')
      return
    }
    this.setState({
      current: value
    })
    if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
      Taro.navigateTo({url: tabList[value].url})
    } else {
      Taro.reLaunch({url: tabList[value].url})
    }
  }

  render () {
    const { tabList } = this.state
    return (
      <AtTabBar
        selectedColor="#369af7"
        color= "#999"
        fixed
        tabList={tabList}
        onClick={this.handleClick.bind(this)}
        current={this.state.current}
      />
    )
  }
}