import React, {Component} from 'react'
import {api, getParam, http} from "@/utils"
import {Toast} from 'antd-mobile'
import {Link} from 'react-router-dom'
import {getCourses} from "@/components/detail/actions"
import {connect} from "react-redux"
import './index.scss'
import Overlay from '../overlay'


class BtnStatus extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isbuy: 1,
            is_baoming: 0,
            group_status: 3,
            in_cart: false,
            countdown: 0,
        }
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            ...nextProps.data.course_info,
            countdown: nextProps.countdown,
        });
    }

    // 加入购物车 type：1 加入购物车，2加入购物车并跳转到购物车页面去支付
    toCart = (type) => {
        console.log(type)
        let data = {
            course_id: getParam('id')
        };
        http.post(`${api.home}/m/cart/add`, data).then((res) => {
            if (res.data.code === 200) {
                if (type === 1) {
                    Toast.info('已加入购物车', 2)
                    // this.props.getCourses()
                    document.location.reload()
                } else {
                    window.location.href = '/shopcart'
                }

            } else if (res.data.code === 15001) {
                window.location.href = '/shopcart'
            } else {
                Toast.info(res.data.msg, 2);
            }
        })
    }
    // 直接购买
    tobuy = () => {
        if (this.props.barInfo.bargain_status === 2) {
            this.toCart(2)
        } else {
            // 取消砍价记录
            this.setState({
                isShowOverlay: true,
                bargainStatus: 1,
            })
        }
    }
    // 直接购买 TODO 等弄清楚了逻辑 再和加入购物车合并
    toBuy = () => {

        let data = {
            course_id: getParam('id')
        };
        http.post(`${api.home}/m/cart/add`, data).then((res) => {
            if(res.data.code !== 200) {
                Toast.info(res.data.msg, 2);
                return;
            }
            this.props.history.replace('/shopcart');
        })
    }

    // 取消砍价
    cancel = () => {
        let data = {
            courseId: getParam('id')
        }
        http.post(`${api.home}/m/bargain/cancel`, data).then((res) => {
            if (res.data.code === 200) {
                this.setState({
                    isShowOverlay: false,
                    bargainStatus: '',
                })
                window.location.href = '/shopcart'
            } else {
                Toast.info(res.data.msg, 2)
            }
        })
    }
    close = () => {
        this.setState({
            isShowOverlay: false,
            bargainStatus: '',
        })
    }
    // 砍价接口
    toKanjia = () => {
        let data = {
            course_id: getParam('id'),
            type: 1,  // 1 用户自己砍价 2 使用砍价神器 3 好友助力砍价 4 好友第二次助力
            parent_uid: 0 // 被助力人id 【自己本人操作传0】
        }
        http.post(`${api.home}/m/to_bargain`, data).then((res) => {
            if (res.data.code === 200) {
                // this.props.getBargainInfo()
                document.location.reload()
            } else {
                Toast.info(res.data.msg, 2)
            }
        })
    }

    render() {
        let info = ''
        if (this.props.data && this.props.data.course_info) {
            info = this.props.data.course_info
        }
        let barInfo = this.props.barInfo && this.props.barInfo
        const {countdown} = this.state;
        return (

            <div>
                {/*正常购买*/}
                {
                    info.is_baoming === 0 && info.group_status !== 3 &&
                    <div className='btns-box'>
                        <a className='consult consult-s' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
                            <i className='iconfont iconerji'></i>
                            <span>课程咨询</span>
                        </a>
                        {
                            info.in_cart &&
                            <Link to='/shopcart' className='btn btn-s bg-FCCD05'>去购物车结算</Link>
                        }
                        {
                            !info.in_cart &&
                            <button className='btn btn-s bg-FCCD05' onClick={e => this.toCart(1)}>加入购物车</button>

                        }
                        <Link to='/order' className='btn btn-s bg-FD7700'>立即报名</Link>
                    </div>
                }

                {/*已购买*/}
                {
                    info.is_baoming === 1 &&
                    <div className='btns-box'>
                        <a className='consult consult-m' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
                            <i className='iconfont iconerji'></i>
                            <span>课程咨询</span>
                        </a>
                        <Link to={`/play?id=${getParam('id')}`} className='btn btn-m bg-09f'>开始学习</Link>
                    </div>
                }
                {/*拼团 未开团*/}
                {
                    info.is_baoming === 0 && info.group_status === 3 &&
                        <div className='btns-box'>
                            <a className='consult consult-s' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
                                <i className='iconfont iconerji'></i>
                                <span>课程咨询</span>
                            </a>
                            <button className='btn btn-s bg-F4AAA7' onClick={this.toBuy}>
                                <span>{`¥ ${info.price1}`}</span>
                                <span>直接购买</span>
                            </button>
                            <button className='btn btn-s bg-E02E24'>
                                <Link to={`/order?id=${getParam('id')}`}>
                                    <span>{`¥ ${info.pdd_group_info.price}`}</span>
                                    <span>一键开团</span>
                                </Link>
                            </button>
                        </div>

                }
                {/*拼团 已开团*/}
                {
                    info.is_baoming === 0 && info.group_status === 4 &&
                    <div className='btns-box'>
                        <a className='consult consult-s' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
                            <i className='iconfont iconerji'></i>
                            <span>课程咨询</span>
                        </a>
                        <div className='btn btn-l bg-E02E24' onClick={this.props.invitedFriends}>
                            邀请好友参团 {countdown} 后结束
                        </div>
                    </div>
                }

                {/*砍价*/}
                {
                    this.props.data && this.props.data.is_bargain &&
                    <div className='btns-box'>
                        <a className='consult consult-s' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
                            <i className='iconfont iconerji'></i>
                            <span>课程咨询</span>
                        </a>
                        <button className='btn btn-s bg-F4AAA7'>
                            <span>¥{info.price1}</span>
                            <span onClick={this.tobuy}>直接购买</span>
                        </button>
                        {
                            barInfo.bargain_status === 2 &&
                            <button className='btn btn-s bg-E02E24' onClick={this.toKanjia}>
                                我要砍价
                            </button>
                        }
                        {
                            (barInfo.bargain_status === 0 || barInfo.bargain_status === 1) &&
                            <button className='btn btn-s bg-E02E24'>
                                <span>¥{barInfo.amount}</span>
                                <span onClick={e => this.toCart(2)}>去支付</span>
                            </button>
                        }
                    </div>
                }

                {/*特殊课程*/}
                {
                    this.state.isbuy === 20 &&
                    <div className='btns-box'>
                        <a className='consult-l' href="https://q.url.cn/AB8aue?_type=wpa&qidian=true">
                            <i className='iconfont iconerji'></i>
                            <span>课程咨询</span>
                        </a>
                    </div>
                }


                {
                    this.state.isShowOverlay &&
                    <Overlay>
                        {/*引导关注公众号*/}
                        {
                            this.state.bargainStatus === 1 &&
                            <CancelBargain close={this.close} cancel={this.cancel}/>
                        }

                        <i onClick={this.close} className={'iconfont iconiconfront-2 bargain-close'}></i>
                    </Overlay>

                }
            </div>
        )
    }
}


function CancelBargain(props) {
    return (
        <div className='cancel-bargain'>
            <p className='top-img'><i className='iconfont icondanseshixintubiao-8'></i></p>
            <p className='tip-mess'>您已发起砍价，直接购买将清除已砍金额。直接购买可使用优惠券~</p>
            <div className="btns">
                <button onClick={props.close}>取消</button>
                <button onClick={props.cancel}>确定</button>
            </div>
        </div>
    )
}

export default connect(
    null,
    {getCourses}
)(BtnStatus)
