import React, {Component} from 'react'
import './togroup.scss'
import {HeaderBar} from '../../../common'
import {VList} from '../../../common'

import {getParam} from "@/utils"
import {connect} from "react-redux"
import {Link} from "react-router-dom"


class ToGroup extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: {
                'course_id': '140',
                'course_title': '课程标题课程标题课程标题课程标题课程标题课程标题课程标题课程标题',
                'simpledescription': '课程标题课程标题课程标题课程标题课程标题课程标题课程标题课程标题课程标题课程标题课程标题课程标题课程标题课程标题课程标题课程标题',
                'image_name': 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/6479fe123a.jpg',
                'price0': '140',
                'price1': '140',
                'success': false, // 拼团成功
                'my': 0,  // 0  自己发起的邀请好友  1 别人发起的，参别人的团
            }
        }
    }

    render() {
        const Info = (
            <div className="info">
                <p className='title'>
                    <Link to={`/detail?id=${this.state.data.course_id}`}>
                        {this.state.data.course_title}
                    </Link>
                </p>
                <p className='contact text-overflow-2'>{this.state.data.simpledescription}</p>
                <div className='des'>
                    <p className="course-price">
                        <span className="new">¥{this.state.data.price1}</span>
                        <span className="old">¥{this.state.data.price0}</span>
                    </p>
                </div>
            </div>
        )
        return (
            <div className='to-group-box'>
                <HeaderBar title='拼团' arrow={true} cart={false}></HeaderBar>
                <VList img={this.state.data.image_name} id={this.state.data.course_id} info={Info}></VList>

                <GorupContent data={this.state.data}/>


                <div className="group-course">
                    <div className="top-title">
                        <span>本周特惠</span>
                        <Link to={`/preferential`} className='more'>更多<i className='iconfont iconiconfront-70'></i></Link>
                    </div>
                    <VList img={this.state.data.image_name} id={this.state.data.course_id} info={Info}></VList>
                </div>
            </div>
        )
    }
}

function GorupContent(props) {
    console.log(props)
    let tip, btn, dec
    if (props.data.my === 0) {
        tip = <p className='tip'>拼团省500元</p>
        btn = <Link to={`/`} className='group-btn'>邀请好友参团 23：23：23 后结束</Link>
        dec = <p className='dec'>分享到3个群后，成团率高达98%</p>

    } else {
        tip = <p className='tip'>拼团省500元</p>
        btn = <Link to={`/`} className='group-btn'>一键参团</Link>
    }
    if (props.data.success) {
        tip = <p className='success'>拼团成功</p>
        btn = <Link to={`/play`} className='tostudy'>去学习</Link>
    }
    return (
        <div className='gorup-content'>
            {tip}
            <img className='imgname' src={props.data.image_name} alt=""/>
            <img className='imgname' src={props.data.image_name} alt=""/>
            <img className='imgname' src={props.data.image_name} alt=""/>
            {btn}
            {dec}
            {
                !props.data.success &&
                <div className="group-dec">
                    <span>
                        <i className='iconfont iconiconfront-1'></i>
                        ·好友参团  ·人满成交  ·人不满退款
                    </span>
                    <span className='allNum'>累计856人成团</span>
                </div>
            }
        </div>
    )
}

export default ToGroup
