import Taro, { Component } from '@tarojs/taro'
import './index.scss'
import { getThumbnail } from '@utils/tools'

const dotImg = require('@assets/dot.png')

export default class Index extends Component {
  static options = {
    addGlobalClass: true
  }
  static defaultProps = {
    data: {}
  }

  preventDefault(e) {
    e.stopPropagation()
  }

  render() {
    const { data, onClick } = this.props
    const { uvList = {}, buildingTag = [], buildingListImg, shareList = {} } = data
    const { records = [], total = 0 } = uvList
    const imgSrc = (buildingListImg && buildingListImg[0]) ? buildingListImg[0].url : require('@assets/default.jpg')

    return (
      <View className='item' onClick={onClick.bind(this, data)}>
        <View className='item__top'>
          {console.log(data,'data')}
          <Image className='item__img' mode="aspectFill" src={getThumbnail(imgSrc)}></Image>
          {data.marketStatus &&
            <View className={data.marketStatus == '在售' ? 'item__status sale' : data.marketStatus == '售罄' ? 'item__status soldout' : 'item__status waitsale'}>{data.marketStatus}</View>}
          <View className='item__right'>
            <View className='item__right__title'>{data.name}</View>
            <View className='item__right__price row'>
              {
                data.price ? <Text className='price__txt'>均价{data.price}元/m²</Text> : <Text className='price__txt'>待定</Text>
              }
            </View>
          </View>

          <View className='item__right__region row'><Text className="location-icon iconfont icon-daohangdizhi"></Text>{data.buildingArea||''}</View>
          {buildingTag.length > 0 && (
            <View className="item__tags row">
              {buildingTag.slice(0, 3).map(tag => <View className='tag' key={tag.tagId}>{tag.tagName}</View>)}
            </View>
          )}
        </View>

        <View className='item__bottom'>
          <View className='item__bottom__left'>
            <Image src={require('@assets/index/share.png')} className='share-img'></Image>
            <Text className='item__bottom__sharenum'>{shareList.total}次分享</Text>
          </View>

          {total > 0 && (
            <View className='item__bottom__right'>
              <Text className='item__bottom__seenum'>{total}人围观</Text>

              <View className='see__img'>
                {records.slice(0, 4).map(item => <Image className='userImg' key={item.uvId} src={getThumbnail(item.photoOravatar)}></Image>)}
                {records.length > 4 && <Image className="dot-img" src={getThumbnail(dotImg)}></Image>}
              </View>

            </View>
          )}
        </View>
      </View>
    )
  }
}
