/*
 * @Description: 这里输入文件功能
 * @Author: zhoupeng
 * @Date: 2020-05-14 16:49:16
 * @LastEditTime: 2020-05-22 15:23:27
 */

import React, { Component } from 'react';
import { connect } from 'react-redux';
import DocumentTitle from 'react-document-title';
import html2canvas from 'html2canvas';
import { Toast } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.less';
import styles from './index.less';
import router from 'umi/router';
import PlayMusic from '../components/playMusic/index';
import { onPlay, getPlayFlag, setImg } from '../common/common';

import img from '../assets/share/icon01.jpg';

@connect(() => ({}))
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      playFlag: getPlayFlag(),
      imgUri: null,
      schoolDetail: {},
      wechatNiceName: '',
    };
  }
  componentWillMount = () => {};
  componentDidMount = () => {
    this.initData();
  };

  initData = () => {
    Toast.loading('加载中', 0);
    const detailStr = window.sessionStorage.getItem('selectSchool');
    const schoolDetail = JSON.parse(detailStr);
    const niceName = window.sessionStorage.getItem('niceName');
    this.setState({
      schoolDetail,
      wechatNiceName: niceName,
    });
  };

  onload = () => {
    const _this = this;
    setTimeout(function() {
      _this.share();
      Toast.hide();
    }, 1000);
  };

  //生成图片分享
  share = () => {
    const body = document.getElementById('body');
    const newCanvas = document.createElement('canvas');
    const domWidth = body.offsetWidth;
    const domHeight = body.offsetHeight;
    const scale = 2;
    newCanvas.width = domWidth * scale;
    newCanvas.height = domHeight * scale;
    const _this = this;
    html2canvas(body, {
      canvas: newCanvas,
      scale,
      x: 0,
      y: 0,
      scrollX: 0,
      scrollY: 0,
      allowTaint: false,
      useCORS: true,
    }).then(canvas => {
      const imgUri = canvas.toDataURL('image/png');
      _this.setState({
        imgUri,
        flag: true,
      });
    });
  };
  render() {
    const { playFlag, imgUri, wechatNiceName, schoolDetail } = this.state;
    return (
      <DocumentTitle title="校宠开饭啦">
        <div className={styles.body_c}>
          <PlayMusic
            play={playFlag}
            onPlay={() => {
              onPlay(playFlag, flag => {
                this.setState({
                  playFlag: flag,
                });
              });
            }}
          ></PlayMusic>
          <div id="body" className={styles.body}>
            <img className={styles.body_bg} src={img} onLoad={this.onload} alt="bg" />
            <div className={styles.top}>
              <span></span>
              <span>我刚刚请</span>
              <span>{`${schoolDetail && schoolDetail.schoolName ? schoolDetail.schoolName : ''}的${
                schoolDetail && schoolDetail.catName ? schoolDetail.catName : '校宠'
              }吃了顿饭！`}</span>
            </div>
            <img
              src={schoolDetail && schoolDetail.photo ? setImg(schoolDetail.photo) : ''}
              alt="icon"
            />
          </div>
          <img className={styles.share} src={imgUri ? imgUri : null} alt="分享"></img>
        </div>
      </DocumentTitle>
    );
  }
}

export default Index;