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: '/pagesQa/index' },
        { title: '学区', image: bg4, selectedImage: bg4c, url: '/pagesSchool/area' },
        { title: '我的', image: bg5, selectedImage: bg5c, url: '/pagesMore/center/index', text: '', max: 99 },
      ]
    }
  }
  componentWillMount () {
    const needUserName = Taro.getStorageSync('APP_needUsername')
    const appToken = Taro.getStorageSync('APP_token')
    const appUserInfo = Taro.getStorageSync('APP_userInfo')
    if (needUserName && needUserName === 'yes' && appToken && appUserInfo.avatarUrl && appUserInfo.nickName) {
      Taro.api.base.apiwxuseredit({
        avatar: appUserInfo.avatarUrl,
        nickname: appUserInfo.nickName,
      }).then(res => {
        Taro.removeStorageSync('APP_needUsername')
      })
    }
    Taro.api.other.notifycount().then(res => {
      const notify = res.count || ''
      const { getNotify } = this.props
      if (getNotify) getNotify(notify)
      if (notify) {
        let { tabList } = this.state
        tabList[4].text = notify
        const newsDot = Taro.getStorageSync('APP_newsDot')
        if (newsDot) {
          tabList[2].dot = true
        } else {
          tabList[2].dot = false
        }
        this.setState({
          tabList
        })
      } else {
        let { tabList } = this.state
        const newsDot = Taro.getStorageSync('APP_newsDot')
        if (newsDot) {
          tabList[2].dot = true
        } else {
          tabList[2].dot = false
        }
        this.setState({
          tabList
        })
      }
    })
  }

  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}
      />
    )
  }
}