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 = {
      newsList: [],
      isMoreAllShow: false,
    }
  }


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

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

  moreHandle () {
    let { isMoreAllShow } = this.state
    isMoreAllShow = !isMoreAllShow
    this.setState({
      isMoreAllShow
    })
  }

  linkHandle (item) {
    Taro.navigateTo({
      url: `/pagesRoom/dtl?id=${item.id}`
    })
  }

  render () {
    const testImg = 'http://icon.honglounews.com/ex_banner.jpg'
    const { newsList, isMoreAllShow } = this.state
    const curArr = JSON.parse(JSON.stringify(newsList))
    let cArr = isMoreAllShow ? [...curArr] : curArr.slice(0, 3)
    const itemsList = cArr.map((item, index) => {
      const cTagStr = item.custom_tag || ''
      const tagViews = cTagStr.split(',').map((tag, tagIndex) => {
        return (
          <View className="s" key={tagIndex}>{tag}</View>
        )
      })
      return (
        <View className="lhl-item col-1" key={index} onClick={this.linkHandle.bind(this, item)}>
          <View className="lhl-img">
            <Image src={item.pri_image + '_xs'} className="img" />
          </View>
          <View className="lhl-info">
            <View className="lhl-p1">{item.title}</View>
            <View className="lhl-p2">{item.price}万
              <View className="sub">单价:{parseInt(item.price * 10000 / item.area)}元/平</View>
            </View>
            <View className="lhl-p3">{item.estate_name}</View>
            <View className="lhl-sign">
              {tagViews}
            </View>
          </View>
        </View>
      )
    })
    return (
      <View className="l-house-list">
        {itemsList}
        {
          newsList.length > 3
          ?
          isMoreAllShow
          ?
          <View className="scoped-more t2" onClick={this.moreHandle.bind(this, index)}>收起
            <View className="sign"></View>
          </View>
          :
          <View className="scoped-more" onClick={this.moreHandle.bind(this, index)}>展开
            <View className="sign"></View>
          </View>
          : ''
        }
      </View>
    )
  }
}