import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import ListMore from '@/c/pageDataList/listMore'
import { arrToObj } from '@utils'
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
    })
  }

  render () {
    const dictData = Taro.getStorageSync('dictData')
    const { newsList, isMoreAllShow } = this.state
    const curArr = JSON.parse(JSON.stringify(newsList))
    let cArr = isMoreAllShow ? [...curArr] : curArr.slice(0, 3)
    const curItems = cArr.map((item, index) => {
      const imgUrl = `${item.pri_image}_xs`
      const curProductType = (item.product_type || '').split(',')
      return (
        <Navigator url={'/pagesHouse/indexDtl?id=' + item.id} className="lb-item" key={index}>
          <View className="lb-img">
            <Image className="img" src={imgUrl} />
          </View>
          <View className="lb-info">
            <View className="lb-p1">{item.estate_name}</View>
            <View className="lb-p2">{item.address}</View>
            <View className="lb-tag">
              {
                curProductType.map((pt, pIndex) => {
                  return (
                    <View className="t" key={pIndex}>{arrToObj(dictData.product_type)[pt]}</View>
                  )
                })
              }
            </View>
          </View>
        </Navigator>
      )
    })
    return (
      <View className="l-list-box">
        {curItems}
        {
          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>
          : ''
        }
        {
          newsList.length === 0
          &&
          <ListMore isOther={true} text="暂无"/>
        }
      </View>
    )
  }
}