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

import './pkDtl.scss'

class Index extends Component {
  onShareAppMessage() {
    const { pkArr } = this.state
    let idArr = []
    const nameArr = pkArr.map(item => {
      idArr.push(item.id)
      return item.estate_name
    })
    return {
      title: `${nameArr.join('vs')}-楼盘对比`,
      path: `/pagesHouse/pkDtl?id=${idArr.join(',')}`,
    }
  }
  onShareTimeline () {
    return {
      title: '让买房，更省心！',
    }
  }

  constructor (props) {
    super(props)
    this.state = {
      pkArr: [],
    }
  }

  config = {
    navigationBarTitleText: '楼盘PK',
  }

  componentWillMount () {
    const {id} = this.$router.params
    if (id) {
      const idArr = id.split(',') || []
      let tempArr = []
      idArr.forEach(cId => {
        tempArr.push(
          new Promise((resolve, reject) => {
            Taro.api.house.admestatesimple({id: cId}).then(res => {
              return resolve(res)
            }).catch(err => {
              return reject(err)
            })
          })
        )
      })
      Promise.all(tempArr).then(res => {
        if (res && res.length > 0 && !Taro.getStorageSync('APP_pkList')) Taro.setStorageSync('APP_pkList', res)
        this.setState({
          pkArr: res || []
        })
      })
    } else {
      this.getDtl()
    }
  }

  renderTop () {
    const bg = require('./img/pk/bg.jpg')
    const { pkArr } = this.state
    return (
      <View className="pk-header">
        <View className="scoped-bg" onClick={this.previewQrcodeImageHandle.bind(this)}>
          <Image src={bg} className="bg" />
        </View>
        <View className="ph-main">  
          {
            pkArr.map((item, index) => {
              return (
                <View className="ph-item" key={index}>
                  <View className="ph-name">
                    <View className="t">{item.estate_name}</View>
                  </View>
                  <View className="ph-content">
                    <Image src={item.pri_image} className="ph-img" />
                  </View>
                </View>
              )
            })
          }
        </View>
      </View>
    )
  }

  getDtl = (data) => {
    const { i } = this.$router.params
    const iArr = i.split(',')
    const pkList = data || Taro.getStorageSync('APP_pkList') || []
    let pkArr = iArr.map(i => {
      return pkList[i]
    })
    this.setState({
      pkArr
    })
  }

  componentDidShow () { }

  componentDidHide () { }

  previewImageHandle (cur, arr) {
    const current = `${cur}_plus`
    const urls = arr.map(item => {
      return `${item.img_url}_plus`
    })
    Taro.previewImage({
      current,
      urls
    })
  }
  
  previewQrcodeImageHandle (current, urls) {
    Taro.previewImage({
      current: 'http://icon.honglounews.com/miniqrcode.jpg',
      urls: ['http://icon.honglounews.com/miniqrcode.jpg']
    })
  }

  linkHome () {
    Taro.reLaunch({
      url: '/pages/index/index'
    })
  }
  renderGoHome () {
    const icon = require('@img/images/icon_go_home.png')
    return (
      <Image className="g-go-home" src={icon} onClick={this.linkHome.bind(this)}/>
    )
  }


