import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtTextarea }  from 'taro-ui'
import LFormGroup from '@/c/lform/formGroup'
import LoginPopup from '@/c/login/Popup'
import './add.scss'

class Index extends Component {
  constructor (props) {
    super(props)
    this.state = {
      userInfo: '',
      token: '',
      isLoginPopupShow: false,
      question_cont: '',
      formObj: {
        is_anon: '2',
      },
    }
  }
  config = {
    navigationBarTitleText: '我要提问',
  }

  componentWillMount () {
    this.getDtl()
  }
  getDtl () {
    this.setState({
      token: Taro.getStorageSync('APP_token') || ''
    })
  }

  commentChange (question_cont) {
    this.setState({
      question_cont
    })
  }

  saveHandle () {
    const { question_cont, formObj } = this.state
    if (question_cont && formObj.question_tag) {
      Taro.api.news.apiquestionadd({
        question_tag: formObj.question_tag.join(','),
        question_cont: question_cont,
        is_anon: formObj.is_anon
      }).then(res => {
        Taro.$msgConfirm('提交成功~', () => {
          Taro.redirectTo({
            url: '/pagesMore/news/index?nav=2'
          })
        }, () => {
          Taro.redirectTo({
            url: '/pagesMore/news/index?nav=2'
          })
        })
      })
    } else {
      Taro.$msg('请输入提问的类型和内容')
    }
  }

  baseFormChange (key, val) {
    let { formObj } = this.state
    formObj[key] = val
    this.setState({
      formObj
    })
  }

  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 { question_cont, formObj } = this.state
    const dictData = Taro.getStorageSync('dictData')
    const questionTagMoreOptions = {arr: dictData.question_tag}
    const yesnoMoreOptions = {arr: dictData. sys_yesno}
    const { userInfo, token } = this.state
    const uInfo = userInfo || Taro.getStorageSync('APP_userInfo')
    const { isLoginPopupShow } = this.state
    return (
      <View className="l-box">
        {
          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)} />
        <View className="l-floor-pos">
          <LFormGroup
            val={formObj.is_anon}
            defineBoxClassName='rows3'
            defineContentClassName="border2"
            valStr="is_anon"
            keyStr="选择匿名"
            typeStr="select"
            moreOptions={yesnoMoreOptions}
            bc={this.baseFormChange.bind(this)}
          />
          <LFormGroup
            val={formObj.question_tag}
            defineBoxClassName='rows3'
            defineContentClassName="border2"
            valStr="question_tag"
            keyStr="问题类型"
            typeStr="multiSelect"
            moreOptions={questionTagMoreOptions}
            bc={this.baseFormChange.bind(this)}
          />
        </View>
        <View className="comment-box">
          <View className="cb-title">提问内容</View>
          <AtTextarea
            value={question_cont}
            onChange={this.commentChange.bind(this)}
            maxLength={300}
            height={300}
            placeholder='你想问的...'
          />
        </View>
        <Navigator url={'/pagesMore/news/index?nav=1'} className="scoped-more">先看看其它人说些啥{'>'}</Navigator>
        <View className="l-floor-footer t2">
          <View className="lff-flex">
            <View className="lff-btn full" onClick={this.saveHandle.bind(this)}>提交问题</View>
          </View>
        </View>
      </View>
    )
  }
}

export default Index
