import React, {Component} from 'react'
import './index.scss'
import {getParam} from "@/utils"
import {connect} from "react-redux"
import {Link} from "react-router-dom"


class Group extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isShowMore: false
        }
    }

    // 查看更多
    getMore = () => {
        this.setState({
            isShowMore: true
        })
    }

    // 关闭更多窗口
    closeMore = () => {
        this.setState({
            isShowMore: false
        })
    }


    render() {
        let groupInfo = ''
        if (this.props.courseInfo && this.props.courseInfo.courseInfo && this.props.courseInfo.courseInfo.course_info) {
            groupInfo = this.props.courseInfo.courseInfo.course_info.pdd_group_info
        }
        return (
            <div className='group-box'>
                <div className="group-title">
                    <span>{groupInfo.now_groupon_total}人正在开团，可直接参与</span>
                    <span className='more' onClick={this.getMore}>
                        查看更多
                        <i className='iconfont iconiconfront-70'></i>
                    </span>

                </div>
                <ul className="group-list">
                    {
                        groupInfo.now_groupon_list && groupInfo.now_groupon_list.length > 0 && groupInfo.now_groupon_list.map((item, index) => {
                            return (
                                <li key={index} className='group-item'>
                                    <img className='avatar' src={item.avatar} alt=""/>
                                    <div className='user-name text-overflow-one'>
                                        {item.user_name}
                                    </div>
                                    <div className='group-status'>
                                        <p>还差<span className='red'>{item.number}人</span>拼成</p>
                                        <p>剩余 {item.end_time}</p>
                                    </div>
                                    <Link to={`/order?id=${getParam('id')}&&groupon_code=${item.pdd_order_id}`}
                                          className='topay'>去参团</Link>
                                </li>
                            )
                        })
                    }
                </ul>
                <div className="group-dec">
                    <span>
                        <i className='iconfont iconiconfront-1'></i>
                        ·好友参团  ·人满成交  ·人不满退款
                    </span>
                    <span className='allNum'>累计856人成团</span>
                </div>

                {/*更多*/}
                {
                    this.state.isShowMore &&
                    <div className="moreMbc">
                        <div className="content">
                            <div className="title-box">
                                正在拼团
                            </div>
                            <ul className='more-group-list'>
                                {
                                    groupInfo.now_groupon_list && groupInfo.now_groupon_list.length > 0 && groupInfo.now_groupon_list.map((item, index) => {
                                        return (
                                            <li key={index} className='group-item'>
                                                <img className='avatar' src={item.avatar} alt=""/>
                                                <div className='user-name'>
                                                    <p className='name text-overflow-one'>{item.user_name}</p>
                                                    <p className='time'>剩余 {item.end_time}</p>
                                                </div>
                                                <p className='group-status'>还差{item.number}人</p>
                                                <Link
                                                    to={`/order?id=${getParam('id')}&&groupon_code=${item.pdd_order_id}`}
                                                    className='topay'>去参团</Link>
                                            </li>
                                        )
                                    })
                                }
                            </ul>
                            <div className='more-group-dec'>
                                仅显示10个正在开团的人
                            </div>
                        </div>
                        <i onClick={this.closeMore} className={'iconfont iconiconfront-2 close'}></i>
                    </div>
                }

            </div>
        )
    }
}

export default connect(
    state => ({courseInfo: state}),
    null
)(Group)