  render () {
    const dictData = Taro.getStorageSync('dictData')
    const saObj = arrToObj(dictData.school_attrib)
    const mlObj = arrToObj(dictData.metro_line)
    const mtObj = arrToObj(dictData.metro_type)
    const { pkArr } = this.state
    const pk0Obj = pkArr[0] || {}
    const pk1Obj = pkArr[1] || {}
    let metroLineStr0 = ''
    if (pk0Obj.metro_line) {
      const ml0Arr = pk0Obj.metro_line.split(',')
      const ml0Str = ml0Arr.map(v => {
        return mlObj[v]
      })
      metroLineStr0 = ml0Str.join(',')
    }

    let metroLineStr1 = ''
    if (pk1Obj.metro_line) {
      const ml1Arr = pk1Obj.metro_line.split(',')
      const ml1Str = ml1Arr.map(v => {
        return mlObj[v]
      })
      metroLineStr1 = ml1Str.join(',')
    }

    let metroTypeStr0 = ''
    if (pk0Obj.metro_type) {
      const mt0Arr = pk0Obj.metro_type.split(',')
      const mt0Str = mt0Arr.map(v => {
        return mtObj[v]
      })
      metroTypeStr0 = mt0Str.join(',')
    }

    let metroTypeStr1 = ''
    if (pk1Obj.metro_type) {
      const mt1Arr = pk1Obj.metro_type.split(',')
      const mt1Str = mt1Arr.map(v => {
        return mtObj[v]
      })
      metroTypeStr1 = mt1Str.join(',')
    } 
    
    let pk0SchoolStr = ''
    const school0list = pk0Obj.school_list || {duikou: [], guihua: []}
    const sl0Arr = [...school0list.duikou, ...school0list.guihua]
    if (sl0Arr && sl0Arr.length > 0) {
      const schoolStr0 = sl0Arr.map(item => {
        return `(${saObj[item.school_attrib]})${item.school_name}`
      })
      pk0SchoolStr = schoolStr0.join(';')
    }
    let pk1SchoolStr = ''
    const school1list = pk1Obj.school_list || {duikou: [], guihua: []}
    const slArr = [...school1list.duikou, ...school1list.guihua]
    if (slArr && slArr.length > 0) {
      const schoolStr1 = slArr.map(item => {
        return `(${saObj[item.school_attrib]})${item.school_name}`
      })
      pk1SchoolStr = schoolStr1.join(';')
    }
    const product_type0 = pk0Obj.product_type || ''
    const productTypeArr0 = product_type0.split(',').map(v => {
      return arrToObj(dictData.product_type)[v]
    })
    const product_type1 = pk1Obj.product_type || ''
    const productTypeArr1 = product_type1.split(',').map(v => {
      return arrToObj(dictData.product_type)[v]
    })
    const iconShare = require('./img/pk/i2.png')
    return (
      <View className="l-box">
        {this.renderTop()}
        <View className="pk-ops">
          <View className="po-item">
          <View className="po-p1">基本信息</View>
          </View>
          <View className="po-item">
            <View className="po-v tar">{arrToObj(dictData.estate_tag)[pk0Obj.estate_tag]}</View>
            <View className="po-label">楼盘状态</View>
            <View className="po-v">{arrToObj(dictData.estate_tag)[pk1Obj.estate_tag]}</View>
          </View>
          <View className="po-item">
            <View className="po-v tar">{pk0Obj.price_range}/㎡</View>
            <View className="po-label">参考价格</View>
            <View className="po-v">{pk1Obj.price_range}/㎡</View>
          </View>
          <View className="po-item">
            <View className="po-v tar">{arrToObj(dictData.area_type)[pk0Obj.area_type]}</View>
            <View className="po-label">所属区域</View>
            <View className="po-v">{arrToObj(dictData.area_type)[pk1Obj.area_type]}</View>
          </View>
          <View className="po-item">
            <View className="po-v tar">{productTypeArr0.length > 0 ? `${productTypeArr0.join('/')}` : ''}</View>
            <View className="po-label">产品类型</View>
            <View className="po-v">{productTypeArr1.length > 0 ? `${productTypeArr1.join('/')}` : ''}</View>
          </View>
          <View className="po-item">
            <View className="po-v tar">{pk0Obj.built_area}㎡</View>
            <View className="po-label">面积户型</View>
            <View className="po-v">{pk1Obj.built_area}㎡</View>
          </View>
          {/* <View className="po-item">
            <View className="po-v tar">{pk0Obj.stairs_rate}</View>
            <View className="po-label">梯户比</View>
            <View className="po-v">{pk1Obj.stairs_rate}</View>
          </View> */}
          <View className="po-item">
            <View className="po-v tar">{pk0Obj.household}</View>
            <View className="po-label">总户数</View>
            <View className="po-v">{pk1Obj.household}</View>
          </View>
          <View className="po-item">
            <View className="po-v tar">{pk0Obj.parking}</View>
            <View className="po-label">车位数</View>
            <View className="po-v">{pk1Obj.parking}</View>
          </View>
          <View className="po-item">
            <View className="po-v tar">{pk0Obj.green_rate}%</View>
            <View className="po-label">绿化率</View>
            <View className="po-v">{pk1Obj.green_rate}%</View>
          </View>
          <View className="po-item">
            <View className="po-v tar">{pk0Obj.plot_ratio}</View>
            <View className="po-label">容积率</View>
            <View className="po-v">{pk1Obj.plot_ratio}</View>
          </View>
          <View className="po-item">
            <View className="po-v tar">{pk0Obj.deliver_time}</View>
            <View className="po-label">初次交付</View>
            <View className="po-v">{pk1Obj.deliver_time}</View>
          </View>
        </View>
        <View className="pk-ops t2">
          <View className="po-item">
          <View className="po-p1">物业配套</View>
          </View>
          <View className="po-item">
            <View className="po-v tar">{pk0Obj.property_fee || '0'}元</View>
            <View className="po-label">物业费</View>
            <View className="po-v">{pk1Obj.property_fee || '0'}元</View>
          </View>
          <View className="po-item">
            <View className="po-v tar">{pk0Obj.property_type}</View>
            <View className="po-label">物业公司</View>
            <View className="po-v">{pk1Obj.property_type}</View>
          </View>
          <View className="po-item">
            <View className="po-v tar">{pk0SchoolStr}</View>
            <View className="po-label">对口学校</View>
            <View className="po-v">{pk1SchoolStr}</View>
          </View>
          <View className="po-item">
            <View className="po-v tar">{metroLineStr0}</View>
            <View className="po-label">地铁线</View>
            <View className="po-v">{metroLineStr1}</View>
          </View>
          <View className="po-item">
            <View className="po-v tar">{metroTypeStr0}</View>
            <View className="po-label">地铁站</View>
            <View className="po-v">{metroTypeStr1}</View>
          </View>
          <View className="po-item">
            <Navigator url={'/pagesHouse/indexDtl?id=' + pk0Obj.id} className="po-v tar link">
              <View className="b">查看更多</View>
            </Navigator>
            <View className="po-label">更多</View>
            <Navigator url={'/pagesHouse/indexDtl?id=' + pk1Obj.id} className="po-v link">
              <View className="b">查看更多</View>
            </Navigator>
          </View>
        </View>
        <Button className="pk-share btn-to-div" openType="share">
          <Image src={iconShare} className="img" />
        </Button>
        {this.renderGoHome()}
      </View>
    )
  }
}

export default Index