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

export default class Item extends Component {
  static defaultProps = {
    data: {},
    style: {}
  }
  handleClick(data) {

    this.props.onClick(data)
  }
  render() {
    const { data, style } = this.props
    return (
      <View className="item" style={style} onClick={this.handleClick.bind(this, data)}>
        {console.log(data,'----data-----')}
         <Image className="pic" mode="aspectFill" src={getThumbnail(data.mainImg || data.imgUrl)}></Image>
        <View className="box">
          <View className="title">{data.title}</View>
          {
            data.weight == '1' &&
            <Image className="hot-tip" src={require('@assets/shop/hottip.png')}></Image>
          }
          {(data.type == 'help' || data.type == 'group') &&
            <View className={data.type == 'help' ? 'type' : 'type2'}>{data.type == 'help' ? '助力' : '拼团'}</View>

          }
          {(data.type == 'help' || data.type == 'group') && data.successNum > 0 &&
            <View className="success-num">
              <View className="triangle"></View>
              <View className="text">已成功 {data.successNum}</View>
            </View>

          }

          {/* <View className="time">活动开始时间：{`${dayjs(data.startDate).format('YYYY-MM-DD HH:mm:ss')}`}</View> */}

          <View className="left">
            {data.endDate &&
              <View className="time">参与截止时间：{`${dayjs(data.endDate).format('YYYY年MM月DD日 HH:mm:ss')}`}</View>
            }
            {!data.endDate &&
              <View className="time">{data.type != 'dynamic' ? '参与截止时间：' : ''}</View>
            }
            {data.endDate &&
              <View className={data.activityStatus == 0 ? "btn jionin " : data.activityStatus == 1 ? "btn nostart" : data.activityStatus == 2 ? "btn jioned" : "btn"}>{data.activityStatus == 0 ? "立即参与" : data.activityStatus == 1 ? "未开始" : data.activityStatus == 2 ? "已结束" : "已参与"}</View>
            }
          </View>
        </View>
      </View >
    );
  }
}