import React, {Component} from 'react'
import './index.scss'
import {getParam} from "@/utils"
import {connect} from "react-redux"
import {Link} from "react-router-dom"
import {Flex} from 'antd-mobile'


class Group extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isShowMore: false,
            alreadyIn: false,
            pdd_price: 0,
            number: 0,
            data: {},
            countdown: props.countdown,
            now_groupon_list: [],
        }
    }

    // 查看更多
    getMore = () => {
        this.setState({
            isShowMore: true
        })
    }

    // 关闭更多窗口
    closeMore = () => {
        this.setState({
            isShowMore: false
        })
    }

    toPay = (pdd_order_id) => {
        const courseInfo = this.props.courseInfo.courseInfo.course_info;
        if(courseInfo.group_status === 3) {
            this.props.history.push(`/order?id=${getParam('id')}&&groupon_code=${pdd_order_id}`);
        }else{
            this.setState({
                isShowMore: false,
                alreadyIn: true
            });
        }
    }

    invitedFriends = () => {
        this.setState({
            isShowMore: false,
            alreadyIn: false,
        });
        const {pdd_price, number, data} = this.state;
        if(browser.isWeixin) {
            let share = this.state.share;
            this.setState({
                share: !share,
            });
            let shareData = {
                title: `【仅剩${number}个名额】我${pdd_price}元拼了《${data.course_title}》`,
                desc: data.course_title,                               //  分享描述
                link: location.origin + `/detail??id=${data.course_id}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: data.image_name, // 分享图标
            };
            http.post(`${api['pay-api']}/m/sale/signature`).then(res => {
                const {nonce_str, signature, timestamp} = res.data;
                wx.config({
                    "debug": false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    "appId": 'wx23dac6775ac82877', // 必填，公众号的唯一标识
                    "timestamp": timestamp, // 必填，生成签名的时间戳
                    "nonceStr": nonce_str, // 必填，生成签名的随机串
                    "signature": signature, // 必填，签名
                    jsApiList: [
                        'hideMenuItems',
                        'showMenuItems',
                        'updateAppMessageShareData',
                        'updateTimelineShareData',
                        'onMenuShareWeibo',
                        'onMenuShareAppMessage',
                    ], // 必填，需要使用的JS接口列表
                });
            });
            wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
                wx.hideAllNonBaseMenuItem();
                wx.showMenuItems({
                    menuList: ['menuItem:share:appMessage' , 'menuItem:share:timeline'] // 要显示的菜单项，所有menu项见附录3
                  });
                wx.updateAppMessageShareData({ 
                    ...shareData,
                    success: function () {
                      // 设置成功
                    }
                })
                wx.updateTimelineShareData({
                    ...shareData,
                    success: function () {
                      // 设置成功
                    }
                })
            });
        }else{
            Toast.info('请在微信中使用分享功能！', 2);
        }
    }

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

    componentDidMount() {
        if (this.props.courseInfo && this.props.courseInfo.courseInfo && this.props.courseInfo.courseInfo.course_info && this.props.courseInfo.courseInfo.course_info.pdd_group_info) {
            let now_groupon_list = this.props.courseInfo.courseInfo.course_info.pdd_group_info.now_groupon_list;
            if(now_groupon_list && now_groupon_list.length > 0) {
                setInterval(() => {
                    now_groupon_list.map(item=>{
                        item.end_time -= 1;
                        return item;
                    });
                    this.setState({
                        now_groupon_list,
                    })
                }, 1000);
            }
        }
    }

    hideMbc = () => {
        this.setState({
            alreadyIn: false
        });
    }

    formatTimeByMillisecond = (millisecond) => {
        let date = millisecond * 1000,
                hours = 0,
                minutes = 0,
                seconds = 0;
                    date -= 1000
                    hours = `${parseInt(date / (60 * 60 * 1000))}`.padStart(2, 0);
                    minutes = `${parseInt((date - hours * 3600000) / 60000)}`.padStart(2, 0);
                    seconds = `${parseInt((date - hours * 3600000 - minutes * 60000 ) / 1000)}`.padStart(2, 0);
                        return `${hours}:${minutes}:${seconds}`;
    }

    render() {
        const {alreadyIn, countdown, now_groupon_list} = this.state;
        let groupInfo = '',groupon_member = '', group_status = -1, groupSuccessMbc = null;
        if (this.props.courseInfo && this.props.courseInfo.courseInfo && this.props.courseInfo.courseInfo.course_info) {
            groupInfo = this.props.courseInfo.courseInfo.course_info.pdd_group_info;
            groupon_member = groupInfo.groupon_member;
            group_status = this.props.courseInfo.courseInfo.course_info.group_status;
        }
        if(group_status === 4) {
            if(groupon_member.member) {
                const {number} = groupon_member;
                let ary=[],num = number;
                while(num != 0) {
                    ary.push(num);
                    num--;
                }
                let groupTip = (<div className='group-user-list'>
                    <Flex justify='center' className='imgList'>
                        {
                            groupon_member.member.map(item => {
                                return (
                                    <div className='imgContainer' key={Math.random()}>
                                        <img className='imgname' src={item.avatar} alt='' />
                                        {
                                            item.user_type === 1 ? (
                                                <div className='leaderFlag'>
                                                    <span>团长</span>
                                                </div>
                                            ) : null
                                        }
                                    </div>);
                            })
                        }
                        {
                            ary.map(item => {
                                return (<div className='imgContainer' key={Math.random()}>
                                    <div className='imgname'>
                                        <i className='iconfont iconwode-xianxing no-body'></i>
                                    </div>
                                </div>)
                            })
                        }
                    </Flex>
                </div>);
                groupSuccessMbc = <div className='groupSuccessMbc' onClick={this.hideMbc}>
                        <div className='content'>
                            <p>你已参团</p>
                            {groupTip}
                            <div className='group-btn' onClick={this.invitedFriends}>邀请好友参团 {countdown} 后结束</div>
                            <p className='dec'>分享到3个群后，成团率高达98%</p>
                        </div>
                    </div>;
            }

        }
        
        return (
            <div className='group-box'>
                <div className="group-title">
                    <span>{groupInfo.now_groupon_total}人正在开团，可直接参与</span>
                    <span className='more' onClick={this.getMore}>
                        查看更多
                        <i className='iconfont iconiconfront-70'></i>
                    </span>

                </div>
                <ul className="group-list">
                    {
                        groupInfo.now_groupon_list && groupInfo.now_groupon_list.length > 0 && groupInfo.now_groupon_list.map((item, index) => {
                            return (
                                <li key={index} className='group-item'>
                                    <img className='avatar' src={item.avatar} alt=""/>
                                    <div className='user-name text-overflow-one'>
                                        {item.user_name}
                                    </div>
                                    <div className='group-status'>
                                        <p>还差<span className='red'>{item.number}人</span>拼成</p>
                                        <p>剩余 {this.formatTimeByMillisecond(item.end_time)}</p>
                                    </div>
                                    <span onClick={()=>{this.toPay(item.pdd_order_id)}} className='topay'>去参团</span>
                                </li>
                            )
                        })
                    }
                </ul>
                <div className="group-dec">
                    <span>
                        <i className='iconfont iconiconfront-1'></i>
                        ·好友参团  ·人满成交  ·人不满退款
                    </span>
                    <span className='allNum'>{`累计${groupInfo.person_num}人成团`}</span>
                </div>
                {
                    (alreadyIn && group_status === 4) && (
                        <>
                            {groupSuccessMbc}
                        </>
                    )
                    
                }
                {/*更多*/}
                {
                    this.state.isShowMore &&
                    <div className="moreMbc">
                        <div className="content">
                            <div className="title-box">
                                正在拼团
                            </div>
                            <ul className='more-group-list'>
                                {
                                    groupInfo.now_groupon_list && groupInfo.now_groupon_list.length > 0 && groupInfo.now_groupon_list.map((item, index) => {
                                        return (
                                            <li key={index} className='group-item'>
                                                <img className='avatar' src={item.avatar} alt=""/>
                                                <div className='user-name'>
                                                    <p className='name text-overflow-one'>{item.user_name}</p>
                                                    <p className='time'>剩余 {this.formatTimeByMillisecond(item.end_time)}</p>
                                                </div>
                                                <p className='group-status'>还差{item.number}人</p>
                                                <span onClick={()=>{this.toPay(item.pdd_order_id)}} className='topay'>去参团</span>
                                            </li>
                                        )
                                    })
                                }
                            </ul>
                            <div className='more-group-dec'>
                                仅显示10个正在开团的人
                            </div>
                            <i onClick={this.closeMore} className={'iconfont iconiconfront-2 close'}></i>
                        </div>
                        
                    </div>
                }

            </div>
        )
    }
}

export default connect(
    state => ({courseInfo: state}),
    null
)(Group)
