import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { arrToObj } from '@utils'
import { AtTabs } from 'taro-ui'
import './roomPrice.scss'

class Index extends Component {
  onShareAppMessage() {
    const {eId, id, name} = this.$router.params
    return {
      title: `来看看${name}的一房一价表`,
      path: `/pagesHouse/roomPrice?eId=${eId}&id=${id}&name=${name}`,
    }
  }
  onShareTimeline () {
    const {eId, id, name} = this.$router.params
    return {
      title: `来看看${name}的一房一价表`,
      path: `/pagesHouse/roomPrice?eId=${eId}&id=${id}&name=${name}`,
    }
  }

  constructor (props) {
    super(props)
    const {eId: curId} = this.$router.params
    this.state = {
      curId,
      curObj: {},
      curNav: 0,
      roomArr: [],
      curRoomObj: {},
      isDtlShow: false,
    }
  }

  config = {
    navigationBarTitleText: '一房一价表',
    navigationBarBackgroundColor: '#369af7',
    navigationBarTextStyle: 'white'
  }

  componentWillMount () {
    // const { name } = this.$router.params
    // Taro.setNavigationBarTitle({
    //   title: name + '-一房一价表' || '一房一价表'
    // })
    const {id} = this.$router.params
    Taro.api.house.apiestatelottery2batchinfo({
      lottery_id: id,
    }).then(res => {
      this.setState({
        curObj: res || {}
      }, () => {
        this.getDtl()
      })
    })
  }

  getDtl = () => {
    const { curObj, curNav } = this.state
    const bn = curObj.building_num.split(',')
    const {eId, id} = this.$router.params
    Taro.api.house.apiestatelotterypricelist({
      estate_id: eId,
      lottery_id: id,
      building_num: bn[curNav],
    }).then(res => {
      this.setState({
        roomArr: res || []
      })
    })
  }

  componentDidShow () { }

  componentDidHide () { }

  renderTop () {
    const {eId, id, name} = this.$router.params
    const curParams = `eId=${eId}&id=${id}&name=${name}`
    const { curObj, curNav } = this.state
    const nameIcon = require('./img/yfyj/yfyj04.png')
    const i1 = require('./img/yfyj/yfyj05.png')
    const i2 = require('./img/yfyj/yfyj06.png')
    const op1 = require('./img/yfyj/yfyj07.png')
    const op2 = require('./img/yfyj/yfyj08.png')
    const op3 = require('./img/yfyj/yfyj09.png')
    const op4 = require('./img/yfyj/yfyj10.png')
    const bg = require('./img/yfyj/bg.jpg')
    let navArr = []
    if (curObj.building_num) navArr = curObj.building_num.split(',')
    const tabList = navArr.map((title, index) => {
      return {title}
    })
    return (
      <View className="scoped-header">
        <View className="scoped-top">
          <Image src={bg} className="bg"></Image>
          <View className="st-wrap">
            <View className="st-header">
              <View className="text">
                <Image src={nameIcon} className="i"></Image>
                <View className="t">{name}</View>
              </View>
              <View className="r" onClick={this.urlDtlLink.bind(this)}>返回楼盘详情</View>
            </View>
            <View className="st-p1">
              <Image className="i" src={i1}></Image>
              <View className="t">{curObj.under_way}</View>
            </View>
            <View className="st-p1">
              <Image className="i" src={i2}></Image>
              <View className="t2">{curObj.lottery_time}</View>
            </View>
            <View className="st-p2">
              <Image src={op1} className="op1" onClick={this.urlLink.bind(this, '/pagesHouse/roomPriceImg', curParams)}></Image>
              <Image src={op2} className="op2" onClick={this.urlLink.bind(this, '/pagesHouse/roomPriceList', curParams)}></Image>
              <Image src={op3} className="op3" onClick={this.previewQrcodeImageHandle.bind(this, 'http://icon.honglounews.com/ncfxw.jpg', ['http://icon.honglounews.com/ncfxw.jpg'])}></Image>
              <Image src={op4} className="op4" onClick={this.previewImageHandle.bind(this, curObj.project_img, [curObj.project_img])}></Image>
            </View>
            {this.renderQrcode()}
          </View>
        </View>
        <View className="sh-nav">
          <AtTabs
            current={curNav}
            scroll
            tabList={tabList}
            onClick={this.navClick.bind(this)}>
          </AtTabs>
        </View>
      </View>
    )
  }
  urlLink (u, params) {
    if (u === 'dev') {
      Taro.$msg('开发中~敬请期待')
    } else {
      let url = u
      if (params) url += `?${params}`
      Taro.navigateTo({
        url
      })
    }
  }
  navClick (value) {
    this.setState({
      curNav: value
    }, () => {
      this.getDtl()
    })
  }
  renderQrcode () {
    const qrcodeImg = 'http://icon.honglounews.com/miniqrcode.jpg'
    return (
      <Image src={qrcodeImg} className="scoped-qrcode"  onClick={this.previewQrcodeImageHandle.bind(this, qrcodeImg, [qrcodeImg])} />
    )
  }
  previewQrcodeImageHandle (current, urls) {
    Taro.previewImage({
      current,
      urls
    })
  }
  //  
  urlDtlLink () {
    const { eId } = this.$router.params
    Taro.navigateTo({url: '/pagesHouse/indexDtl?id=' + eId + '&YH=zzyh'})
  }

