import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { arrToObj } from '@utils'
import Comment from './components/indexDtl/comment'
import House from './components/indexDtl/house'
import HouseGh from './components/indexDtl/houseGh'
import Range from './components/indexDtl/range'
import './indexDtl.scss'

class Index extends Component {
  onShareAppMessage() {
    const { curId, curObj } = this.state
    return {
      title: `来看看${curObj.school_name}周边的房子有哪些？`,
      path: `/pagesSchool/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.admschooldetail({id: curId}).then(res => {
      this.subComment.getData(res || {})
      if (res.estate_list && res.estate_list.duikou && res.estate_list.duikou.length >0 && this.subHouse) this.subHouse.getData(res.estate_list.duikou)
      if (res.estate_list && res.estate_list.guihua && res.estate_list.guihua.length >0 && this.subGhHouse) this.subGhHouse.getData(res.estate_list.guihua)
      this.subRange.getData(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}_white`
    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 className={'st t' + curObj.school_warn}>{arrToObj(dictData.school_warn)[curObj.school_warn]}</View>
          </View>
        </View>
        <Image className="dh-bg" src={imgUrl} mode="aspectFit" />
      </View>
    )
  }

  renderRange () {
    return (
      <View className="dtl-options scoped-school">
        <View className="do-title">
          <View className="t">学区范围</View>
        </View>
        <Range onRef={this.refRange} />
      </View>
    )
  }
  refRange = (ref) => {
    this.subRange = ref
  }

  renderRemarked () {
    const { curObj } = this.state
    return (
      <View className="dtl-options scoped-school">
        <View className="do-title">
          <View className="t">学校简评</View>
        </View>
        <View className="do-content">
          <View className="scoped-desc">{curObj.remarked}</View>
        </View>
      </View>
    )
  }

  renderAchievement () {
    const { curObj } = this.state
    return (
      <View className="dtl-options scoped-school">
        <View className="do-title">
          <View className="t">历年成绩</View>
        </View>
        <View className="do-content">
          <View className="scoped-desc">{curObj.achievement}</View>
        </View>
      </View>
    )
  }

  renderOptionsHouse () {
    const { curId, curObj } = this.state
    const estateList = curObj.estate_list || {}
    return (
      <View className="dtl-options scoped-school">
        <View className="do-title">
          <View className="t">对口楼盘</View>
          <View className="r2">注:目前该楼盘在此学区中</View>
          {
            estateList.duikou && estateList.duikou.length > 0
            &&
            <Navigator url={'/pagesSchool/houseList?id=' + curId + '&name=' + curObj.school_name} className="r">对口所有楼盘{'>'}</Navigator>
          }
        </View>
        <House onRef={this.refHouse} />
      </View>
    )
  }
  refHouse = (ref) => {
    this.subHouse = ref
  }

  renderOptionsGhHouse () {
    const { curId, curObj } = this.state
    const estateList = curObj.estate_list || {}
    return (
      <View className="dtl-options scoped-school">
        <View className="do-title">
          <View className="t">可能就读</View>
          <View className="r2">注:未来该楼盘有可能划入该学校</View>
          {
            estateList.guihua && estateList.guihua.length > 0
            &&
            <Navigator url={'/pagesSchool/houseList?id=' + curId + '&name=' + curObj.school_name} className="r">规划就读所有楼盘{'>'}</Navigator>
          }
        </View>
        <HouseGh onRef={this.refGhHouse} />
      </View>
    )
  }
  refGhHouse = (ref) => {
    this.subGhHouse = ref
  }


  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>
    )
  }

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



  renderComment () {
    const { curObj } = this.state
    return (
      <View className="dtl-options">
        <View className="do-title">
          <View className="t">大家怎么看</View>
          <Navigator url={'/pagesMore/comment/list?id=' + curObj.id + '&name=' + curObj.school_name + '&type=school'} className="r">查看更多{' >'}</Navigator>
        </View>
        <Comment onRef={this.refComment} getDtl={this.getDtl.bind(this)} />
      </View>
    )
  }
  refComment = (ref) => {
    this.subComment = ref
  }


  render () {
    const { curId, curObj } = this.state
    return (
      <View className="l-box">
        {this.renderHeader()}
        {this.renderRange()}
        <View className="scoped-bg">
          {
            curObj.remarked
            &&
            this.renderRemarked()
          }
          {
            curObj.achievement
            &&
            this.renderAchievement()
          }
          {this.renderOptionsHouse()}
          {this.renderOptionsGhHouse()}
          {this.renderComment()}
        </View>
        {this.renderGoHome()}
      </View>
    )
  }
}

export default Index