import React, {PureComponent} from 'react';
import './index.scss'
import {conf, start} from '../../api'
import {getQueryObj, linkToMiniApp, invokeMethod, parseUrl} from '../../../../common/utils';
import wxshare from '../../../../common/wxshare'
import wx from 'weixin-js-sdk';
import yaSDK from 'yoho-activity-sdk';
import config from '../../config';
import cookie from 'react-cookies';
import LazyLoad from 'react-lazy-load'
import {
    Link
} from 'react-router-dom'

import Resource from '../components/resource';
import BottomButton from '../components/bottom-button';

const {actId} = getQueryObj();

export default class wheelSurf extends PureComponent {
    constructor(props) {
        document.title ='大转盘';
        super(props);
        this.state = {
            initial: true,
            pending: false, // 抽奖中
            startEnd: false,
            isEnding: false, // 即将停止
            isLogin: false,

            conf: {
                loading: ''
            }
        };
        
        this.init();
    }

    init = async () => {
        let result = await conf({
            act_id: +actId
        });
        
        if (result.code === 200) {
            this.setState({
                conf: result.data.conf
            })
        }
    };

    componentDidMount = () => {
        window.addEventListener('scroll', this.handleScroll);
    };

    componentWillUnmount = () => {
        window.removeEventListener('scroll', this.handleScroll);
    };
    
    start = async () => {
        console.log('抽奖开始');
        let uid = cookie.load('app_uid') || getQueryObj().uid || 0;
        if(!uid || !parseInt(uid)){
            return;
        }

        let result = await start({
            actId,
            uid: uid,
            sessionKey: cookie.load('app_session_key') || getQueryObj().session_key || '',
            sessionType: cookie.load('app_client_type') || '',
            appVersion: cookie.load('app_version') || ''
        });

        if (result.code === 200) {
            this.setState({
                conf: result.data.conf
            })
        }
    };
    
    links = conf => {
        let links = [];
        
        if (conf.jump_btn_left_url) {
            links.push({
                url: conf.jump_btn_left_url,
                bg: conf.jump_btn_left_bg
            });
        }
        
        if (conf.jump_btn_middle_url) {
            links.push({
                url: conf.jump_btn_middle_url,
                bg: conf.jump_btn_middle_bg
            });
        }
        
        if (conf.jump_btn_right_url) {
            links.push({
                url: conf.jump_btn_right_url,
                bg: conf.jump_btn_right_bg
            });
        }

        return links;
    };

    render() {
        const {conf, isEnding, isLogin} = this.state;

        if (!conf.id) {
            return (
                <div className="home-wrap">
                    <img className="main-bg" src={this.state.conf.loading}/>
                </div>
            )
        }

        let links = this.links(conf);

        return (
            <div className="home-wrap">
                <img className="main-bg" src={conf.main_bg}/>
                {conf.rule_btn_bg ? (<Link to={`${config.routerPath}/rule.html`}><img className="rule-btn" src={conf.rule_btn_bg}/></Link>) : ''}
                {conf.share_btn_bg ? (<img className="share-btn" src={conf.share_btn_bg}/>): ''}
                <img className="wheel-bg" src={conf.wheel_bg}/>
                <img className="wheel-bg-surf-layer" src={conf.wheel_bg}/>
                <img onClick={()=>{this.start()}} className="start-btn-bg" src={conf.prize_btn_bg}/>
    
                <BottomButton links={links}/>
                <Resource code={conf.code || '11421760f4ea8b231c5b8269f4ff65bb'}/>

                {isEnding ? (<img className="prize-hit-bg" src={conf.win_prize_bg}/>) : ''}
                {isEnding ? (<img className="prize-hit-start-bg" src={conf.prize_btn_bg}/>) : ''}
            </div>
        )
    }
}