import React, { Component } from 'react';
import { connect } from 'react-redux';
import DocumentTitle from 'react-document-title';
import 'antd-mobile/dist/antd-mobile.less';
import styles from './index.less';
import router from 'umi/router';
import wx from 'weixin-js-sdk';
import PlayMusic from '../components/playMusic/index';
import Barrage from '../components/barrage/index';
import { onPlay, getPlayFlag, wechatGetOpenId, wechatAuthorization } from '../common/common';
import { sysMobileNum } from '../../../utils/helper';

import icon01 from '../assets/loading/icon01.gif';
import { Toast } from 'antd-mobile';

//刷新URL
//测试

@connect(() => ({}))
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pageFlag: false,
      loadFlag: false,
      loadNum: 0,
      popFlag: false,
      playFlag: getPlayFlag(),
    };
  }
  componentWillMount = () => {};
  componentDidMount = () => {
    this.initWechat();
  };

  //进行微信授权 和 获取 openId
  initWechat = () => {
    var modalFlag = window.localStorage.getItem('modalFlag');
    var openId = window.localStorage.getItem('openId');

    wechatAuthorization();
    if (!openId) {
      window.localStorage.setItem('openId', sysMobileNum);
    }
    this.loading();
    this.popFlag(!modalFlag);
  };

  loading = () => {
    this.setState({
      pageFlag: true,
      loadFlag: true,
    });
  };

  onload = () => {
    const _this = this;
    const key = setInterval(function() {
      const { loadNum } = _this.state;
      if (loadNum < 100) {
        _this.setState({
          loadNum: loadNum + 1,
        });
      } else {
        _this.setState({
          loadFlag: false,
        });
        clearInterval(key);
      }
    }, 30);
  };

  popFlag = flag => {
    if (flag) {
      window.localStorage.setItem('modalFlag', true);
    }
    this.setState({
      popFlag: flag,
    });
  };

  render() {
    const { pageFlag, loadFlag, loadNum, popFlag, playFlag } = this.state;
    return (
      <DocumentTitle title="校宠开饭啦">
        <div>
          {loadFlag ? (
            <div className={styles.loading}>
              <img className={styles.icon} src={icon01} onLoad={this.onload} alt="icon" />
              <div className={styles.t}></div>
              <div className={styles.l_n}>{loadNum}%</div>
              <div className={styles.l}>
                <div className={styles.l_c}>
                  <div className={styles.l_s} style={{ width: `${loadNum}%` }}></div>
                </div>
              </div>
            </div>
          ) : null}
          {pageFlag ? (
            <div className={styles.body}>
              <PlayMusic
                play={playFlag}
                onPlay={() => {
                  onPlay(playFlag, flag => {
                    this.setState({
                      playFlag: flag,
                    });
                  });
                }}
              ></PlayMusic>
              <div>
                <Barrage title="快过来“宠朕”" />
                <Barrage title="用爱“宠朕”" />
                <Barrage title="上“宠朕”学养喵" />
                <Barrage title="蓝氏“小银盒” 鲜得过分" />
                <Barrage title="猫餐“小银盒” 奥利给" />
                <Barrage title="蓝氏猫粮 顿顿开“新”" />
                <Barrage title="高级校猫 持证上岗" />
                <Barrage title="有证 做被嫉妒的小猫咪" />
                <Barrage title="给我办证 与我独处一室" />
                <Barrage title="朕有护照 是合法入境喵" />
              </div>
              <div
                className={styles.btn}
                onClick={() => {
                  Toast.info(
                    '此活动已结束，感谢您对活动的支持，您可以欢迎关注宠爱星球Club公众号，更多精彩活动等您参与！',
                    3,
                  );
                }}
              ></div>
              <div
                className={styles.btn_b}
                onClick={() => {
                  this.popFlag(true);
                }}
              ></div>
            </div>
          ) : null}
          {popFlag ? (
            <div className={styles.pop_w}>
              <div className={styles.pop_c}>
                <div
                  className={styles.pop_closed}
                  onClick={() => {
                    this.popFlag(false);
                  }}
                ></div>
              </div>
            </div>
          ) : null}
        </div>
      </DocumentTitle>
    );
  }
}

export default Index;