// 核心库
import React, { Component } from "react";
import { connect } from "dva";
import { withRouter } from "dva/router";
import QRCode from "qrcode";
import config from "../../config";

class GuideCanvas extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }
  componentDidMount() {
    QRCode.toCanvas(
      config.guideSeverHost,
      { errorCorrectionLevel: "L", width: 140 },
      function (err, canvas) {
        if (err) throw err;
        console.log("1111111");
        let container = document.getElementById("canvas1");
        if (container) {
          console.log("2222222");
          try {
            container.appendChild(canvas);
          } catch (e) {}
        }
      }
    );
    QRCode.toCanvas(
      config.guideH5Host,
      { errorCorrectionLevel: "L", width: 140 },
      function (err, canvas) {
        if (err) throw err;
        let container1 = document.getElementById("canvas2");
        console.log(container1, "container");
        if (container1) {
          console.log("3333333333");
          try {
            console.log("444444444");
            container1.appendChild(canvas);
          } catch (e) {}
        }
      }
    );
  }

  render() {
    return (
      <React.Fragment>
        <div style={{ display: "flex", flexDirection: "row", margin: "20px" }}>
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              marginRight: "30px",
            }}
          >
            {/* <QRCode
              value={config.guideSeverHost}
              size={140}
            /> */}
            <div id="canvas1" ></div>
            <b>APP下载</b>
          </div>
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
            }}
          >
            {/* <QRCode
              value={config.guideH5Host}
              size={140}
            /> */}
            <div id="canvas2"></div>
            <b>手机登录</b>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default withRouter(connect(({ login }) => ({ login }))(GuideCanvas));
