import React, {Component} from 'react'
import './index.scss'
import LiveRoom from './LiveRoom/index'
import YearCourse from './YearCourse/index'
import TreasureBox from './../treasure-box/index'
import TreasureNav from './nav'
import CommonPopup from './../common/commonPopup/index'

export default class index extends Component {
    state = {
        showMark: false,
        banner: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/m_banner_bj%402x.png'
    }

    // 关闭弹框
    closePopup = () => {
        this.setState({
            showMark: false,
        })
    }

    render() {
        const { banner } = this.state;
        return (
            <div className={'year-index'}>
                <div className="banner-treasure">
                    <div id="banner" className="banner-treasure__header" style={{backgroundImage: `url(${banner})`}}></div>
                    <div className="banner-treasure__nav">
                        <TreasureNav id="banner" />
                    </div>
                    <div className="banner-treasure__decorate"></div>
                </div>
                {/* 大咖直播 */}
                <LiveRoom />

                {/* 组队开宝箱 */}
                <TreasureBox />
                <YearCourse />

                {/*好友加入队伍提醒；获得宝箱提醒；开售提醒弹窗，需要自取，注意修改文案*/}
                {
                    this.state.showMark &&
                    <CommonPopup top={50} closePopup={this.closePopup} mark={true}>
                        <div className='sub__code_container'>
                            <p className='sub__title'>提醒服务</p>
                            <p className='sub__tip'>有好友加入队伍后第一时间通知我~</p>
                            <img className='sub__qr_code' id={'live-qr-code'} src='//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018christyear/h5/qrcode.jpg' alt=""/>
                            <p className='sub__tip'>长按识别/扫码 关注【七月在线】服务号即可预约</p>
                        </div>
                    </CommonPopup>
                }

                {/*规则弹窗*/}
                {
                    this.state.showMark &&
                    <CommonPopup top={50} closePopup={this.closePopup} mark={true}>
                        <div className='sub__code_container'>
                            <p className='sub__title'>组队开宝箱活动规则</p>
                            <p className='sub__rule'>
                                1. 活动期间（12月18日-12月31日）可随时参与开宝箱；<br/>
                                2. 当前队伍满员后可继续创建新队伍；<br/>
                                3. 每人有一次机会加入好友的队伍；<br/>
                                4. 队伍满员后所有成员均可随机获得宝箱内奖品，队长奖励更丰厚哦~<br/>
                                5. 代金券、课程等虚拟奖品将直接发放至账户，实物奖品活动结束后统一邮寄；<br/>
                                6. 现金可提现：我的 → 赚奖学金 → 提现。
                            </p>
                        </div>
                    </CommonPopup>
                }
            </div>
        )
    }
}
