import Taro, { Component } from '@tarojs/taro'
import { View, Image, Input } from '@tarojs/components'
import ListMore from '@/c/pageDataList/listMore'
import './dtl.scss'
import { strTrim } from '@utils'

class Index extends Component {
  onShareAppMessage() {
    const { id } = this.$router.params
    return {
      title: `来看看这些评论，有点意思`,
      path: `/pagesMore/comment/list?id=${id}`,
    }
  }
  onShareTimeline () {
    return {
      title: '让买房，更省心！',
    }
  }


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

  config = {
    navigationBarTitleText: '评论详情',
  }

  componentWillMount () {
    const { name } = this.$router.params
    Taro.setNavigationBarTitle({
      title: name || '评论详情'
    })
    this.getDataList()
  }

  componentDidShow () { }

  componentDidHide () { }


  renderTop () {
    const { curObj } = this.state
    const zan1Icon = require('@img/i_g_zan.png')
    const zan2Icon = require('@img/i_g_zan2.png')
    return (
      <View className="l-comment-box">
        <View className="lcb-item" onClick={this.changeSendHandle.bind(this, curObj)}>
          <View className="lb-img">
            <Image className="img" src={curObj.avatar} />
          </View>
          <View className="lb-info">
            <View className="lb-p1">{curObj.nickname}</View>
            <View className="lb-p2">{curObj.comm_cont}</View>
            <View className="lb-time">{curObj.create_at}</View>
          </View>
          <View className="lb-zan" onClick={this.zanHandle.bind(this, curObj.id, curObj.is_zan)}>
            {
              curObj.is_zan
              ?
              <Image className="i" src={zan2Icon}/>
              :
              <Image className="i" src={zan1Icon}/>
            }
            <View className={curObj.is_zan ? 'n cur' : 'n'}>{curObj.zan_count}</View>
          </View>
        </View>
      </View>
    )
  }
  urlLink () {
    const { id } = this.$router.params
    Taro.navigateTo({url: '/pagesSchool/indexDtl?id=' + id})
  }
  zanHandle (comment_id, flag) {
    const { schoolId } = this.$router.params
    let apiStr = flag ? 'estatecommentunzan' : 'estatecommentzan'
    if (schoolId) {
      apiStr = flag ? 'schoolcommentunzan' : 'schoolcommentzan'
    } else {
      apiStr = flag ? 'estatecommentunzan' : 'estatecommentzan'
    }
    Taro.api.house[apiStr]({
      comment_id
    }).then(res => {
      this.getDataList()
    })
  }

  getDataList () {
    let { page_size, page, dataList, isListEmpty } = this.state
    const { id: comment_id, schoolId } = this.$router.params
    let apiStr = 'estateonelevellist'
    if (schoolId) {
      apiStr = 'schoolcommentonelevel'
    } else {
      apiStr = 'estateonelevellist'
    }
    Taro.api.house[apiStr]({
      page,
      page_size,
      comment_id,
    }).then(res => {
      const curObj = res.one_level || {}
      let 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({
        curObj,
        tempObj: curObj,
        dataList,
        isListEnd,
        isListEmpty,
        isListLoading: false
      })
    })
  }
  onScrollToLower (e) {
    let { isListEnd, isListLoading, page } = this.state
    if (!isListEnd && !isListLoading) {
      page++
      this.setState({
        page,
        isListLoading: true
      }, () => {
        this.getDataList()
      })
    }
  }

  renderList () {
    const { dataList, isListEnd, isListLoading, isListEmpty, curObj } = this.state
    const curItems = dataList.map((item, index) => {
      return (
        <View className="lcb-item" key={index} onClick={this.changeSendHandle.bind(this, item)}>
          <View className="lb-img">
            <Image className="img" src={item.avatar} />
          </View>
          <View className="lb-info">
            <View className="lb-p1">{item.nickname}</View>
            {
              item.parent_id === curObj.id
              ?
              <View className="lb-p2">{item.comm_cont}</View>
              :
              <View className="lb-p2">回复:<View className="link">{item.parent_user_name}</View>{item.comm_cont}</View>
            }
            <View className="lb-time">{item.create_at}</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} text="暂无回复"/>
      </ScrollView>
    )
  }

  changeSendHandle (tempObj) {
    this.setState({
      commentVal: '',
      tempObj
    })
  }

  sendHandle () {
    const { commentVal, tempObj } = this.state
    const { estateId, schoolId } = this.$router.params
    let apiStr = 'estatecommentadd'
    let params = {
      estate_id: estateId,
      comm_cont: commentVal,
      parent_id: tempObj.id,
      parent_user_id: tempObj.user_id,
      parent_user_name: tempObj.nickname,
    }
    if (schoolId) {
      apiStr = 'schoolcommentadd'
      params = {
        school_id: schoolId,
        comm_cont: commentVal,
        parent_id: tempObj.id,
        parent_user_id: tempObj.user_id,
        parent_user_name: tempObj.nickname,
      }
    } else {
      apiStr = 'estatecommentadd'
      params = {
        estate_id: estateId,
        comm_cont: commentVal,
        parent_id: tempObj.id,
        parent_user_id: tempObj.user_id,
        parent_user_name: tempObj.nickname,
      }
    }
    if (commentVal) {
      Taro.api.house[apiStr](params).then(res => {
        Taro.$msg('评论成功~')
        this.setState({
          commentVal: ''
        })
        this.getDataList()
      })
    } else {
      Taro.$msg('请输入你的评论')
    }
  }

  changeInput (e) {
    const val = strTrim(e.target.value)
    this.setState({
      commentVal: val
    })
  }

  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 { tempObj, commentVal, dataList } = this.state
    return (
      <View className="l-box has-footer">
        {this.renderGoHome()}
        {this.renderTop()}
        <View className="scoped-main">
          <View className="sm-title">
            全部回复
            <View className="t">({dataList.length}条)</View>
          </View>
          {this.renderList()}
        </View>
        <View className="l-floor-footer">
          <View className="scoped-footer">
            <View className="sf-input">
              <Input className="input" placeholder={`回复:${tempObj.nickname}`} value={commentVal}  onInput={this.changeInput.bind(this)} />
              <View className="btn" onClick={this.sendHandle.bind(this)}>发送</View>
            </View>
          </View>
        </View>
      </View>
    )
  }
}

export default Index
