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

class Index extends Component {
  onShareAppMessage() {
    const { curId, curObj } = this.state
    return {
      title: `来看看${curObj.school_name}周边的房子有哪些？`,
      path: `/pagesMore/school/indexDtl?id=${curId}`,
    }
  }
  onShareTimeline () {
    return {
      title: '南昌买房，看洪楼Plus',
    }
  }

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

  config = {
    navigationBarTitleText: '学校详情',
  }

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

  componentDidShow () { }

  componentDidHide () { }

  renderHeader () {
    const { curObj } = this.state
    const iconHouse = require('@img/images/i_house.png')
    const iconPos = require('@img/images/i_pos.png')
    const imgUrl = `${curObj.pri_image}`
    const dictData = Taro.getStorageSync('dictData')
    return (
      <View className="dtl-header">
        <View className="dh-content">
          <View className="dh-p1">
            <Image className="i" src={iconHouse} />
            <View className="t">{curObj.school_name}</View>
          </View>
          <View className="dh-p2">
            <Image className="i" src={iconPos} />
            <View className="t">{curObj.address}</View>
          </View>
          <View className="dh-sign">
            <View className="s">{arrToObj(dictData.school_attrib)[curObj.school_attrib]}</View>
            <View className="s t4">{arrToObj(dictData.school_type)[curObj.school_type]}</View>
          </View>
        </View>
        <Image className="dh-bg" src={imgUrl} />
      </View>
    )
  }
  renderOptionsHouse () {
    const { curId, curObj } = this.state
    return (
      <View className="dtl-options scoped-school">
        <View className="do-title">
          <View className="t">周边楼盘</View>
          <Navigator url={'/pagesMore/school/houseList?id=' + curId + '&name=' + curObj.school_name} className="r">周边所有楼盘{'>'}</Navigator>
        </View>
        {this.renderHouse()}
      </View>
    )
  }
  renderHouse () {
    const { curObj } = this.state
    const dictData = Taro.getStorageSync('dictData')
    let arr = curObj.estate_list || []
    // arr = arr.splice(0, 5)
    const curItems = arr.map((item, index) => {
      const imgUrl = `${item.pri_image}_xs`
      const curProductType = (item.product_type || '').split(',')
      return (
        <Navigator url={'/pagesHouse/indexDtl?id=' + item.id} className="lb-item" key={index}>
          <View className="lb-img">
            <Image className="img" src={imgUrl} />
          </View>
          <View className="lb-info">
            <View className="lb-p1">{item.estate_name}</View>
            <View className="lb-p2">{item.address}</View>
            <View className="lb-tag">
              {
                curProductType.map((pt, pIndex) => {
                  return (
                    <View className="t" key={pIndex}>{arrToObj(dictData.product_type)[pt]}</View>
                  )
                })
              }
            </View>
          </View>
        </Navigator>
      )
    })
    return (
      <View className="l-list-box">
        {curItems}
      </View>
    )
  }

  renderOptionsInfo () {
    const { curObj } = this.state
    return (
      <View className="dtl-options">
        <View className="do-title">
          <View className="t">学校信息</View>
        </View>
        <View className="do-content">
          <View className="do-p">
            <View className="k">建设时间</View>
            <View className="v">2018年</View>
          </View>
          <View className="do-p">
            <View className="k">竣工时间</View>
            <View className="v">2021年5月</View>
          </View>
          <View className="do-p">
            <View className="k">占地面积</View>
            <View className="v">16800</View>
          </View>
          <View className="do-p">
            <View className="k">建筑面积</View>
            <View className="v">68000</View>
          </View>
        </View>
      </View>
    )
  }

  renderOptionsNews () {
    const testImg = require('@img/ex_test.jpg')
    const arr = [{id: 1}, {id: 2}]
    const curItems = arr.map((item, index) => {
      return (
        <Navigator url={'/pages/xxx/xxx'} className="lb-item" key={index}>
          <View className="lb-img">
            <Image className="img" src={testImg} />
          </View>
          <View className="lb-info">
            <View className="lb-p1">九龙湖之夜！2021年，九龙湖住宅的亮灯多不多？</View>
          </View>
        </Navigator>
      )
    })
    return (
      <View className="dtl-options">
        <View className="do-title">
          <View className="t">洪楼测评</View>
        </View>
        <View className="l-list-box">
          {curItems}
        </View>
      </View>
    )
  }

  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 () {
    return (
      <View className="l-box">
        {this.renderHeader()}
        {this.renderOptionsHouse()}
        {/* {this.renderOptionsInfo()} */}
        {/* {this.renderOptionsNews()} */}
        {this.renderGoHome()}
      </View>
    )
  }
}

export default Index
