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

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

    <!-- 鸿币支付确认 -->
    <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"; // 鸿币充值优惠明细
export default {
  name: "GamePay",
  components: {
    GamePayBox,
    MenuPay,
    MenuHbPay,
    MenuHbDetail,
  },
  data() {
    return {
      showGameInner: "", // 控制显示哪个组件
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 控制显示哪个组件
    showInnerControl(showGameInner) {
      this.showGameInner = showGameInner;
    },

    // 关闭
    close() {
      // 1. 展示游戏内充值
      this.showInnerControl("");
      // 2. 关闭当前
      console.log("gamepay close");
    },
  },
};
</script>

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