import Taro, { Component } from '@tarojs/taro'
import { View, Map } from '@tarojs/components'
import { arrToObj } from '@utils'

import './indexDtlMore.scss'

class Index extends Component {
  onShareAppMessage() {
    const { curId, curObj } = this.state
    return {
      title: `${curObj.estate_name}-楼盘详情`,
      path: `/pagesHouse/indexDtl?id=${curId}`,
    }
  }
  onShareTimeline () {
    return {
      title: '让买房，更省心！',
    }
  }

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

  config = {
    navigationBarTitleText: '楼盘详情',
  }

  componentWillMount () {
    this.getDtl()
  }

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

  componentDidShow () { }

  componentDidHide () { }

  renderHeader () {
    const iconHouse = require('@img/images/i_house.png')
    const iconPos = require('@img/images/i_pos.png')
    const dictData = Taro.getStorageSync('dictData')
    const { curObj } = this.state
    const imgUrl = `${curObj.pri_image + '_white'}`
    let tagArr = []
      const metro_line = curObj.metro_line || ''
      metro_line.split(',').forEach(v => {
        if (!v) return
        tagArr.push({
          key: arrToObj(dictData.metro_line)[v],
          sign: 'metro_line'
        })
      })
      const metro_type = curObj.metro_type || ''
      metro_type.split(',').forEach(v => {
        if (!v) return
        tagArr.push({
          key: arrToObj(dictData.metro_type)[v],
          sign: 'metro_type'
        })
      })
      const park_type = curObj.park_type || ''
      park_type.split(',').forEach(v => {
        if (!v) return
        tagArr.push({
          key: arrToObj(dictData.park_type)[v],
          sign: 'park_type'
        })
      })
      const high_street = curObj.high_street || ''
      high_street.split(',').forEach(v => {
        if (!v) return
        tagArr.push({
          key: arrToObj(dictData.high_street)[v],
          sign: 'high_street'
        })
      })
      const hospital_type = curObj.hospital_type || ''
      hospital_type.split(',').forEach(v => {
        if (!v) return
        tagArr.push({
          key: arrToObj(dictData.hospital_type)[v],
          sign: 'hospital_type'
        })
      })
      // tagArr = tagArr.splice(0, 3)
      const tagViews = tagArr.map((tag, tagIndex) => {
        let curClassName = 's'
        if (tag.sign === 'high_street') curClassName = 's t-shop'
        if (tag.sign === 'park_type') curClassName = 's t-park'
        return (
          <View className={curClassName} key={tagIndex}>{tag.key}</View>
        )
      })
    return (
      <View className="dtl-header" onClick={this.previewImageHandle.bind(this, [{img_url: curObj.pri_image}])}>
        <View className="dh-content">
          <View className="dh-p1">
            <Image className="i" src={iconHouse} />
            <View className="t">{curObj.estate_name}</View>
          </View>
          <View className="dh-p2">
            <Image className="i" src={iconPos} />
            <View className="t">{curObj.address}</View>
          </View>
          <View className="dh-sign">
            {tagViews}
          </View>
        </View>
        <Image className="dh-bg" src={imgUrl} />
      </View>
    )
  }
  renderOptionsSchool () {
    return (
      <View className="dtl-options scoped-school">
        <View className="do-title">
          <View className="t">周边学校</View>
        </View>
        {this.renderSchool()}
      </View>
    )
  }
  renderSchool () {
    const { curObj } = this.state
    const dictData = Taro.getStorageSync('dictData')
    const arr = curObj.school_list || []
    const curItems = arr.map((item, index) => {
      return (
        <Navigator url={'/pagesSchool/indexDtl?id=' + item.id} className="lb-item" key={index}>
          <View className="lb-img">
            <Image className="img" src={item.pri_image + '_xs'} />
          </View>
          <View className="lb-info">
            <View className="lb-p1">{item.school_name}</View>
            <View className="lb-p2">{item.address}</View>
            <View className="lb-tag">
              <View className="t t1">{arrToObj(dictData.school_attrib)[item.school_attrib]}</View>
              <View className="t t4">{arrToObj(dictData.school_type)[item.school_type]}</View>
            </View>
          </View>
        </Navigator>
      )
    })
    return (
      <View className="l-list-box t2">
        {curItems}
      </View>
    )
  }

