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

@observer
class FundsPanel extends React.Component {

  t = 0;

  componentDidMount() {
    sensorMdExpouse("PopupExpouse", { pageName: "守护人生活动-人生资金弹窗" });
    this.t = setTimeout(() => {
      this.clickNext();
    }, 3000);
  }

  componentWillUnmount() {
    clearTimeout(this.t);
  }

  clickNext = () => {
    sensorMdClick("PopupClick", { pageName: "守护人生活动-人生资金弹窗", buttonName: "去配置" });
    modalStore.closePop();
    store.changePage(PAGE_MAP.QUES_PAGE, {funds: this.props.popData.funds, settingParams: this.props.popData.settingParams});
  }

  clickClose = () => {
    sensorMdClick("PopupClick", { pageName: "守护人生活动-人生资金弹窗", buttonName: "关闭" });
    modalStore.closePop();
    store.changePage(PAGE_MAP.QUES_PAGE, {funds: this.props.popData.funds, settingParams: this.props.popData.settingParams});
  }

  render() {
    const {funds} = this.props.popData;

    // 当前题目
    return <div className="FundsPanel modal_center">
      <SvgaPlayer className="effect" src={RES_PATH + "svga/2输出弹窗氛围.svga"}/>
      <div className="bg"/>
      <div className="funds">{funds}万元</div>
      <Button className="next md10" onClick={this.clickNext}/>
      <Button className="close" onClick={this.clickClose}/>
    </div>;
  }
}

export default FundsPanel;
