import React, { Component } from "react"
import "./index.scss"
import { http } from "src/utils"
import QRCode from "qrcode"
import { connect } from "react-redux"
import { Toast } from "antd-mobile"

class FollowQRcode extends Component {
  constructor(props) {
    super(props)
    this.state = {
      src: "",
      codeSrc: "",
    }
  }

  componentDidMount() {
    const _this = this
    let uid = this.props && this.props.user && this.props.user.data.uid
    http
      .get(`${API["base-api"]}/wx/user_temporary_qrcode/${uid}`)
      .then((res) => {
        if (res.data.errno === 0) {
          _this.setState({
            src: res.data.data.url,
          })
          return new Promise((resolve) => {
            QRCode.toDataURL(_this.state.src, {}, function (err, url) {
              _this.setState({
                codeSrc: url,
              })
            })
            resolve()
          })
        } else {
          Toast.info(res.data.msg, 2)
        }
      })
  }

  render() {
    return (
      <div className="followQRcode-box">
        <div className="followQRcode">
          <div className="content">
            <p className="title">关注公众号</p>
            <p className="desc">
              <span>1</span>
              有人通过您分享的链接领取红包后，会第一时间通过微信服务号通知您。
            </p>
            <p className="desc">
              <span>2</span>请用个人微信扫描，关注服务号后可提现红包到微信零钱。
            </p>
            <img src={this.state.codeSrc} alt="" />
            <p className="tip">长按二维码保存到相册</p>
          </div>
          <div className="close">
            <i
              className="iconfont iconiconfront-2"
              onClick={this.props.toClose}
            ></i>
          </div>
        </div>
      </div>
    )
  }
}

export default connect((state) => ({
  user: state.user,
}))(FollowQRcode)