import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtRadio }  from 'taro-ui'

import './queryBuyHouse.scss'

class Index extends Component {
  onShareAppMessage() {
    return {
      title: '南昌购房资质查询',
    }
  }
  onShareTimeline () {
    return {
      title: '让买房，更省心！',
    }
  }

  config = {
    navigationBarTitleText: '购房资质查询',
  }

  constructor (props) {
    super(props)
    this.state = {
      curVal: 'val',
      op0: {
        title: '您购房的区域是？',
        arr: [
          {label: 'A.限购区域', value: 'val-0', desc: '南昌市、新建区、南昌县、湾里区、经开区'},
          {label: 'B.非限购区域', value: 'val-1s', desc: '九龙湖区、象湖区、儒乐湖区'},
        ]
      },
      op00: {
        title: '您本人名下在南昌一共拥有几套住宅？',
        arr: [
          {label: 'A.0套', value: 'val-0-1'},
          {label: 'B.1套及以上', value: 'val-0-1s'},
        ]
      },
      op000: {
        title: '您的户籍是？',
        arr: [
          {label: 'A.南昌户籍', value: 'val-0-0-0s'},
          {label: 'B.非南昌户籍', value: 'val-0-0-1'},
          {label: 'C.武驻昌警/军官', value: 'val-0-0-2'},
        ]
      },
      op0001: {
        title: '您是否有最近3年内连续满2年的社保或纳税证明？',
        arr: [
          {label: 'A.有', value: 'val-0-0-1-y'},
          {label: 'B.没有', value: 'val-0-0-1-n'},
        ]
      },
      op0002: {
        title: '您是否有南昌身份证、军官（武警）证\士兵证、部队开具的满二年的服役证明？',
        arr: [
          {label: 'A.有', value: 'val-0-0-2-y'},
          {label: 'B.没有', value: 'val-0-0-2-n'},
        ]
      },
      historyArr: []
    }
  }

  componentWillMount () {
    
  }

  handleChange (curVal) {
    let { historyArr } = this.state
    historyArr.push(curVal)
    this.setState({
      curVal,
      historyArr,
    })
  }
  prevHandle () {
    let { historyArr } = this.state
    historyArr.pop()
    this.setState({
      curVal: historyArr.length > 0 ? historyArr[historyArr.length - 1] : 'val',
      historyArr,
    })
  }

  renderOp0 () {
    const { curVal, op0 } = this.state
    const qaBg = require('./queryBuyHouse/qa_bg1.jpg')
    const homeBanner = require('@img/images/home_banner.png')
    const xgMap = require('./queryBuyHouse/nc_map_xg.jpg')
    return (
      <View className="scoped-radio-box">
        <View className="srb-header">
          <Image src={qaBg} className="bg"></Image>
          <View className="p">
            <View className="t">轻松测出你的购房资质</View>
            <View className="t">对待限购不迷茫</View>
            <View className="l"></View>
          </View>
        </View>
        <View className="srb-title"><View className="n">1</View>{op0.title}</View>
        <View className="srb-content">
          <AtRadio
            className="srb-radio-t2"
            options={op0.arr}
            value={curVal}
            onClick={this.handleChange.bind(this)}
          />
        </View>
        <Image src={xgMap} className="scoped-map-xg" onClick={this.previewXGImageHandle.bind(this)}></Image>
        <Image src={homeBanner} className="qr-footer" onClick={this.linkHome.bind(this)}></Image>
      </View>
    )
  }
  previewXGImageHandle () {
    Taro.previewImage({
      current: 'http://icon.honglounews.com/nc_map_xg.jpg',
      urls: ['http://icon.honglounews.com/nc_map_xg.jpg']
    })
  }
  linkHome () {
    Taro.reLaunch({
      url: '/pages/index/index'
    })
  }

  renderOp00 () {
    const { curVal, op00 } = this.state
    return (
      <View className="scoped-radio-box">
        <View className="srb-title"><View className="n">2</View>{op00.title}</View>
        <View className="srb-content">
          <AtRadio
            className="srb-radio-t2"
            options={op00.arr}
            value={curVal}
            onClick={this.handleChange.bind(this)}
          />
        </View>
        <View className="srb-more">
          <View className="p">友情提示</View>
          <View className="p">以个人为单位在南昌市所拥有的套数</View>
        </View>
        <View className="srb-one-btn" onClick={this.prevHandle.bind(this)}>上一题</View>
      </View>
    )
  }