  renderQrcode () {
    const qrcodeImg = 'http://icon.honglounews.com/miniqrcode.jpg'
    return (
      <Image src={qrcodeImg} className="g-img-qrcode"  onClick={this.previewQrcodeImageHandle.bind(this, qrcodeImg, [qrcodeImg])} />
    )
  }
  previewQrcodeImageHandle (current, urls) {
    Taro.previewImage({
      current,
      urls
    })
  }

  renderOptionsInfo () {
    const dictData = Taro.getStorageSync('dictData')
    const { curObj } = this.state
    const product_type = curObj.product_type || ''
    const productTypeArr = product_type.split(',').map(v => {
      return arrToObj(dictData.product_type)[v]
    })
    return (
      <View className="dtl-options">
        {this.renderQrcode()}
        <View className="do-title">
          <View className="t">楼盘详细信息</View>
        </View>
        <View className="do-content">
          <View className="do-p">
            <View className="k">所属区域</View>
            <View className="v">{arrToObj(dictData.area_type)[curObj.area_type]}</View>
          </View>
          <View className="do-p">
            <View className="k">参考价格</View>
            <View className="v">{curObj.price_range}/㎡</View>
          </View>
          <View className="do-p">
            <View className="k">户型面积</View>
            <View className="v">{curObj.built_area}㎡</View>
          </View>
          <View className="do-p">
            <View className="k">楼栋数</View>
            <View className="v">{curObj.seat_sum}栋</View>
          </View>
          <View className="do-p">
            <View className="k">产权年限</View>
            <View className="v">{curObj.ownership || '未知'}</View>
          </View>
          <View className="do-p">
            <View className="k">初次交付</View>
            <View className="v">{curObj.deliver_time || '未知'}</View>
          </View>
          <View className="do-p">
            <View className="k">建设时间</View>
            <View className="v">{curObj.build_time || '未知'}</View>
          </View>
          <View className="do-p">
            <View className="k">竣工时间</View>
            <View className="v">{curObj.complete_time || '未知'}</View>
          </View>
          <View className="do-p">
            <View className="k">占地面积</View>
            <View className="v">{curObj.acreage}㎡</View>
          </View>
          <View className="do-p">
            <View className="k">建筑面积</View>
            <View className="v">{curObj.built_up_area}㎡</View>
          </View>
          <View className="do-p">
            <View className="k">开发商</View>
            <View className="v">{curObj.developer}</View>
          </View>
          <View className="do-p">
            <View className="k">物业公司</View>
            <View className="v">{curObj.property_type || '未知'}</View>
          </View>
          <View className="do-p">
            <View className="k">物业费</View>
            <View className="v">{curObj.property_fee || '未知'}</View>
          </View>
          <View className="do-p">
            <View className="k">总户数</View>
            <View className="v">{curObj.household || '未知'}</View>
          </View>
          <View className="do-p">
            <View className="k">车位数</View>
            <View className="v">{curObj.parking || '未知'}</View>
          </View>
          <View className="do-p">
            <View className="k">容积率</View>
            <View className="v">{curObj.plot_ratio}</View>
          </View>
          <View className="do-p">
            <View className="k">绿化率</View>
            <View className="v">{curObj.green_rate || '未知'}%</View>
          </View>
          <View className="do-p">
            <View className="k">楼盘简介</View>
            <View className="v">{curObj.remarked || '暂无'}</View>
          </View>
          <View className="do-p">
            <View className="k">产品类型</View>
            <View className="v">
              {/* {productTypeArr.length > 0 ? `${productTypeArr.join('/')}` : ''} */}
              <View className="scoped-house-type">
                {
                  (curObj.area_data || []).map(one =>{
                    return (
                      <View key={one} className="sht-one">
                        <View className="sht-one-title">{arrToObj(dictData.product_type)[one.product_type_val]}</View>
                        {
                          one.house_type_list.map(two => {
                            return (
                              <View className="sht-two" key={two}>
                                <View className="sht-two-title">{arrToObj(dictData.house_type)[two.house_type_val]}</View>
                                {
                                  two.area_list.map(three => {
                                    return (
                                      <View className="sht-area" key={three}>
                                        <Image className="img" src={three.img_url + '_xs'} onClick={this.previewImageHandle.bind(this, three.img_url, two.area_list)} />
                                        <View className="t">建面:{three.area}㎡</View>
                                      </View>
                                    )
                                  })
                                }
                              </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 () {
    return (
      <View className="l-box">
        {this.renderHeader()}
        {this.renderOptionsInfo()}
      </View>
    )
  }
}

export default Index
