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
    })
  }

  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 curItems = cArr.map((item, index) => {
      const imgUrl = `${item.pri_image ? item.pri_image + '_xs' : testImg}`
      return (
        <View className="lb-item" key={index}>
          <Navigator url={'/pagesMore/news/indexDtl?id=' + item.id} className="lb-img">
            <Image className="img" src={imgUrl} />
          </Navigator>
          <View className="lb-info">
            <Navigator url={'/pagesMore/news/indexDtl?id=' + item.id} className="lb-p1">{item.title}</Navigator>
            {
              item.create_at
              &&
              <View className="lb-p2">{item.create_at.substring(0, 10)}</View>
            }
          </View>
        </View>
      )
    })
    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>
    )
  }
}