import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import ListMore from '@/c/pageDataList/listMore'

import './photo.scss'

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

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

  config = {
    navigationBarTitleText: '楼盘相册',
  }

  componentWillMount () {
    this.getDtl()
  }

  getDtl () {
    const { curId } = this.state
    Taro.api.house.estatephotolist({estate_id: curId}).then(res => {
      const cArr = res.data ? JSON.parse(res.data) : []
      this.setState({
        curObj: cArr
      })
    })
  }

  componentDidShow () { }

  componentDidHide () { }

  renderHeader () {
    const { curObj, curIndex } = this.state
    const navItems = curObj.map((item, index) => {
      return (
        <View onClick={this.navHandle.bind(this, index, item.val)} className={curIndex === index ? 'sh-op cur' : 'sh-op'} key={index}>{item.key}</View>
      )
    })
    return (
      <View className="scoped-header">
        {navItems}
      </View>
    )
  }
  navHandle (index, val) {
    Taro.pageScrollTo({
      selector: `#${val}`
    })
    this.setState({
      curIndex: index
    })
  }

  renderInfo () {
    const { curObj } = this.state
    return (
      <View className="scoped-photo">
        {
          curObj.map((one, index) => {
            return (
              <View className="sp-item" key={index} id={one.val}>
                <View className="sp-title">{one.key}({one.urls.length})</View>
                <View className="sp-main">
                  {
                    one.urls.map((two, twoIndex) => {
                      return (
                        <View className="sp-op" key={twoIndex}>
                          <Image src={two + '_xs'} className="sp-img" onClick={this.previewImageHandle.bind(this, two, one.urls)} />
                        </View>
                      )
                    })
                  }
                </View>
              </View>
            )
          })
        }
      </View>
    )
  }
  previewImageHandle (cur, arr) {
    const current = `${cur}_plus`
    const urls = arr.map(item => {
      return `${item}_plus`
    })
    Taro.previewImage({
      current,
      urls
    })
  }

  render () {
    const { curObj  } = this.state
    return (
      <View className="l-box">
        {this.renderHeader()}
        {this.renderInfo()}
        {
          curObj.length === 0
          &&
          <ListMore isOther={true} text="相册在路上"/>
        }
      </View>
    )
  }
}

export default Index
