import Taro, { Component } from '@tarojs/taro'
import { View, Image, Navigator } from '@tarojs/components'
import LoginPopup from '@/c/login/Popup'
import Footer from '@/c/footer'

import './index.scss'

class Index extends Component {

  config = {
    navigationBarTitleText: '个人中心',
    backgroundTextStyle: 'light',
    navigationBarTextStyle: 'white',
    navigationBarBackgroundColor: '#369af7'
  }

  constructor (props) {
    super(props)
    this.state = {
      userInfo: '',
      token: '',
      isLoginPopupShow: false,
    }
  }

  componentWillMount () {
    this.getDtl()
    const userInfo = Taro.getStorageSync('APP_userInfo') || ''
    if (userInfo) {
      this.setState({
        userInfo
      })
    }
  }
  getDtl () {
    this.setState({
      token: Taro.getStorageSync('APP_token') || ''
    })
  }

  renderHeader () {
    const { userInfo } = this.state
    const logo = require('@img/icon_ex.jpg')
    const bg = require('./img/center_bg_top.jpg')
    return (
      <View className="center-header">
        <Image src={bg} className="ch-bg"></Image>
        <View className="ch-warp">
          <View className="ch-img">
            <View className="bg"></View>
            <Image src={ userInfo.avatarUrl || logo} className="img"></Image>
          </View>
          <View className="ch-main">
            <View className="ch-p1">{userInfo.nickName || '洪楼Plus'}</View>
            <View className="ch-p2">{'洪楼PLUS，让买房更加简单~'}</View>
          </View>
        </View>
        {this.renderClass()}
      </View>
    )
  }

  renderClass () {
    const icon1 = require('./img/icon5_01.png')
    const icon2 = require('./img/icon5_02.png')
    const icon3 = require('./img/icon5_03.png')
    const icon4 = require('./img/icon5_04.png')
    return (
      <View className="center-block">
        <Navigator url="/pagesHouse/follow" className="cb-op">
          <Image className="i" src={icon1} />
          <View className="t">我的关注</View>
        </Navigator>
        <Navigator url="/pagesMore/qa/list" className="cb-op">
          <Image className="i" src={icon2} />
          <View className="t">常见答疑</View>
        </Navigator>
        <Navigator url="/pagesHouse/pkList" className="cb-op">
          <Image className="i" src={icon3} />
          <View className="t">楼盘PK</View>
        </Navigator>
        <Navigator url="/pagesHouse/history" className="cb-op">
          <Image className="i" src={icon4} />
          <View className="t">浏览记录</View>
        </Navigator>
      </View>
    )
  }


  renderEntry () {
    const iconSign = require('@img/icon_sign_right.png')
    const icon1 = require('./img/icon5_05.png')
    const icon2 = require('./img/icon5_06.png')
    const icon3 = require('./img/icon5_07.png')
    const icon4 = require('./img/icon5_08.png')
    const icon5 = require('./img/icon5_09.png')
    const icon6 = require('./img/icon5_10.png')
    const icon7 = require('./img/icon5_11.png')
    const icon8 = require('./img/icon5_12.png')
    return (
      <View className="center-entry">
        <Navigator url="/pagesMore/center/group" className="entry-op">
          <Image src={icon1} className="entry-icon"></Image>
          <View className="entry-text">购房群</View>
          <View className="entry-right">
            <Image src={iconSign} className="sign"></Image>
          </View>
        </Navigator>
        {/* Button open-type="contact" */}
        <View className="entry-op" onClick={this.urlLink.bind(this, 'honglou')}>
          <Image src={icon2} className="entry-icon"></Image>
          <View className="entry-text">公众号</View>
          <View className="entry-right">
            <Image src={iconSign} className="sign"></Image>
          </View>
        </View>
        {/* onClick={this.urlLink.bind(this, 'dev')} */}
        <Button open-type="contact" className="entry-op">
          <Image src={icon3} className="entry-icon"></Image>
          <View className="entry-text">在线客服</View>
          <View className="entry-right">
            <Image src={iconSign} className="sign"></Image>
          </View>
        </Button>
        <Navigator url="/pagesMore/center/feedback" className="entry-op line">
          <Image src={icon4} className="entry-icon"></Image>
          <View className="entry-text">意见反馈</View>
          <View className="entry-right">
            <Image src={iconSign} className="sign"></Image>
          </View>
        </Navigator>
        <Navigator url="/pagesMore/center/webViews?url=https://mp.weixin.qq.com/s/SWJybCmv5MCdLYnBUwJw5Q" className="entry-op">
          <Image src={icon5} className="entry-icon"></Image>
          <View className="entry-text">什么是三限房？</View>
          <View className="entry-right">
            <Image src={iconSign} className="sign"></Image>
          </View>
        </Navigator>
        <Navigator url="/pagesMore/center/webViews?url=https://mp.weixin.qq.com/s/yvPTx1AkufLtFobuEZlNTQ" className="entry-op">
          <Image src={icon6} className="entry-icon"></Image>
          <View className="entry-text">三限房申购流程</View>
          <View className="entry-right">
            <Image src={iconSign} className="sign"></Image>
          </View>
        </Navigator>
        {/* <Navigator url="/pagesMore/center/webViews?url=https://mp.weixin.qq.com/s/gyfoNf-FnRs5h-3IDKZeCQ" className="entry-op">
          <Image src={icon7} className="entry-icon"></Image>
          <View className="entry-text">如何查询某楼盘成交价？</View>
          <View className="entry-right">
            <Image src={iconSign} className="sign"></Image>
          </View>
        </Navigator> */}
        <Navigator url="/pagesMore/center/webViews?url=https://mp.weixin.qq.com/s/laCq8pL42wlNy2yfY0_mOw" className="entry-op">
          <Image src={icon8} className="entry-icon"></Image>
          <View className="entry-text">买二手房须知</View>
          <View className="entry-right">
            <Image src={iconSign} className="sign"></Image>
          </View>
        </Navigator>
      </View>
    )
  }
  urlLink (url, str) {
    if (url === 'dev') {
      Taro.$msg('开发中~')
      return
    }
    if (url === 'honglou') {
      Taro.$msg('微信关注->洪楼News')
      return
    }
    Taro.navigateTo({
      url
    })
  }

  getUserProfile (e) {
    wx.getUserProfile({
      desc: '用于完善头像和昵称资料',
      success: (res) => {
        const dtlObj = res || {}
        this.setState({
          userInfo: dtlObj.userInfo
        })
        Taro.setStorageSync('APP_userInfo', dtlObj.userInfo)
      }
    })
  }
  openLoginPopup (obj) {
    this.setState({
      isLoginPopupShow: true
    })
  }
  closeLoginPopup (str) {
    this.setState({
      isLoginPopupShow: false
    })
    if (str && str === 'success') {
      this.getDtl()
    }
  }

  render () {
    const { userInfo, token } = this.state
    const uInfo = userInfo || Taro.getStorageSync('APP_userInfo')
    const { isLoginPopupShow } = this.state
    return (
      <View className="l-box has-footer">
        {
          uInfo
          ? token || isLoginPopupShow
          ? ''
          : <Button className="g-u-btn" onClick={this.openLoginPopup.bind(this)}></Button>
          : <Button className="g-u-btn" onClick={this.getUserProfile.bind(this)}></Button>
        }
        <LoginPopup show={isLoginPopupShow} close={this.closeLoginPopup.bind(this)} />
        {this.renderHeader()}
        {this.renderEntry()}
        <Footer current={4} />
      </View>
    )
  }
}

export default Index
