import Taro, { Component } from '@tarojs/taro'
import { View, Map } from '@tarojs/components'
import { arrToObj } from '@utils'
import ListMore from '@/c/pageDataList/listMore'
import './produceType.scss'

class Index extends Component {
  onShareAppMessage() {
    const { curId, curObj } = this.state
    return {
      title: `来看看${curObj.estate_name}的全部户型图`,
      path: `/pagesHouse/produceType?id=${curId}&name=${curObj.estate_name}`,
    }
  }
  onShareTimeline () {
    return {
      title: '让买房，更省心！',
    }
  }

  constructor (props) {
    super(props)
    const {id: curId} = this.$router.params
    this.state = {
      curId,
      curObj: {},
    }
  }

  config = {
    navigationBarTitleText: '户型图',
  }

  componentWillMount () {
    const { name } = this.$router.params
    Taro.setNavigationBarTitle({
      title: name + '-户型图' || '户型图'
    })
    this.getDtl()
  }

  getDtl = () => {
    const { curId } = this.state
    Taro.api.house.admestatedetail({id: curId}).then(res => {
      this.setState({
        curObj: res || {}
      })
    })
  }

  componentDidShow () { }

  componentDidHide () { }

  renderTop () {
    const { name } = this.$router.params
    const bg = require('@img/images/bg_house.jpg')
    return (
      <View className="scoped-bg-top">
        <View className="sbt-wrap" onClick={this.urlDtlLink.bind(this)}>
          <View className="t">{name}</View>
          <Image src={bg} className="bg"></Image>
        </View>
      </View>
    )
  }
  urlDtlLink () {
    const { id } = this.$router.params
    Taro.navigateTo({url: '/pagesHouse/indexDtl?id=' + id})
  }

  renderInfo () {
    const dictData = Taro.getStorageSync('dictData')
    const hxIcon = require('@img/icon_hx.png')
    const { curObj } = this.state
    const ptObj = arrToObj(dictData.product_type)
    const htObj = arrToObj(dictData.house_type)
    return (
      <View className="scoped-house-type">
        {
          (curObj.area_data || []).map(one =>{
            return (
              <View key={one} className="sht-one">
                <View className="sht-one-title">
                  <Image className="img" src={hxIcon} />
                  <View className="t">{ptObj[one.product_type_val]}</View>
                </View>
                <View className="sht-one-desc">
                  <View className="op">
                    参考价格{ } | { } ￥{Number(one.average_price) === 1 ? '待定' : one.average_price}/㎡
                  </View>
                  <View className="op">
                    梯户比{ } | { } {one.stairs_rate || '未知'}
                  </View>
                </View>
                {
                  one.house_type_list.map(two => {
                    return (
                      <View className="sht-two" key={two}>
                        <View className="sht-two-title"></View>
                        {
                          two.area_list.map(three => {
                            return (
                              <View className="sht-area" key={three}>
                                <View className="sa-left" onClick={this.previewImageHandle.bind(this, three.img_url, two.area_list)} >
                                  <Image className="img" src={three.img_url + '_xs'}/>
                                  <View className="tips">
                                    <View className="bg"></View>
                                    <View className="t">查看大图</View>
                                  </View>
                                </View>
                                <View className="sa-right">
                                  <View className="op">
                                    <View className="k">户型</View>
                                    <View className="v t2">{htObj[two.house_type_val]}</View>
                                  </View>
                                  <View className="op">
                                    <View className="k">建面</View>
                                    <View className="v">{three.area}㎡</View>
                                  </View>
                                </View>
                              </View>
                            )
                          })
                        }
                      </View>
                    )
                  })
                }
              </View>
            )
          })
        }
      </View>
    )
  }
  previewImageHandle (cur, arr) {
    const current = `${cur}_plus`
    const urls = arr.map(item => {
      return `${item.img_url}_plus`
    })
    Taro.previewImage({
      current,
      urls
    })
  }

  render () {
    const { curObj } = this.state
    let areaData = curObj.area_data || []
    return (
      <View className="l-box">
        {this.renderTop()}
        {this.renderInfo()}
        {
          areaData.length === 0
          &&
          <ListMore isOther={true} />
        }
      </View>
    )
  }
}

export default Index