  renderInfo () {
    const { roomArr } = this.state
    let cArr = roomArr || []
    const htArr = cArr[0] ? cArr[0].data : []
    const htArrIndex = htArr.length
    const htitems = htArr.map((item, index) => {
      return (
        <View className={'srp-col num' + htArrIndex} key={index}>
          <View className="srp-ht">
            <View className="srp-img">
              <Image src={item.house_img + '_xs'} className="img" onClick={this.previewImageHandle.bind(this, item.house_img, [item.house_img])}/>
              <View className="tips">
                <View className="bg"></View>
                <View className="t">查看大图</View>
              </View>
            </View>
            <View className="p1">{item.house_type}</View>
            <View className="p2">{item.built}㎡</View>
            <View className="p2">得房率:{item.house_rate}</View>
          </View>
        </View>
      )
    })
    return (
      <View className="scoped-room-price">
        <View className="srp-row">
          <View className="srp-col">户型图</View>
          {htitems}
        </View>
        {
          cArr.map((one, oIndex) => {
            return (
              <View className="srp-row" key={oIndex}>
                <View className="srp-col">{one.storey}层</View>
                {
                  one.data.map((two, tIndex) => {
                    const oneDataLength = one.data.length
                    return (
                      <View className={'srp-col num' + oneDataLength} key={tIndex} onClick={this.openDtlPopup.bind(this, two)}>
                        <View className="srp-room">
                          <View className="srpr-p1">{two.room}室</View>
                          <View className="srpr-p2">{two.built}㎡</View>
                          <View className="srpr-p2">单价:￥{parseInt(two.sale)}/㎡</View>
                          <View className="srpr-p2">总价:{parseInt(Number(two.price) / 10000)}万</View>
                        </View>
                      </View>
                    )
                  })
                }
              </View>
            )
          })
        }
      </View>
    )
  }
  previewImageHandle (cur, arr) {
    const current = `${cur}_plus`
    const urls = arr.map(item => {
      return `${item}_plus`
    })
    Taro.previewImage({
      current,
      urls
    })
  }


  renderDtl () {
    const { isDtlShow, curRoomObj } = this.state
    return (
      <View className={isDtlShow ? 'l-modal-box' : 'l-modal-box hide'}>
        <View className='lmb-bg'></View>
        <View className='lmb-body'>
          <View className="scoped-dtl">
            <View className="sd-img">
              <Image src={curRoomObj.house_img + '_xs'} className="img" onClick={this.previewImageHandle.bind(this, curRoomObj.house_img, [curRoomObj.house_img])}/>
              <View className="tips">
                <View className="bg"></View>
                <View className="t">查看大图</View>
              </View>
            </View>
            <View className="sd-p">
              <View className="p2">{curRoomObj.house_type}</View>
              <View className="p2">{curRoomObj.building_num}</View>
              <View className="p2">房号:{curRoomObj.room}</View>
              <View className="p2">层高:{curRoomObj.floor_height}</View>
              <View className="p2">建筑面积:{curRoomObj.built}㎡</View>
              <View className="p2">套内面积:{curRoomObj.space}㎡</View>
              <View className="p2">公摊面积:{curRoomObj.sharing}㎡</View>
              <View className="p2">得房率:{curRoomObj.house_rate}</View>
              <View className="p2">毛坯:{curRoomObj.blank}元/㎡</View>
              <View className="p2">装修:{curRoomObj.decoration}元/㎡</View>
              <View className="p2">单价:{curRoomObj.sale}元/㎡</View>
              <View className="p2">总价:{curRoomObj.price}元</View>
            </View>
            <View className="l-floor-footer t2">
              <View className="lff-flex">
                <View className="lff-btn t3" onClick={this.closeRulePopup.bind(this)}>关闭</View>
              </View>
            </View>
          </View>
        </View>
      </View>
    )
  }
  openDtlPopup (item) {
    this.setState({
      curRoomObj: item,
      isDtlShow: true
    })
  }
  closeRulePopup () {
    this.setState({
      isDtlShow: false
    })
  }

  renderShare () {
    const iconShare = require('@img/images/icon_g_share6.png')
    return (
      <Button className="g-icon-share btn-to-div" openType="share">
        <Image className="img" src={iconShare} />
      </Button>
    )
  }

  render () {
    return (
      <View className="l-box">
        {this.renderTop()}
        {this.renderInfo()}
        {this.renderDtl()}
        {this.renderShare()}
      </View>
    )
  }
}

export default Index
