import React, { Component } from 'react';
import { browser, getCookie } from 'cbkfe-utils';
import './style';

import {
    incJoined,
} from './action';

class Template extends Component {
    state = {
        isLoad: false,
        errorMessage: '',
        title: '',             // 商品标题
    };
    componentDidMount() {
        if (!browser.parseUA.isApp && this.props.src && !this.props.activeCodeStatus) {
            this.addListner();
        }
    }

    addListner = () => {
        let { randomCode, src } = this.props, qrcodeDOM = this.refs.qrcode,
            key = 'USERLONGTOUCH', keyName = 'qr_' + encodeURIComponent(src),
            joinedUUId = getCookie('_UUID') || '',
            localTouchObj = JSON.parse(localStorage.getItem(key)) || {}, touchFlag = false;

        if (localTouchObj[keyName] && localTouchObj[keyName].num >= 5) {
            this.setState({
                isExpire: true
            });
        } else if (qrcodeDOM) {
            qrcodeDOM.addEventListener('touchstart', () => {
                touchFlag = false;
                setTimeout(() => {
                    if (!touchFlag) {
                        if (localTouchObj[keyName] && localTouchObj[keyName].num < 5) { // 触发未超过5次
                            localTouchObj[keyName] = { num: localTouchObj[keyName].num + 1 };
                            localStorage.setItem(key, JSON.stringify(localTouchObj));
                            if (localTouchObj[keyName].num === 5) {
                                this.setState({
                                    isExpire: true
                                });
                            }
                        } else if (!localTouchObj[keyName]) { // 第一次触发
                            this.postIncJoined(randomCode, joinedUUId, () => {
                                localTouchObj[keyName] = { num: 1 };
                                localStorage.setItem(key, JSON.stringify(localTouchObj));
                            });
                        }
                    }
                }, 700);
            });
            qrcodeDOM.addEventListener('touchend', () => {
                // 提前松开了手指
                touchFlag = true;
            });
        }
    };

    // 模拟群人数 + 1
    postIncJoined = (randomCode, joinedUUId, fn) => {
        incJoined({
            randomCode: randomCode,
            joinedUUId: joinedUUId
        }).then(fn);
    };
    render() {
        let { src, className, onClick } = this.props;
        let { isExpire } = this.state;
        return (
            <img src={src} ref="qrcode" className={`${className} ${isExpire ? 'limit-img--disabled' : ''}`} onClick={onClick} />
        );
    }
}
export default Template;