<template>
  <div class="game">
    <div class="inner_box" @click="closePage"></div>
    <!-- 游戏内充值 -->
    <GamePayBox
      v-if="showGameInner === ''"
      @showInnerControl="showInnerControl"
      @close="closeGamePay"
    />

    <!-- 鸿币充值 -->
    <MenuPay
      v-if="showGameInner === 'hb'"
      @showInnerControl="showInnerControl"
      @close="close"
    />

    <!-- 鸿币支付确认 -->
    <MenuHbPay
      v-if="showGameInner == 'hbConfirm'"
      @showInnerControl="showInnerControl"
    />

    <!-- 鸿币充值优惠明细 -->
    <MenuHbDetail
      v-if="showGameInner == 'hbDetail'"
      @showInnerControl="showInnerControl"
    />
  </div>
</template>

<script>
import GamePayBox from "@/views/GamePay/GamePayBox"; // 游戏内充值
import MenuPay from "@/components/Menu/MenuPay/MenuPay"; // 鸿币充值
import MenuHbPay from "@/components/Menu/MenuPay/MenuHbPay"; // 鸿币支付确认
import MenuHbDetail from "@/components/Menu/MenuPay/MenuHbDetail"; // 鸿币充值优惠明细
import { mapState } from "vuex";
export default {
  name: "GamePay",
  components: {
    GamePayBox,
    MenuPay,
    MenuHbPay,
    MenuHbDetail,
  },
  inject: ["getFinance"],
  data() {
    return {
      showGameInner: "", // 控制显示哪个组件
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  watch: {
    userInfo: {
      handler: function () {},
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {
    this.getFinance();
  },
  methods: {
    // 控制显示哪个组件
    showInnerControl(showGameInner) {
      this.showGameInner = showGameInner;
    },

    // 关闭
    close() {
      // 1. 展示游戏内充值
      this.showInnerControl("");
    },

    // 鸿币的返回回调函数
    closeGamePay() {
      this.showInnerControl("");
      this.$utils.closePage(this.userInfo.uid);
    },

    // 关闭当前支付
    closePage() {
      this.$utils.closePage(this.userInfo.uid);
    },
  },
};
</script>

<style lang='less' scoped>
</style>