import React, { useState, useEffect } from 'react'
import './index.scss'
import { Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { getImgURL } from '@/utils/image'
import { formatDate } from '@/utils/chatDate'

const activityStatusDict={
  0:{
    text:'立即参与',
    className:'yellow'
  },
  1:{
    text:'未开始',
    className:'blue'
  },
  2:{
    text:'已结束',
    className:'grey'
  },
  3:{
    text:'已参与',
    className:'yellow'
  }
}
export default function ActivityListItem (props) {
  const { data = {} } = props
  return (
    <view className='components ActivityListItem' onClick={() => { Taro.navigateTo({ url: `/pages/index/activityDetail/index?id=${data.dynamicId}` }) }}>
      <view className='Img'>
        <Image mode='aspectFill' src={getImgURL(data.listImgUrl)} className='centerLabel'></Image>
      </view>
      <view className='Info'>
        <view className='Name flex-h'>
          <view className='flex-item'>
            <text>{data.title}</text>
          </view>
          <text className={activityStatusDict[data.activityStatus]?.className}>{activityStatusDict[data.activityStatus]?.text}</text>
        </view>
        <view className='Time'>
          <text>活动时间：{formatDate(data.startDate, 'yyyy/M/d')} - {formatDate(data.endDate, 'yyyy/M/d')}</text>
        </view>
      </view>
    </view>
  )
}
