import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import { transferImage } from '@/utils/tools'
import ActivityItem from '../../activity/item'
import dayjs from 'dayjs'
import './index.scss'

const bgImg = require('@/assets/index/background.png')

export default class SwiperBanner extends Component {
    static defaultProps = {
        helpGroupList: [],

    }
    toActivity() {
        Taro.getApp().props.projectIndex = 2
        Taro.switchTab({
            url: `/pages/activity/activity`,
            fail: res => {
                Taro.getApp().props.projectIndex = 0
            }
        })
    }
    handleItemClick(item) {

        switch (item.type) {
            case 'help':
                Taro.navigateTo({
                    url: '/pages/activity/detail/assistance?id=' + item.activityId
                })
                return
            case 'group':
                Taro.navigateTo({
                    url: '/pages/activity/detail/assemble?id=' + item.activityId
                })
                return
            default:
                Taro.navigateTo({
                    url: '/pages/activity/detail/index?id=' + item.activityId
                })
                return
        }
    }
    render() {
        const { helpGroupList } = this.props
        // if (!helpGroupList.length) return null;

        return (
            <View className="activity-box" style={`background: url(${transferImage(bgImg)}) no-repeat center;background-size: 100% 100%;`}>
                <View className="section-head">
                    <View className="section-head__title">参加活动 </View>
                    <View className="section-head__more" onClick={this.toActivity}>
                        查看更多<Text className="iconfont icon-more"></Text>
                    </View>
                </View>
                {
                    helpGroupList.length > 1 &&
                    <ScrollView scrollX>
                        <View className='activity-list'>

                            {helpGroupList.map((item, index) => (
                                <View className='item' key={index + 'act'} onClick={this.handleItemClick.bind(this, item)}>
                                    {(item.type == 'help' || item.type == 'group') &&
                                        <View className={item.type == 'help' ? 'type' : 'type2'}>{item.type == 'help' ? '助力' : '拼团'}</View>
                                    }
                                    <Image className="img" mode="aspectFill" src={transferImage(item.img)}></Image>
                                    <View className="title">{item.title}</View>
                                    <View className="time">参与截止时间</View>
                                    <View className="time">{dayjs(item.endDate).format('YYYY-MM-DD HH:mm:ss')}</View>
                                    {item.endDate &&
                                        <View className={item.activityStatus == 0 ? "btn jionin" : item.activityStatus == 1 ? "btn nostart" : item.activityStatus == 2 ? "btn jioned" : "btn"}>{item.activityStatus == 0 ? "立即参与" : item.activityStatus == 1 ? "未开始" : item.activityStatus == 2 ? "已结束" : "已参与"}</View>
                                    }
                                </View>
                            ))
                            }

                        </View>
                    </ScrollView>
                }
                {
                    helpGroupList.length == 1 &&
                    helpGroupList.map((item, index) => (
                        <ActivityItem
                            data={item}
                            key={item.activityId}
                            onClick={this.handleItemClick.bind(this, item)}>
                        </ActivityItem>
                    ))
                }

            </View>
        )
    }
}
