import '@/assets/css/iconfont.css'
import Taro from '@tarojs/taro'
import { Image } from '@tarojs/components'
import { getImgURL } from '@/utils/image'
import './index.scss'

export default function ProjectListItem (props) {
  const { Data = {}, ShowImgIcon = true } = props
  const { uvList = [] } = Data
  return (
    <view className='components ProjectListItem flex-h' onClick={() => { Taro.navigateTo({ url: `/pages/index/buildingDetail/index?id=${Data.buildingId || Data.targetId}` }) }}>
      <view className='Img'>
        <view>
          <Image mode='aspectFill' className='centerLabel' src={getImgURL((Data?.buildingListImg || []).length ? Data.buildingListImg[0].url : Data.activityImg || null)} />
          {
            (Data?.panoramaList || []).length > 0 && ShowImgIcon &&
            <Image mode='heightFix' className='Tips Vr' src={require('@/assets/index-icon18.png')} />
          }
          {
            Data.videoUrl !== null && ShowImgIcon &&
            <Image mode='heightFix' className='Tips Video' src={require('@/assets/index-icon19.png')} />
          }
        </view>
      </view>
      <view className='flex-item'>
        <view className='Name flex-h'>
          <view className='flex-item'>
            <text>{Data.buildingName}</text>
          </view>
          <text></text>
        </view>
        <text className='Price'>{Data.price}</text>
        <text className='Address'>{Data.address}</text>
        <view className='Tags'>
          {
            (Data.buildingTag || []).map((item, index) => (
              <text key={`Tags-${index}`}>{item.tagName}</text>
            ))
          }
        </view>
        <view className='ShareInfo'>
          <text className='iconfont icon-fenxiang'></text>
          <text>{299 + (Data.shareNum || 0)}次分享</text>
          <view className='Users'>
            {
              (uvList?.records || []).slice(0, 3).map((item, index) => (
                <view key={`uv-${index}`}>
                  <Image mode='aspectFill' className='centerLabel' src={item.photoOravatar} />
                </view>
              ))
            }
          </view>
          <text>{(uvList?.records || []).length > 0 ? '...' : ''}{299 + (Data.pvNum || 0)}人围观</text>
        </view>
      </view>
    </view>
  )
}