"use strict";

import React from "react";
import { observer } from "mobx-react";
import "./taskpop.less";
import API from "@src/api";
import { _asyncThrottle, _throttle, windowJumpUrl } from "@src/utils/utils";
import { unwatchPageVisibility, watchPageVisibility } from "@spark/utils";
import { Toast } from "@spark/ui";
import { TASK_CODE } from "@src/utils/constants";
import modalStore from "@src/store/modal";
import { sensorMdClick, sensorMdExpouse } from "@src/utils/sensorMd";
import { Button } from "../Button";
import { miniGoUrl } from "@src/utils/share";
import { SvgaPlayer } from "@spark/svgaplayer";
import { RES_PATH } from "../../../sparkrc";

@observer
class Taskpop extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      taskInfo: [], // 任务列表
    };
  }
  async componentDidMount() {
    sensorMdExpouse("PopupExpouse", { pageName: "任务弹窗" });
    this.getTaskList();
  }

  componentWillUnmount() {
    unwatchPageVisibility(this.pageVChange);
  }

  /** 页面显示 */
  pageVChange = (visible) => {
    console.log("页面", visible ? "可见" : "不可见");
    if (visible) {
      this.getTaskList();
    }
  };

  /**
   * 获取任务列表数据
   */
  getTaskList = async () => {
    const { success, data } = await API.queryTasks();
    if (success && data) {
      this.setState({
        taskInfo: data || {},
      });
    }
  };

  // 按钮点击事件
  completeHandle = _throttle(async (item) => {
    const { code, jumpUrl } = item || {};
    if (code.indexOf(TASK_CODE.THIRD_RETAIN) > -1) {
      sensorMdClick("PopupClick", { pageName: "任务弹窗点击", buttonName: "留资咨询" });
      setTimeout(() => {
        windowJumpUrl(jumpUrl);
      }, 300);
    } else if (code.indexOf(TASK_CODE.BROWSE_PRODUCT) > -1) {
      sensorMdClick("PopupClick", { pageName: "任务弹窗点击", buttonName: "浏览产品" });
      modalStore.pushPop("LongImgPop", {
        imgUrl: jumpUrl,
        taskSucCb: async () => {
          const param = { taskCode: code };
          await API.doCompleted(param);
        },
      });
    } else if (code.indexOf(TASK_CODE.SIGN) > -1) {
      sensorMdClick("PopupClick", { pageName: "任务弹窗点击", buttonName: "每日签到" });
    } else if (code.indexOf(TASK_CODE.BROWSE_MINI) > -1) {
      await API.doCompleted({ taskCode: code });
      watchPageVisibility(this.pageVChange);
      if (jumpUrl.indexOf("http") === 0) {
        setTimeout(() => {
          windowJumpUrl(jumpUrl);
        }, 300);
      } else {
        miniGoUrl(jumpUrl);
      }
    } else if (code.indexOf(TASK_CODE.BROWSE_VIDEO) > -1) {
      sensorMdClick("PopupClick", { pageName: "任务弹窗点击", buttonName: "浏览视频" });
      modalStore.pushPop("Videopop", {
        url: jumpUrl,
        taskSucCb: async () => {
          const param = { taskCode: code };
          await API.doCompleted(param);
        },
      });
    }
  });

  /** 任务领奖 */
  receiveHandle = _asyncThrottle(async (task) => {
    const { success, data } = await API.sendPrize({
      taskId: task.id,
      taskCode: task.code,
      prizePendingCode: task?.prizePendingCode,
    });
    if (success) {
      data?.options?.[0]?.sendCount && Toast(`恭喜您领取${data.options[0].sendCount}次抽奖次数`);
      this.getTaskList();
    }
  });

  /* 关闭弹窗*/
  closeHandle = () => {
    sensorMdClick("PopupClick", { pageName: "任务弹窗点击", buttonName: "关闭" });
    this.props.popData?.refresh && this.props.popData?.refresh();
    modalStore.closePop();
  };

  render() {
    const { taskInfo } = this.state;
    return (
      <div className="taskpop">
        <SvgaPlayer className="task_svga" src={RES_PATH + "svga/pop.svga"} />
        <span className="bg"></span>
        <div className="task_list">
          {taskInfo?.item?.map((item, index) => (
            <div className="task_item" key={index}>
              <span className="task_item_bg"></span>
              <img className="task_icon" src={item.icon} />
              <div className="task_title">{item.title}</div>
              <span className="task_subtitle">{item.subTitle}</span>
              {/* taskStatus  任务状态      * 0 去完成，任务完成次数未达到上限      * 1 待领奖      * 2 已完成，任务完成次数达到上限 */}
              {item.taskStatus === 0 && (
                <Button className="task_btn red_bg" onClick={() => this.completeHandle(item)}>
                  去完成
                </Button>
              )}
              {item.taskStatus === 1 && (
                <Button className="task_btn yellow_bg" onClick={() => this.receiveHandle(item)}>
                  待领取
                </Button>
              )}
              {item.taskStatus === 2 && <Button className="task_btn grey_bg">已完成</Button>}
            </div>
          ))}
        </div>
        <Button className="close" onClick={this.closeHandle}></Button>
      </div>
    );
  }
}
export default Taskpop;
