<template>
  <!-- 玩游戏赚红包 -->
  <div class="hb_task">
    <div class="task_list_box">
      <!-- 背景 -->
      <i class="iconfont icon-baseline-close-px" @click="onCloseActive"></i>
      <img src="@/assets/image/hb/hb_bg.png" alt="" class="hb_bg" />

      <div class="task_box">
        <!-- 活动内容 -->
        <HbTaskList
          :taskInfo="taskInfo"
          :endTimeArr="endTimeArr"
          :userHbInfo="userHbInfo"
          @onGame="onGame"
          @onService="onService"
          @onReceive="onReceive"
          @onCash="onCash"
          @onShowDialog="onShowDialog"
        />
      </div>

      <!-- 活动说明 -->
      <div class="task_box tips">
        <HbTaskTips @onService="onService" />
      </div>
    </div>

    <!-- 活动弹窗 -->
    <HbDialog
      v-if="dialog"
      :dialog="dialog"
      :awardList="awardList"
      v-on="$listeners"
      @onShowDialog="onShowDialog"
      @onService="onService"
      @toDraw="toDraw"
      @onUseCash="onUseCash"
      @onSelectRole="onSelectRole"
    />
  </div>
</template>

<script>
import HbTaskList from "@/views/Active/Hb/HbTask/HbTaskList/HbTaskList"; // 活动列表
import HbTaskTips from "@/views/Active/Hb/HbTask/HbTaskTips/HbTaskTips"; // 活动说明
import HbDialog from "@/views/Active/Hb/HbDialog/HbDialog"; // 活动弹窗
import { mapActions, mapState } from "vuex";
export default {
  name: "HbTask",
  components: {
    HbTaskList,
    HbTaskTips,
    HbDialog,
  },
  inject: ["checkCode", "routeLink"],
  data() {
    return {
      /**
       * 弹窗组件
       * cashFailedTime: 提现失败-> 活动结束后24小时内领取
       * cashFailedAmount: 提现失败-> 红包提现需满1000元才可领取
       * cashSuccess: 提现成功 -> 请联系客服进行提现
       * receiveSuccess: 领取成功
       * luckDraw: 大转盘
       * cashFailedTimeOut: 活动过期
       * luckDrawAward:抽奖成功弹窗
       * bindRole: 绑定角色
       */
      dialog: "",
      showMenuService: false, // 是否显示联系客服
      endTimeArr: [], // 倒计时列表
      countDownTimer: null, // 倒计时定时器
      // 抽奖
      awardList: [
        {
          id: 1,
          name: "",
          img: require("@/assets/image/hb/luckDraw/2.png"),
        },
        {
          id: 2,
          name: "",
          img: require("@/assets/image/hb/luckDraw/4.png"),
        },
        {
          id: 3,
          name: "",
          img: require("@/assets/image/hb/luckDraw/1.png"),
        },
        {
          id: 4,
          name: "",
          img: require("@/assets/image/hb/luckDraw/3.png"),
        },

        {
          id: 5,
          name: "",
          img: require("@/assets/image/hb/luckDraw/0.png"),
        },
        {
          id: 6,
          name: "",
          img: require("@/assets/image/hb/luckDraw/1.png"),
        },
        {
          id: 7,
          name: "",
          img: require("@/assets/image/hb/luckDraw/4.png"),
        },
        {
          id: 8,
          name: "",
          img: require("@/assets/image/hb/luckDraw/1.png"),
        },
        {
          id: 9,
          name: "",
          img: require("@/assets/image/hb/luckDraw/0.png"),
        },
        {
          id: 10,
          name: "",
          img: require("@/assets/image/hb/luckDraw/3.png"),
        },
        {
          id: 11,
          name: "",
          img: require("@/assets/image/hb/luckDraw/2.png"),
        },
        {
          id: 12,
          name: "",
          img: require("@/assets/image/hb/luckDraw/1.png"),
        },
      ],
      canCash: true, // 是否可领取优惠券
    };
  },
  props: {},
  computed: {
    ...mapState(["gameRoleInfo", "appid", "hb", "couponList"]),
    // 红包活动 用户 游戏角色信息
    userHbInfo() {
      return this.$store.state.hb.userHbInfo;
    },
    // 红包活动 任务列表
    taskInfo() {
      return this.$store.state.hb.taskInfo;
    },
  },
  watch: {
    // 红包活动 用户 游戏角色信息 监听
    userHbInfo: {
      handler(newValue) {
        if (newValue && newValue.role_id) {
          this.onShowDialog("");
        }
      },
      deep: true,
      immediate: true,
    },
    // 红包活动 任务列表 监听
    taskInfo: {
      handler(newValue) {
        // 更新倒计时数组
        const endTimeArr = this.onGetTime(newValue);
        // 倒计时
        this.countDown(endTimeArr);
      },
      deep: true,
      immediate: true,
    },
    // 倒计时
    endTimeArr: {
      handler(newValue) {},
      deep: true,
      immediate: true,
    },
    // 折扣券列表
    couponList: {
      handler(newValue) {},
      deep: true,
      immediate: true,
    },
    // 用户角色信息
    gameRoleInfo: {
      handler(newValue) {},
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {
    // 倒计时数组
    const endTimeArr = this.onGetTime(this.taskInfo);
    // 倒计时
    this.countDown(endTimeArr);
  },
  beforeDestroy() {
    clearTimeout(this.countDownTimer);
  },
  methods: {
    ...mapActions([
      "userHbInfoAction",
      "taskInfoAction",
      "myAwardListAction",
      "couponListAction",
      "showServiceInlineAction",
      "gameRoleInfoAction",
    ]),

    // 弹窗控制
    onShowDialog(dialog) {
      this.dialog = dialog;
    },

    // 关闭当前
    onCloseActive() {
      this.$emit("onCloseActive");
    },

    // 联系客服
    onService() {
      //   this.showMenuService = true;
      //   this.$utils.onQQService(this);
      this.showServiceInlineAction(true);
    },

    // 联系客服
    onShowControl(onShowControl) {
      const { showMenuBox } = onShowControl;
      this.showMenuService = !showMenuBox;
    },

    // 提现
    onCash() {
      // 如果没有选择角色 return
      if (!this.gameRoleInfo) {
        this.$toast.text("请先绑定角色!");
        return;
      }

      const nowDate = new Date().getTime();
      const { start_time } = this.hb.userHbInfo;
      //   this.onShowDialog("cashFailedAmount");
      //   return;

      //  活动结束后 24小时内领取 活动七天
      if (
        nowDate <
        new Date(start_time.replace(/\-/g, "/")).getTime() +
          7 * 24 * 60 * 60 * 1000
      ) {
        this.onShowDialog("cashFailedTime");
        return;
      }

      // 活动结束未满 1000 元
      if (this.userHbInfo.amount < 1000) {
        this.onShowDialog("cashFailedAmount");
        return;
      }

      // 活动结束 展示活动结束
      if (
        nowDate <
        new Date(start_time.replace(/\-/g, "/")).getTime() +
          8 * 24 * 60 * 60 * 1000
      ) {
        this.onShowDialog("cashFailedTimeOut");
        return;
      }

      // 活动结束 满 1000 元
      this.onShowDialog("cashSuccess");
    },

    // 去完成
    onGame() {
      this.onCloseActive();
    },

    // 领取红包按钮
    onReceive(task) {
      // 请求接口 完成任务
      const { appid } = this;
      const { task_id } = task;
      const { server_id, role_id } = this.gameRoleInfo;
      this.$api
        .hbCompleteTask({ app_id: appid, server_id, role_id, task_id })
        .then((res) => {
          // 完成任务之后, 请求任务列表数据 请求用户游戏角色信息数据
          this.checkCode(res);
          const { code, data, msg } = res.data;
          // 错误
          if (code) {
            return;
          }
          // 成功
          this.onShowDialog("receiveSuccess");
          this.getUserHbInfo();
          this.getHbTask();
        });
    },

    // 获取hb活动 游戏内玩家信息
    getUserHbInfo() {
      this.userHbInfoAction({
        arg: this.gameRoleInfo,
        checkCode: this.checkCode,
        appid: this.appid,
      });
    },

    // 获取 红包 任务列表
    getHbTask() {
      this.taskInfoAction({
        arg: this.gameRoleInfo,
        checkCode: this.checkCode,
        appid: this.appid,
      });
    },

    // 获取任务倒计时
    onGetTime(taskInfo) {
      //  获取所有的任务结束时间 数组
      const endTimeArr = [];
      taskInfo.map((ele, index) => {
        const endTime = new Date(ele.end_time.replace(/\-/g, "/")).getTime();
        endTimeArr.push(endTime);
      });
      return endTimeArr;
    },

    // 倒计时
    countDown(timeArr) {
      const endTimeArr = [];
      clearTimeout(this.countDownTimer);
      this.countDownTimer = setTimeout(() => {
        timeArr.map((ele, index) => {
          // 1. 获取现在时间
          const nowDate = new Date().getTime();
          // 2.1 比较 如果活动结束 return
          if (ele < nowDate) {
            endTimeArr[index] = "00:00:00";
            return;
          }

          // 2.2  活动没结束 倒计时
          const timeDetail = this.$utils.countDown(nowDate, ele);
          const { hour, minute, second } = timeDetail;
          endTimeArr[index] = `${hour}:${minute}:${second}`;
        });
        this.endTimeArr = endTimeArr;
        // 再次执行
        this.countDown(timeArr);
      }, 1000);
    },

    // 抽奖
    toDraw() {
      setTimeout(() => {
        const awardList = [
          {
            id: 5,
            name: "",
            img: require("@/assets/image/hb/luckDraw/0.png"),
          },
        ];
        this.myAwardListAction(awardList);
      }, 2000);
    },

    // 领取折扣券
    onUseCash() {
      if (this.couponList.length) {
        this.$toast.text("您已领取该优惠券");
        // 关闭当前 打开鸿币
        this.onShowDialog("");
        // 打开鸿币
        this.$emit("onShowControl", { showMenuPay: true });
        return;
      }
      // 防抖
      if (!this.canCash) {
        return;
      }
      const { appid } = this;
      const { server_id, role_id } = this.gameRoleInfo;
      this.canCash = false;
      // 领取折扣券接口
      this.$api
        .hbDrawCoupon({
          app_id: appid,
          server_id,
          role_id,
        })
        .then((res) => {
          this.canCash = true;
          this.checkCode(res);
          const { code, data, msg } = res.data;
          // 错误
          if (code) {
            return;
          }
          this.$toast.text("领取成功, 前往使用");

          // 关闭当前 打开鸿币页面
          this.routeLink("HbRecharge");
          // 更新优惠券列表
          this.onGetCouponList();
        });
    },

    // 获取优惠券列表
    onGetCouponList() {
      const { appid, checkCode } = this;
      const { server_id, role_id } = this.gameRoleInfo;
      this.couponListAction({ appid, server_id, role_id, checkCode });
    },

    // 确认绑定角色
    onSelectRole(roleInfo) {
      const { appid } = this;
      // 更新当前角色
      this.gameRoleInfoAction(roleInfo);
      // 2. 更新任务列表 用户任务信息 更新用户优惠券列表
      this.userHbInfoAction({
        arg: { ...roleInfo },
        appid,
        checkCode: this.checkCode,
      });
      this.taskInfoAction({ ...roleInfo, appid });
      this.onGetCouponList();
      // 3. 活动的绑定按钮隐藏 展示角色信息 在userHbInfo由内容之后更新
    },
  },
};
</script>

<style lang='less' scoped>
.hb_task {
  .icon-baseline-close-px {
    margin-right: 10 / @rem;
    position: fixed;
    top: 10 / @rem;
    right: 10 / @rem;
    font-size: 50 / @rem;
    color: #fff;
    cursor: pointer;
  }

  .task_list_box {
    background-color: #df354f;
    height: 100%;

    img {
      width: 100%;
    }

    .task_box {
      width: 90%;
      margin: 0 auto;
      padding: 20 / @rem;
      position: relative;
      top: -50 / @rem;
      z-index: 5;
      border-radius: 20px;
      background-color: #fff;

      &.tips {
        margin-top: 100 / @rem;
      }
    }
  }

  .menu_service {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 6;
  }
}

// 正常横屏样式
@media all and (orientation: landscape),
  /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
  .hb_task {
    .icon-baseline-close-px {
      margin-right: 5 / @rem;
      top: 5 / @rem;
      right: 5 / @rem;
      font-size: 25 / @rem;
    }

    .task_list_box {
      //   width: 52%;
      margin: 0 auto;

      img {
        width: 100%;
      }

      .task_box {
        width: 60%;
        padding: 10 / @rem;
        top: -75 / @rem;

        &.tips {
          margin-top: 50 / @rem;
        }
      }
    }
  }
}

// ipad 横屏
@media /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px),
  /**ipad伪横屏 */ all and (orientation: landscape) and (min-width: 800px) and (min-height: 600px),
  all and (min-device-aspect-ratio: 3/4) and (max-device-aspect-ratio: 4/3),
  all and (device-aspect-ratio: 4/3) {
  .hb_task {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    font-size: 12 / @rem;

    .icon-baseline-close-px {
      position: absolute;
      top: 5 / @rem;
      right: 5 / @rem;
      font-size: 25 / @rem;
    }

    .task_list_box {
      width: 400 / @rem;
      height: 600 / @rem;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -300 / @rem;
      margin-left: -200 / @rem;
      border-radius: 20px;
      overflow-y: auto;

      img {
        width: 100%;
      }

      .task_box {
        width: 90%;
        padding: 10 / @rem;
        top: -25 / @rem;

        &.tips {
          margin-top: 50 / @rem;
        }
      }
    }
  }
}
</style>