import React, {Component} from 'react'
import './index.scss'
import Bargain from './bargain'
import OutLine from './outline'
import {HeaderBar, ToApp} from '../../common'
import ShareRank from "./shareRank"
import Audition from "./audition"
import Single from "./single"
import BtnStatus from "./btnstatus"
import Carouselw from "./carousel"
import {connect} from "react-redux"
import {fetchCoursesListIfNeeded} from "./actions"


class Detail extends Component {

    constructor(props) {
        super(props)
        this.state = {
            isbuy: 0,
            isvip: 0,
            auditionBox: false,
            singleBox: false,
            shareRank: false,
            singMess: ''
        }
    }

    componentDidMount() {
        this.props.fetchCoursesListIfNeeded()
    }

    componentDidUpdate() {
        // console.log(this.props.courseInfo.course_info)
    }

    toApp = () => {
        alert('toApp')
    }
    // 点击子组件试听按钮
    toAudition = () => {
        this.setState(status => ({
            auditionBox: true,
        }));
    }
    // 点击子组件单集购买按钮
    toSingleset = (item) => {
        this.setState(status => ({
            singleBox: true,
            singMess: item
        }));
    }

    // 打开分销排行榜弹窗
    openRanking = () => {
        this.setState(status => ({
            shareRank: true
        }));
    }


    // 自组件传给父组件的boxHide
    boxHide = (val) => {
        this.setState({auditionBox: val, singleBox: val, shareRank: val})
    }

    render() {
        let courseInfo = ''
        let service = ''
        if (this.props.courseInfo.course_info) {
            courseInfo = this.props.courseInfo.course_info
            service = this.props.courseInfo.course_info.service
        }
        return (
            <div className='detail-box'>
                <ToApp className='toapp' toApp={this.toApp}></ToApp>
                <HeaderBar title='课程详情' arrow={true} cart={true}></HeaderBar>
                {/*弹幕*/}
                <Carouselw></Carouselw>
                {/*课程*/}
                <div className='course-content'>
                    <div className='cover'>
                        <img src={courseInfo.image_name}
                             alt=""/>
                    </div>
                    <div className="info">
                        <p className='title'>{courseInfo.course_title}</p>
                        <p className='contact text-overflow-2'>{courseInfo.simpledescription}</p>
                        <div className='des'>
                            {courseInfo.is_baoming === 0 && <p className="course-price">
                                <span className="new">¥{courseInfo.price1}</span>
                                <span className="old">¥{courseInfo.price0}</span>
                            </p>
                            }
                            {courseInfo.is_baoming === 1 &&
                            <a href="/#" className="isbuy">已购买</a>
                            }
                        </div>
                    </div>
                </div>
                {/*正常课程已购买时显示*/}
                {
                    courseInfo.is_baoming === 1 &&
                    <div className='group'>
                        上课QQ群：{courseInfo.course_qq}，加群请备注您的学号：{courseInfo.uid}
                    </div>
                }
                {/*vip课程显示*/}
                {
                    courseInfo.vip_range &&
                    <div className="vip">
                        <p>已开通年会员：{courseInfo.vip_range}</p>
                        <p>年会员QQ群：{courseInfo.course_qq}，加群请备注您的学号：{courseInfo.uid}</p>
                    </div>
                }

                {/*服务承诺*/}
                <div className='promise'>
                    <label>服务承诺</label>
                    <p>
                        {
                            service && service.length > 0 && service.map((item, index) => {
                                return (
                                    <span key={index}> {item} </span>
                                )
                            })
                        }
                    </p>
                </div>

                {/*试听*/}
                <Audition auditionBox={this.state.auditionBox} boxHide={this.boxHide}/>

                {/*单集购买*/}
                <Single singleBox={this.state.singleBox} boxHide={this.boxHide} data={this.state.singMess}
                        title={courseInfo.course_title}/>

                {/*分享赚钱*/}
                {
                    courseInfo.is_dist &&
                    <ShareRank data={this.props.courseInfo} shareRank={this.state.shareRank}
                               openRanking={this.openRanking} boxHide={this.boxHide}/>
                }

                {/*砍价*/}
                <Bargain/>

                {/*课程介绍、大纲*/}
                <OutLine data={this.props.courseInfo} toAudition={this.toAudition} toSingleset={this.toSingleset}/>

                {/*课程按钮*/}
                <BtnStatus data={this.props.courseInfo}></BtnStatus>
            </div>
        )
    }

}

const mapStateToProps = state => ({
    courseInfo: state.courseInfo
})
const mapDispatchToProps = {
    fetchCoursesListIfNeeded
}


export default connect(mapStateToProps, mapDispatchToProps)(Detail)