import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'

import ListMore from '@/c/pageDataList/listMore'
import './list.scss'

class Index extends Component {
  onShareAppMessage() {
    const { id, name } = this.$router.params
    return {
      title: `${name}的楼盘评论`,
      path: `/pagesMore/comment/list?id=${id}&name=${name}`,
    }
  }
  onShareTimeline () {
    return {
      title: '让买房，更省心！',
    }
  }

  constructor (props) {
    super(props)
    this.state = {
      page_size: 10,
      page: 1,
      isListEnd: false,
      isListLoading: false,
      isListEmpty: false,
      dataList: [],
    }
  }

  config = {
    navigationBarTitleText: '楼盘评论',
  }

  componentWillMount () {
    const { name } = this.$router.params
    Taro.setNavigationBarTitle({
      title: name || '楼盘评论'
    })
    this.getDtl()
  }

  componentDidShow () { }

  componentDidHide () { }


  renderTop () {
    const { name } = this.$router.params
    const bg = require('@img/images/bg_house.jpg')
    return (
      <View className="scoped-bg-top">
        <View className="sbt-wrap" onClick={this.urlDtlLink.bind(this)}>
          <View className="t">{name}</View>
          <Image src={bg} className="bg"></Image>
        </View>
      </View>
    )
  }
  urlDtlLink () {
    const { id } = this.$router.params
    Taro.navigateTo({url: '/pagesHouse/indexDtl?id=' + id})
  }

  getDtl () {
    let { page_size, page, dataList, isListEmpty } = this.state
    const { id, type } = this.$router.params
    let apiStr = 'estatecommentlist'
    let params = {
      page,
      page_size,
      estate_id: id,
    }
    if (type === 'school') {
      apiStr = 'schoolcommentlist'
      params = {
        page,
        page_size,
        school_id: id,
      }
    }
    Taro.api.house[apiStr](params).then(res => {
      const curData = res.list || []
      let isListEnd = false
      if (curData.length > 0) {
        if (page === 1) {
          dataList = curData
        } else {
          dataList = dataList.concat(curData)
        }
        if (curData.length === page_size && res.total !== curData.length) {
          isListEnd = false
        } else {
          isListEnd = true
        }
      }
      if (curData.length === 0 && page === 1) {
        isListEmpty = true
        dataList = []
      } else {
        isListEmpty = false
      }
      this.setState({
        dataList,
        isListEnd,
        isListEmpty,
        isListLoading: false
      })
    })
  }
  onScrollToLower (e) {
    let { isListEnd, isListLoading, page } = this.state
    if (!isListEnd && !isListLoading) {
      page++
      this.setState({
        page,
        isListLoading: true
      }, () => {
        this.getDtl()
      })
    }
  }

  dtlLink (item) {
    const { id, type } = this.$router.params
    if (type === 'school') {
      Taro.navigateTo({
        url: `/pagesMore/comment/dtl?id=${item.id}&schoolId=${id}`
      })
    } else {
      Taro.navigateTo({
        url: `/pagesMore/comment/dtl?id=${item.id}&estateId=${id}`
      })
    }
  }

  renderList () {
    const { dataList, isListEnd, isListLoading, isListEmpty } = this.state
    const zan1Icon = require('@img/i_g_zan.png')
    const zan2Icon = require('@img/i_g_zan2.png')
    const curItems = dataList.map((item, index) => {
      const oldList = JSON.parse(JSON.stringify(item.child))
      let subList = item.isMoreAllShow ? [...oldList] : oldList.splice(0, 2)
      return (
        <View className="lcb-item" key={index}>
          <View className="lb-img">
            <Image className="img" src={item.avatar} />
          </View>
          <View className="lb-info">
            <View onClick={this.dtlLink.bind(this, item)}>
              <View className="lb-p1">{item.nickname}</View>
              <View className="lb-p2">{item.comm_cont}</View>
              <View className="lb-time">{item.create_at}</View>
            </View>
            <View className="lb-zan" onClick={this.zanHandle.bind(this, item.id, item.is_zan)}>
              {
                item.is_zan
                ?
                <Image className="i" src={zan2Icon}/>
                :
                <Image className="i" src={zan1Icon}/>
              }
              <View className={item.is_zan ? 'n cur' : 'n'}>{item.zan_count}</View>
            </View>
            <View className="lb-sub">
              <View>
                {
                  subList.map((sub, subIndex) => {
                    return (
                      <View className="lcb-item" key={subIndex}>
                        <View className="lb-img">
                          <Image className="img" src={sub.avatar} />
                        </View>
                        <View onClick={this.dtlLink.bind(this, item)} className="lb-info">
                          <View className="lb-p1">{sub.nickname}</View>
                          <View className="lb-p2">{sub.comm_cont}</View>
                          <View className="lb-time">{sub.create_at}</View>
                        </View>
                      </View>
                    )
                  })
                }
              </View>
              {
                item.child.length > 2
                ?
                item.isMoreAllShow
                ?
                <View className="lb-more t2" onClick={this.commentMoreHandle.bind(this, index)}>收起
                  <View className="sign"></View>
                </View>
                :
                <View className="lb-more" onClick={this.commentMoreHandle.bind(this, index)}>-展开回复({item.child.length - 2}条)
                  <View className="sign"></View>
                </View>
                : ''
              }
            </View>
          </View>
        </View>
      )
    })
    return (
      <ScrollView
        className='l-scroll-view'
        scrollY
        scrollWithAnimation
        scrollTop="0"
        lowerThreshold="30"
        onScrollToLower={this.onScrollToLower.bind(this)}
      >
        <View className="l-comment-box">
          {curItems}
        </View>
        <ListMore isListEnd={isListEnd} isListLoading={isListLoading} isListEmpty={isListEmpty} />
      </ScrollView>
    )
  }

  zanHandle (comment_id, flag) {
    let apiStr = flag ? 'estatecommentunzan' : 'estatecommentzan'
    Taro.api.house[apiStr]({
      comment_id
    }).then(res => {
      this.getDtl()
    })
  }
  
  commentMoreHandle (index) {
    const { dataList } = this.state
    let mList = dataList || []
    mList.map((item, i) => {
      if (index === i) item.isMoreAllShow = !item.isMoreAllShow
    })
    this.setState({
      dataList: [...mList]
    })
  }

  addCommentHandle () {
    const { id, name, type } = this.$router.params
    if (type && type === 'school') {
      Taro.navigateTo({
        url: `/pagesMore/comment/add?id=${id}&name=${name}&type=school`
      })
    } else {
      Taro.navigateTo({
        url: `/pagesMore/comment/add?id=${id}&name=${name}`
      })
    }
  }

  render () {
    return (
      <View className="l-box has-footer">
        {this.renderTop()}
        {this.renderList()}
        <View className="l-floor-footer">
          <View className="lff-flex">
            <View className="lff-btn full" onClick={this.addCommentHandle.bind(this)}>我要评论</View>
          </View>
        </View>
      </View>
    )
  }
}

export default Index
