<template>
  <!-- 红包 -> 开屏红包  玩游戏赚红包 -> 一天展示一次 -->
  <div class="hb">
    <!-- 开屏红包界面 未打开时图片 normalImg, 打开图片 activeImg active存在, 延迟关闭 -->
    <StartPage
      v-if="showActiveHbStart"
      :delayTime="0"
      :normalImg="normalImg"
      @onCloseActive="onCloseActive"
      @onOpenActivePage="onOpenActivePage"
    />

    <!-- 玩游戏 赚红包 -->
    <HbTask
      v-if="showActiveHbTask"
      v-show="showActiveHbTask"
      @onCloseActive="onCloseActive"
    />
  </div>
</template>

<script>
import StartPage from "@/components/Active/StartPage/StartPage"; // 开屏
import HbTask from "@/views/Active/Hb/HbTask/HbTask"; // 玩游戏, 赚红包
import MenuService from "@/components/Menu/MenuService"; // 联系客服
import { mapState } from "vuex";
export default {
  name: "HB",
  components: {
    StartPage,
    HbTask,
    MenuService,
  },
  data() {
    return {
      normalImg: require("@/assets/image/hb/normal_bg.gif"), // 默认展示图片 路径
      //   activeImg: require("@/assets/image/hb/active_bg.png"), // 点击开启  路径
      showMenuService: false, // 是否显示 玩游戏 赚红包
      showActiveHbStart: true, // 显示首次打开的大红包
      showActiveHbTask: false, // 是否显示具体任务
    };
  },
  computed: {
    ...mapState(["hb", "isLogin", "userInfo"]),
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 开屏显示的图片的关闭按钮 关闭 进入游戏
    onCloseActive() {
      this.$utils.wcfmlLoginUtils(this.userInfo);
    },

    // 立即开启(开启活动)
    onOpenActivePage() {
      this.showActiveHbStart = false;
      this.showActiveHbTask = true;
    },
  },
};
</script>

<style lang='less' scoped>
.hb {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.6);
}

// 正常横屏样式
@media all and (orientation: landscape),
  /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
  .hb {
  }
}
</style>