'use strict';

import React from 'react';
import { observer } from 'mobx-react';
import './taskpop.less';
import API from '@src/api';
import { _asyncThrottle, _throttle, randomNum, windowJumpUrl } from '@src/utils/utils';
import store from '@src/store';
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 shareStore from '@src/store/share';
import { sensorMdClick, sensorMdExpouse } from '@src/utils/sensorMd';
import { Button } from '../Button';
import { miniGoUrl } from '@src/utils/share';

@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">
        <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;
