"use strict";

import React from "react";
import { observer } from "mobx-react";
import "./drawsucpop.less";
import { Button } from "../Button";
import { _throttle } from "@src/utils/utils";
import modalStore from "@src/store/modal";
import { sensorMdClick, sensorMdExpouse } from "@src/utils/sensorMd";
import { SvgaPlayer } from "@spark/svgaplayer";
import { RES_PATH } from "../../../sparkrc";

@observer
class Drawsucpop extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    sensorMdExpouse("PopupExpouse", { pageName: "守护人生活动-中奖弹窗" });
  }

  /** 进入【奖品】页 */
  jumpPrize = _throttle(() => {
    sensorMdClick("PopupClick", {
      pageName: "守护人生活动-中奖弹窗",
      buttonName: "开心收下",
    });
    modalStore.closePop();
    location.href = CFG.prize;
  });
  render() {
    const { optionName, optionImg } = this.props.popData?.prize || {};
    return (
      <div className="drawsucpop modal_center">
        <SvgaPlayer className="light" src={RES_PATH + "svga/pop.svga"} />
        <span className="title"></span>
        {/* <span className="leaves"></span> */}
        {/* <span className="bg"></span> */}
        <div className="prize_img" style={{ backgroundImage: `url(${optionImg})` }}></div>
        <span className="prize_name">{optionName}</span>
        <Button className="happy_btn md21" onClick={this.jumpPrize}></Button>
        <span className="tips">奖品可在首页 【奖品】 中查看</span>
        <span
          className="close"
          onClick={() => {
            sensorMdClick("PopupClick", { pageName: "守护人生活动-中奖弹窗", buttonName: "关闭" });
            modalStore.closePop();
          }}></span>
      </div>
    );
  }
}
export default Drawsucpop;
