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

import './tpDtl.scss'

class Index extends Component {
  onShareAppMessage() {
    const { curId, curObj } = this.state
    return {
      title: `${curObj.no}的土拍详情`,
      path: `/pagesMore/news/tpDtl?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.news.apilanddetail({id: curId}).then(res => {
      this.setState({
        curObj: res || {}
      })
    })
  }

  componentDidShow () { }

  componentDidHide () { }

  renderHeader () {
    const { curObj } = this.state
    const imgUrl = `${curObj.pri_image}`
    return (
      <View className="dtl-header" onClick={this.previewImageHandle.bind(this, curObj.pri_image, [{img_url: curObj.pri_image}])}>
        <Image className="dh-img" src={imgUrl + '_white'}  mode="aspectFit"/>
      </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
    return (
      <View className="tp-dtl">
        <View className="td-title">
          <View className="t">土拍详细信息</View>
        </View>
        <View className="td-item">
          {this.renderQrcode()}
          <View className="td-p">
            <View className="k">地块编号</View>
            <View className="v">{curObj.no}</View>
          </View>
          <View className="td-p">
            <View className="k">所属区域</View>
            <View className="v">{arrToObj(dictData.area_type)[curObj.area_type]}</View>
          </View>
          <View className="td-p">
            <View className="k">毛坯限价</View>
            <View className="v">{curObj.built_area || '-'}元/㎡</View>
          </View>
          <View className="td-p">
            <View className="k">竞得单位</View>
            <View className="v">{curObj.company}</View>
          </View>
        </View>
        <View className="td-item">
          <View className="td-p">
            <View className="k">成交日期</View>
            <View className="v">{curObj.deal_time}</View>
          </View>
          <View className="td-p">
            <View className="k">成交价</View>
            <View className="v">{curObj.final_price || '-'}万元/亩</View>
          </View>
          <View className="td-p">
            <View className="k">起拍价</View>
            <View className="v">{curObj.start_total_price || '-'}万元/亩</View>
          </View>
          <View className="td-p">
            <View className="k">成交楼面价</View>
            <View className="v">{curObj.floor_price || '-'}元</View>
          </View>
          <View className="td-p">
            <View className="k">起拍楼面价</View>
            <View className="v">{curObj.start_unit_price || '-'}元</View>
          </View>
          <View className="td-p">
            <View className="k">溢价率</View>
            <View className="v">{curObj.premium_rate || '-'}%</View>
          </View>
        </View>
        <View className="td-item">
          <View className="td-p">
            <View className="k">出让面积</View>
            <View className="v">{curObj.sell_area || '-'}亩</View>
          </View>
          <View className="td-p">
            <View className="k">用途</View>
            <View className="v">{curObj.purpose || '-'}</View>
          </View>
          <View className="td-p">
            <View className="k">出让年限</View>
            <View className="v">{curObj.sell_ownership || '-'}年</View>
          </View>
          <View className="td-p">
            <View className="k">容积率</View>
            <View className="v">{curObj.plot_ratio || '-'}</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
    })
  }

  linkHome () {
    Taro.reLaunch({
      url: '/pages/index/index'
    })
  }

  render () {
    const homeBanner = require('@img/images/home_banner.png')
    return (
      <View className="l-box">
        {this.renderHeader()}
        {this.renderOptionsInfo()}
        <Image src={homeBanner} className="qr-footer" onClick={this.linkHome.bind(this)}></Image>
      </View>
    )
  }
}

export default Index