  renderOp000 () {
    const { curVal, op000 } = this.state
    return (
      <View className="scoped-radio-box">
        <View className="srb-title"><View className="n">3</View>{op000.title}</View>
        <View className="srb-content">
          <AtRadio
            className="srb-radio-t2"
            options={op000.arr}
            value={curVal}
            onClick={this.handleChange.bind(this)}
          />
        </View>
        <View className="srb-one-btn" onClick={this.prevHandle.bind(this)}>上一题</View>
      </View>
    )
  }
  
  renderOp0001 () {
    const { curVal, op0001 } = this.state
    return (
      <View className="scoped-radio-box">
        <View className="srb-title"><View className="n">4</View>{op0001.title}</View>
        <View className="srb-content">
          <AtRadio
            className="srb-radio-t2"
            options={op0001.arr}
            value={curVal}
            onClick={this.handleChange.bind(this)}
          />
        </View>
        <View className="srb-more">
          <View className="p">友情提示</View>
          <View className="p">社保或纳税证明不可以断缴或者补缴</View>
        </View>
        <View className="srb-one-btn" onClick={this.prevHandle.bind(this)}>上一题</View>
      </View>
    )
  }

  renderOp0002 () {
    const { curVal, op0002 } = this.state
    return (
      <View className="scoped-radio-box">
        <View className="srb-title"><View className="n">4</View>{op0002.title}</View>
        <View className="srb-content">
          <AtRadio
            className="srb-radio-t2"
            options={op0002.arr}
            value={curVal}
            onClick={this.handleChange.bind(this)}
          />
        </View>
        <View className="srb-more">
          <View className="p">友情提示</View>
          <View className="p">军官在限购区域购房所需材料</View>
        </View>
        <View className="srb-one-btn" onClick={this.prevHandle.bind(this)}>上一题</View>
      </View>
    )
  }

  arrToCurobj (arr) {
    let obj = {}
    arr.forEach(item => {
      obj[item.value] = item.label
    })
    return obj
  }
  renderBc () {
    const qaBg2 = require('./queryBuyHouse/qa_bg2.jpg')
    const qrcodeImg = require('./queryBuyHouse/zgcx_ewm.png')
    const moreBanner = require('./queryBuyHouse/more_banner.png')
    const { historyArr, op0, op00, op000, op0001, op0002 } = this.state
    let qaList = []
    historyArr.forEach((val, index) => {
      if (index === 0) {
        qaList.push({
          q: op0.title,
          a: this.arrToCurobj(op0.arr)[val]
        })
      }
      if (index === 1) {
        qaList.push({
          q: op00.title,
          a: this.arrToCurobj(op00.arr)[val]
        })
      }
      if (index === 2) {
        qaList.push({
          q: op000.title,
          a: this.arrToCurobj(op000.arr)[val]
        })
      }
      if (index === 3) {
        if (historyArr[2] === 'val-0-0-1') {
          qaList.push({
            q: op0001.title,
            a: this.arrToCurobj(op0001.arr)[val]
          })
        }
        if (historyArr[2] === 'val-0-0-2') {
          qaList.push({
            q: op0002.title,
            a: this.arrToCurobj(op0002.arr)[val]
          })
        }
      }
    })
    const qaItems = qaList.map((qaItem, qaIndex) => {
      return (
        <View key={qaIndex} className="op">
          <View className="q">{qaItem.q}</View>
          <View className="a">{qaItem.a}</View>
        </View>
      )
    })
    return (
      <View className="query-result">
        <View className="srb-header t2">
          <Image src={qaBg2} className="bg"></Image>
          <View className="p">
            <View className="t">购房资质测试结果</View>
            <View className="l"></View>
          </View>
          <View className="srb-btn" onClick={this.bcTest.bind(this)}>再测一次</View>
          <Image src={qrcodeImg} className="srb-qrcode" onClick={this.previewQrcodeImageHandle.bind(this)} ></Image>
        </View>
        <View className="qr-qa">
          <View className="title">您的选择：</View>
          {qaItems}
        </View>
        <Button open-type="contact" className="btn-to-div">
          <Image src={moreBanner} className="qr-footer" onClick={this.linkHome.bind(this)}></Image>
        </Button>
      </View>
    )
  }
  bcTest () {
    this.setState({
      curVal: 'val',
      historyArr: [],
    })
  }
  
