import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import { arrToObj } from '@utils'
import './index.scss'
export default class List extends Component {
  constructor (props) {
    super(props)
    this.state = {
      newsList: [],
    }
  }


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

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


  render () {
    const dictData = Taro.getStorageSync('dictData')
    const { newsList } = this.state
    const curItems = newsList.map((item, index) => {
      const product_type = item.product_type || ''
      const productTypeArr = product_type.split(',').map(v => {
        return arrToObj(dictData.product_type)[v]
      })
      const cTagStr = item.custom_tag || ''
      const tagViews = cTagStr.split(',').map((tag, tagIndex) => {
        return (
          <View className="s" key={tagIndex}>{tag}</View>
        )
      })
      return (
        <Navigator url={'/pagesHouse/indexDtl?id=' + item.estate_id} className="lhl-item col-1" key={index}>
          <View className="lhl-img">
            <Image src={item.pri_image + '_xs'} className="img" />
          </View>
          <View className="lhl-info">
            <View className="lhl-p1">{item.estate_name}</View>
            <View className="lhl-p2">{item.price_range || "未知"}/㎡</View>
            <View className="lhl-p3">{arrToObj(dictData.area_type)[item.area_type]}  {productTypeArr.length > 0 ? `-${productTypeArr.join('/')}` : ''}</View>
            <View className="lhl-sign">
              {
                item.estate_tag === '售罄' || item.estate_tag === '二手'
                ? <View className="s t4">{item.estate_tag}</View>
                : item.estate_tag === '待售'
                ? <View className="s t3">{item.estate_tag}</View>
                : <View className="s t2">{item.estate_tag}</View>
              }
              {tagViews}
            </View>
          </View>
        </Navigator>
      )
    })
    return (
      <View className="l-house-list">
        {curItems}
      </View>
    )
  }
}