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

class Index extends Component {
  onShareAppMessage() {
    return {
      title: '南昌买房，来洪楼领取专属优惠',
      path: `/pagesPlan/apply`,
    }
  }
  onShareTimeline () {
    return {
      title: '南昌买房，来洪楼领取专属优惠',
    }
  }


  constructor (props) {
    super(props)
    this.state = {
      formObj: {},
      isMoreShow: false,
    }
  }
  config = {
    navigationBarTitleText: '置业小助手',
    navigationStyle: 'custom',
    navigationBarTextStyle: 'white'
  }

  componentWillMount () {
    Taro.$msgConfirm('正在开发中~敬请期待', () => {
      this.linkHome()
    }, () => {
      this.linkHome()
    })
  }

  saveHandle () {
    const { formObj } = this.state
    if (formObj.name && formObj.phone) {
      const userInfo = Taro.getStorageSync('APP_userInfo')
      const {eId} = this.$router.params
      Taro.api.other.planadd({
        ...formObj,
        estate_id: eId || '',
        userinfo: userInfo ? JSON.stringify(userInfo) : ''
      }).then(res => {
        Taro.$msgConfirm('提交成功，洪楼将根据您的情况联系您', () => {
          if (eId) {
            Taro.navigateBack({
              delta: 1
            })
          } else {
            Taro.reLaunch({
              url: '/pages/index/index'
            })
          }
        }, () => {
          if (eId) {
            Taro.navigateBack({
              delta: 1
            })
          } else {
            Taro.reLaunch({
              url: '/pages/index/index'
            })
          }
        })
      })
    } else {
      Taro.$msg('请输入您的称呼和手机号~')
    }
  }

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

  renderGoHome () {
    const icon = require('@img/images/icon_go_home.png')
    return (
    <Image className="g-go-home" src={icon} onClick={this.linkHome.bind(this)}/>
    )
  }
  linkHome () {
    const pages = getCurrentPages()
    const pagesLength = pages.length
    if (pagesLength < 2) {
      Taro.reLaunch({
        url: '/pages/index/index'
      })
    } else {
      Taro.navigateBack({
        delta: 1
      })
    }
  }



  openMore () {
    this.setState({
      isMoreShow: true
    })
  }

  render () {
    const { formObj, isMoreShow } = this.state
    const dictData = Taro.getStorageSync('dictData') || {}
    const yesnoMoreOptions = {arr: [{key: '不限', val: '-1'}, ...dictData.sys_yesno]}
    const area_type = {arr: dictData.area_type}
    const house_type = {arr: dictData.house_type}
    const topBg = require('./img/banner.jpg')
    const moreIcon = require('./img/more.gif')
    const footerBg = require('./img/slogan.jpg')
    return (
      <View className="l-box scoped-box">
        {this.renderGoHome()}
        <View className="sb-top">
          <Image src={topBg} className="img" />
        </View>
        <View className="sb-main">
          <LFormGroup
            val={formObj.name}
            valStr="name"
            keyStr="您的称呼*"
            keyStr2="请输入您的称呼"
            bc={this.baseFormChange.bind(this)}
          />
          <LFormGroup
            val={formObj.phone}
            valStr="phone"
            keyStr="手机号*"
            keyStr2="请输入联系方式"
            inputType="digit"
            bc={this.baseFormChange.bind(this)}
          />
          <LFormGroup
            val={formObj.sfk}
            valStr="sfk"
            keyStr="首付款"
            keyStr2="请输入"
            inputType="digit"
            typeStr="inputFont"
            inputFont="万"
            bc={this.baseFormChange.bind(this)}
          />
          <LFormGroup
            val={formObj.ygys}
            valStr="ygys"
            keyStr="月供预算"
            keyStr2="请输入"
            inputType="digit"
            typeStr="inputFont"
            inputFont="元"
            bc={this.baseFormChange.bind(this)}
          />
          {
            isMoreShow
            ?
            <View>
              <LFormGroup
                val={formObj.zjys}
                valStr="zjys"
                keyStr="总价预算"
                keyStr2="请输入"
                inputType="digit"
                typeStr="inputFont"
                inputFont="万"
                bc={this.baseFormChange.bind(this)}
              />
              <LFormGroup
                val={formObj.area_type}
                valStr="area_type"
                keyStr="区域偏好"
                keyStr2="请选择"
                typeStr="multiSelect"
                moreOptions={area_type}
                bc={this.baseFormChange.bind(this)}
              />
              <LFormGroup
                val={formObj.house_type}
                valStr="house_type"
                keyStr="户型偏好"
                keyStr2="请选择"
                typeStr="multiSelect"
                moreOptions={house_type}
                bc={this.baseFormChange.bind(this)}
              />
              <LFormGroup
                val={formObj.xg}
                valStr="xg"
                keyStr="是否限购"
                keyStr2="请选择"
                typeStr="select"
                moreOptions={yesnoMoreOptions}
                bc={this.baseFormChange.bind(this)}
              />
              <LFormGroup
                val={formObj.mxzb}
                valStr="mxzb"
                keyStr="想在名校周边"
                keyStr2="请选择"
                typeStr="select"
                moreOptions={yesnoMoreOptions}
                bc={this.baseFormChange.bind(this)}
              />
              <LFormGroup
                val={formObj.gjj}
                valStr="gjj"
                keyStr="用公积金贷款"
                keyStr2="请选择"
                typeStr="select"
                moreOptions={yesnoMoreOptions}
                bc={this.baseFormChange.bind(this)}
              />
              <LFormGroup
                val={formObj.mpjz}
                valStr="mpjz"
                keyStr="带装修精装"
                keyStr2="请选择"
                typeStr="select"
                moreOptions={yesnoMoreOptions}
                bc={this.baseFormChange.bind(this)}
              />
              <LFormGroup
                val={formObj.xf}
                valStr="xf"
                keyStr="是否新房"
                keyStr2="请选择"
                typeStr="select"
                moreOptions={yesnoMoreOptions}
                bc={this.baseFormChange.bind(this)}
              />
              <LFormGroup
                val={formObj.jfsj}
                valStr="jfsj"
                keyStr="交房时间"
                keyStr2="请选择"
                typeStr="date"
                bc={this.baseFormChange.bind(this)}
              />
              <LFormGroup
                val={formObj.zbpt}
                valStr="zbpt"
                moreRows={true}
                defineBoxClassName='noborder'
                defineContentClassName="border"
                pbShow="no"
                keyStr="周边配套要求"
                keyStr2="如地铁，商业，公园等"
                typeStr="textarea"
                bc={this.baseFormChange.bind(this)}
              />
              <LFormGroup
                val={formObj.remark}
                valStr="remark"
                moreRows={true}
                defineBoxClassName='noborder'
                defineContentClassName="border"
                keyStr="备注"
                keyStr2="更多想说的内容填这里"
                typeStr="textarea"
                bc={this.baseFormChange.bind(this)}
              />
            </View>
            :
            <View className="sb-more">
              <Image src={moreIcon} className="img" onClick={this.openMore.bind(this)}/>
            </View>
          }
          <View className="l-floor-footer t2">
            <View className="lff-flex">
              <View className="lff-btn full t6 b" onClick={this.saveHandle.bind(this)}>提交</View>
            </View>
          </View>
        </View>
        <View className="sb-footer">
          <Image src={footerBg} className="img" />
        </View>
      </View>
    )
  }
}

export default Index