  previewQrcodeImageHandle () {
    Taro.previewImage({
      current: 'http://icon.honglounews.com/miniqrcode_qbh.jpg',
      urls: ['http://icon.honglounews.com/miniqrcode_qbh.jpg']
    })
  }

  render () {
    const { curVal } = this.state
    return (
      <View className="l-box">
        {
          curVal === 'val'
          &&
          this.renderOp0()
        }
        {
          curVal === 'val-0'
          &&
          this.renderOp00()
        }
        {
          curVal === 'val-0-1'
          &&
          this.renderOp000()
        }
        {
          curVal === 'val-0-0-1'
          &&
          this.renderOp0001()
        }
        {
          curVal === 'val-0-0-2'
          &&
          this.renderOp0002()
        }
        {
          curVal === 'val-0-0-1-y'
          &&
          <View className="scoped-radio-box">
            {this.renderBc()}
            <View className="srb-result t2">
              <View className="r-p1">恭喜您</View>
              <View className="r-p1">可以在限购区域购买1套住宅</View>
            </View>
          </View>
        }
        {
          curVal === 'val-0-0-2-y'
          &&
          <View className="scoped-radio-box">
            {this.renderBc()}
            <View className="srb-result t2">
              <View className="r-p1">恭喜您</View>
              <View className="r-p1">可以在限购区域购买1套住宅</View>
            </View>
          </View>
        }
        {
          curVal === 'val-0-0-1-n'
          &&
          <View className="scoped-radio-box">
            {this.renderBc()}
            <View className="srb-result">
              <View className="r-p1">不好意思</View>
              <View className="r-p1">您没有购房资质</View>
              <View className="r-p2">
                <View>非南昌户籍需要提供近3年内满2年的南昌市社保或者纳税证明\士兵证、部队开具的满二年的服役证明</View>
              </View>
            </View>
          </View>
        }
        {
          curVal === 'val-0-0-2-n'
          &&
          <View className="scoped-radio-box">
            {this.renderBc()}
            <View className="srb-result">
              <View className="r-p1">不好意思</View>
              <View className="r-p1">您没有购房资质</View>
              <View className="r-p2">
                <View>军官在限购区域购房需要提供南昌身份证、军官（武警）证\士兵证、部队开具的满二年的服役证明</View>
              </View>
            </View>
          </View>
        }
        {
          curVal === 'val-0-0-0s'
          &&
          <View className="scoped-radio-box">
            {this.renderBc()}
            <View className="srb-result">
              <View className="r-p1">恭喜您</View>
              <View className="r-p1">可以在限购区域购买1套住宅</View>
              <View className="r-p2">
                <View>限购区域以个人为单位，做多只能拥有1套住宅</View>
              </View>
            </View>
          </View>
        }
        {
          curVal === 'val-1s'
          &&
          <View className="scoped-radio-box">
            {this.renderBc()}
            <View className="srb-result">
              <View className="r-p1">恭喜您</View>
              <View className="r-p1">非限购区域购房无户籍要求，无套数限制</View>
              <View className="r-p2">
                <View>非限购区域：</View>
                <View>九龙湖区、象湖区、儒乐湖区</View>
              </View>
            </View>
          </View>
        }
        {
          curVal === 'val-0-1s'
          &&
          <View className="scoped-radio-box">
            {this.renderBc()}
            <View className="srb-result">
              <View className="r-p1">不好意思</View>
              <View className="r-p1">您没有购房资质，无法购房</View>
              <View className="r-p2">
                <View>限购区域购房：</View>
                <View>南昌户籍需个人为单位名下无房，</View>
                <View>非南昌户口需提供最近3年内连续2年的社保/纳税证明，个人名下无房</View>
              </View>
            </View>
          </View>
        }
      </View>
    )
  }
}

export default Index
