<template>
  <!-- 鸿币充值 -->
  <div class="hb_recharge">
    <div class="inner_box" @click="close"></div>
    <!-- 鸿币充值 -->
    <MenuPay
      v-if="showGameInner === 'hb'"
      @showInnerControl="showInnerControl"
      @close="close"
    />

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

<script>
import MenuPay from "@/components/Menu/MenuPay/MenuPay"; // 鸿币充值
import MenuHbDetail from "@/components/Menu/MenuPay/MenuHbDetail"; // 鸿币充值优惠明细
import { mapState } from "vuex";
export default {
  name: "HbRecharge",
  components: {
    MenuPay,
    MenuHbDetail,
  },
  inject: ["getFinance"],
  data() {
    return {
      showGameInner: "hb", // 控制显示哪个组件
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  watch: {
    userInfo: {
      handler: function () {},
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {
    this.getFinance();
  },
  methods: {
    // 控制显示哪个组件
    showInnerControl(showGameInner) {
      // 如果不存在, 就是关闭
      if (!showGameInner) {
        return;
      }
      this.showGameInner = showGameInner;
    },

    // 关闭当前窗口 打开游戏
    close() {
      this.$utils.wcfmlLoginUtils(this.userInfo);
    },
  },
};
</script>

<style lang='less' scoped>
.hb_recharge {
}
</style>