import React, {Component} from 'react'
import './index.scss'
import {api, getParam, http} from "@/utils"
import {Toast} from 'antd-mobile'
import {connect} from "react-redux"
import {withRouter} from 'react-router-dom'
import {compose} from "redux"


class ShareRank extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: '',
            rankingslice: '',
            code: '',
            shareRank: false
        }
    }

    componentDidMount() {
        // 获取排行榜
        http.get(`${api.home}/dist/rankList/${getParam('id')}`).then((res) => {
            if (res.data.code === 200) {
                this.setState({
                    list: res.data.data,
                    rankingslice: res.data.data.slice(0, 2)
                })
            } else {
                Toast.info(res.data.msg, 2)
            }
        })
        // 获取分销码
        let data = {
            course_id: getParam('id')
        }
        http.post(`${api.home}/dist/createCode`, data).then((res) => {
            if (res.data.code === 200) {
                this.setState({
                    code: res.data.data.code
                })
            } else {
                Toast.info(res.data.msg, 2)
            }
        })
    }

    share = (info) => {
        const courseId = getParam('id')
        const dist_first = info.dist_first_level_ti
        const uid = info.uid
        const dist_code = this.state.code
        this.props.history.push(`/shareposter?courseId=${courseId}&dist_first=${dist_first}&uid=${uid}&dist_code=${dist_code}`)
    }


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

    // 关闭弹窗
    colse = () => {
        this.setState({
            shareRank: false
        })
    }

    render() {
        let info = ''
        if (this.props.courseInfo && this.props.courseInfo.courseInfo && this.props.courseInfo.courseInfo.course_info) {
            info = this.props.courseInfo.courseInfo.course_info
        }
        return (
            <div className='share-ranking'>
                <span className="title">排行榜：</span>
                <div className='ranking-box' onClick={this.openRanking}>
                    {
                        this.state.rankingslice && this.state.rankingslice.length > 0 && this.state.rankingslice.map((item, index) => {
                            return (
                                <span key={index} className="ranking-mess">
                                    <img src={item.head_imgurl} alt=""/>
                                    <i>{item.amount}元</i>
                                </span>
                            )
                        })
                    }

                    <img className="ranking-ellipsis"
                         src="https://julyedu-img.oss-cn-beijing.aliyuncs.com/Image/train/ellipsis.png" alt=""/>
                </div>
                <button className="share" onClick={this.share.bind(this,info)}>分享赚{info.dist_first_level_ti}元</button>

                {
                    this.state.shareRank &&
                    <div className="shareMbc">
                        <div className="content">
                            <div className="title-box">
                                <span className="lable">赚钱排行榜</span>
                                <span className="tips">只展示前9名用户</span>
                            </div>
                            <ul>
                                {
                                    this.state.list && this.state.list.length > 0 && this.state.list.map((item, index) => {
                                        return (
                                            <li key={index}>
                                                <img src={item.head_imgurl} alt=""/>
                                                <span className='course-title'>{item.user_name}</span>
                                                <span className='course-price'>{item.amount}元</span>
                                            </li>
                                        )
                                    })
                                }
                            </ul>
                            <div className='shareBtn'>
                                <button onClick={this.share.bind(this,info)}>分享赚{info.dist_first_level_ti}元</button>
                            </div>
                        </div>
                        <i onClick={this.colse} className={'iconfont iconiconfront-2 close'}></i>
                    </div>
                }
            </div>
        );
    }
}

export default compose(
    connect(
        state => ({courseInfo: state}),
        null
    ),
    withRouter
)(ShareRank)
