import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import ListMore from '@/c/pageDataList/listMore'
import './index.scss'
export default class Comment extends Component {
  constructor (props) {
    super(props)
    this.state = {
      curObj: {},
    }
  }


  componentWillMount () {
    this.props.onRef(this)
  }

  getData = (curObj) => {
    this.setState({
      curObj
    })
  }

  renderCommentBtn () {
    const editIcon = require('@img/icon_g_edit.png')
    return (
      <View className="scoped-comment-btn">
        <View className="scb-btn" onClick={this.addCommentHandle.bind(this)}>
          <Image className="img" src={editIcon} />
          <View className="t">我想说两句</View>
        </View>
      </View>
    )
  }
  commentMoreHandle (index) {
    const { curObj } = this.state
    let mList = curObj.comm_list || []
    mList.map((item, i) => {
      if (index === i) item.isMoreAllShow = !item.isMoreAllShow
    })
    let newObj = {...curObj}
    newObj.comm_list = [...mList]
    this.setState({
      curObj: newObj
    })
  }
  addCommentHandle () {
    const { curObj } = this.state
    Taro.navigateTo({
      url: `/pagesMore/comment/add?id=${curObj.id}&name=${curObj.estate_name}`
    })
  }
  zanHandle (comment_id, flag) {
    let apiStr = flag ? 'estatecommentunzan' : 'estatecommentzan'
    Taro.api.house[apiStr]({
      comment_id
    }).then(res => {
      this.props.getDtl()
    })
  }

  render () {
    const { curObj } = this.state
    const zan1Icon = require('@img/i_g_zan.png')
    const zan2Icon = require('@img/i_g_zan2.png')
    let commentList = curObj.comm_list || []
    const curItems = commentList.map((item, index) => {
      const lvIcon = Taro.$getLvIcon(item.integral)
      const oldList = item.child && item.child.length ? JSON.parse(JSON.stringify(item.child)) : []
      const subList = item.isMoreAllShow ? [...oldList] : oldList.splice(0, 4)
      return (
        <View className="lcb-item" key={index}>
          <View className="lb-img">
            <Image className="img" src={item.avatar} />
          </View>
          <View className="lb-info">
            <Navigator url={'/pagesMore/comment/dtl?id=' + item.id + '&estateId=' + curObj.id} >
              <View className="lb-p1">{item.nickname}
                <Image className="i" src={lvIcon}></Image>
              </View>
              <View className="lb-time">{item.create_at}</View>
              <View className="lb-p2">{item.comm_cont}</View>
            </Navigator>
            <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) => {
                    const lvSubIcon = Taro.$getLvIcon(sub.integral)
                    return (
                      <View className="lcb-item" key={subIndex}>
                        <View className="lb-img">
                          <Image className="img" src={sub.avatar} />
                        </View>
                        <Navigator url={'/pagesMore/comment/dtl?id=' + item.id + '&estateId=' + curObj.id} className="lb-info">
                          <View className="lb-p1">{sub.nickname}
                            <Image className="i" src={lvSubIcon}></Image>
                          </View>
                          <View className="lb-time">{sub.create_at}</View>
                          <View className="lb-p2">{sub.comm_cont}</View>
                        </Navigator>
                      </View>
                    )
                  })
                }
              </View>
              {
                item.child.length > 4
                ?
                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 - 4}条)
                  <View className="sign"></View>
                </View>
                : ''
              }
            </View>
          </View>
        </View>
      )
    })
    return (
      <View className="l-comment-box">
        <View>
          {curItems}
          {
            commentList.length === 0
            &&
            <ListMore isOther={true} text="来聊两句？"/>
          }
        </View>
        {this.renderCommentBtn()}
      </View>
    )
  }
}