<template>
  <!-- 鸿币支付 -->
  <div class="menu_hb_pay">
    <i class="iconfont icon-back" @click="back"></i>
    <div class="title">确认付款</div>
    <!-- 鸿币余额 -->
    <div class="money">
      <span class="left">鸿币余额</span>
      <span class="right">{{ finance }}</span>
    </div>

    <!-- 支付鸿币 -->
    <div class="pay_money">
      <span class="left">应付鸿币</span>
      <span class="right">{{ query.amount / 100 }}</span>
    </div>
    <!-- 确认 -->
    <div
      class="confirm"
      v-if="finance >= query.amount / 100 && canPay"
      @click="toPay"
    >
      立即支付
    </div>
    <div class="confirm gray" v-else-if="finance >= query.amount / 100">
      支付中
    </div>

    <!-- 余额不足 -->
    <div v-else class="less">
      <div class="msg">您的鸿币余额不足</div>
      <div class="confirm" @click="toRecharge">前往充值</div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "MenuHbPay",
  components: {},
  inject: ["checkCode", "payHandler", "getFinance"],
  data() {
    return {
      payPlatform: "HB", // 支付平台
      canPay: true, // 是否可以支付
    };
  },
  computed: {
    ...mapState(["finance", "userInfo"]),
    query() {
      return this.$store.state.query;
    },
  },
  watch: {
    query: {
      handler(newValue) {
        // console.log(newValue, "query");
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    // 返回游戏内支付页面
    back() {
      this.showInnerControl("");
    },

    // 充值鸿币
    toRecharge() {
      this.showInnerControl("hb");
    },

    // 显示哪个组件(工具函数)
    showInnerControl(name) {
      this.$emit("showInnerControl", name);
    },

    // 鸿币充值 支付宝 微信支付
    toPay() {
      if (!this.canPay) {
        return;
      }
      this.canPay = false;
      const { payPlatform } = this;
      const {
        server_id,
        server_name,
        cp_order_id,
        role_id,
        role_name,
        goods_id,
        goods_name,
        amount,
      } = this.query;
      const payType = this.$utils.payType(payPlatform).h5;
      this.payHandler({
        server_id,
        server_name,
        cp_order_id,
        role_name,
        role_id,
        goods_id,
        goods_name,
        amount,
        pay_type: payType,
        pay_platform: payPlatform,
      }).then(() => {
        this.canPay = true;
        this.$toast.text("鸿币支付成功");
        this.getFinance();
        setTimeout(() => {
          this.back();
        }, 1500);
      });
    },
  },
};
</script>

<style lang='less' scoped>
.menu_hb_pay {
  width: 100%;
  height: 500 / @rem;
  position: absolute;
  top: 100%;
  margin-top: -500 / @rem;
  padding: 15 / @rem 20 / @rem;
  border-radius: 30 / @rem 30 / @rem 0 0;
  box-sizing: border-box;
  background-color: #fff;

  i {
    float: right;
    font-size: 60 / @rem;
  }

  .icon-back {
    margin-right: 10 / @rem;
    font-size: 50 / @rem;
  }

  .title {
    height: 60 / @rem;
    line-height: 60 / @rem;
    margin-top: 10 / @rem;
    margin-left: 10 / @rem;
    padding-left: 20 / @rem;
    font-size: 36 / @rem;
    font-weight: bold;
    border-left: 4px solid #3faeed;
    text-align: left;
  }

  .money,
  .pay_money {
    height: 80 / @rem;
    line-height: 80 / @rem;
    font-size: 30 / @rem;
    border-top: 1px solid #e6e6e6;

    .left {
      float: left;
    }
    .right {
      float: right;
    }
  }
  .money {
    margin-top: 20 / @rem;
  }
  .confirm {
    width: 60%;
    line-height: 70 / @rem;
    margin: 120 / @rem auto 0;
    background-color: #3faeed;
    color: #fff;
    border-radius: 8 / @rem;
  }
  .less {
    margin-top: 70 / @rem;
    .msg {
      color: #ca0000;
    }
    .confirm {
      margin-top: 20 / @rem;
    }
  }
}

// 正常横屏样式
@media all and (orientation: landscape),
  /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
  .menu_hb_pay {
    width: 350 / @rem;
    height: 300 / @rem;
    left: 50%;
    top: 50%;
    margin-top: -150 / @rem;
    margin-left: -175 / @rem;
    padding: 7.5 / @rem 10 / @rem;
    border-radius: 10 / @rem;
    overflow-y: auto;

    .icon-back {
      margin-top: 2 / @rem;
      margin-right: 5 / @rem;
      font-size: 25 / @rem;
    }

    .title {
      height: 30 / @rem;
      line-height: 30 / @rem;
      margin-top: 8 / @rem;
      margin-left: 5 / @rem;
      padding-left: 10 / @rem;
      font-size: 18 / @rem;
    }

    .money,
    .pay_money {
      height: 55 / @rem;
      line-height: 55 / @rem;
      font-size: 15 / @rem;
    }

    .money {
      margin-top: 20 / @rem;
    }

    .confirm {
      line-height: 35 / @rem;
      margin: 70 / @rem auto 0;
      border-radius: 4 / @rem;
    }
    .less {
      margin-top: 35 / @rem;
      .msg {
        color: #ca0000;
      }
      .confirm {
        margin-top: 10 / @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) {
  .menu_hb_pay {
    width: 350 / @rem;
    height: 280 / @rem;
    left: 50%;
    top: 50%;
    margin-top: -125 / @rem;
    margin-left: -175 / @rem;
    padding: 7.5 / @rem 10 / @rem;
    border-radius: 20 / @rem;

    .money,
    .pay_money {
      height: 40 / @rem;
      line-height: 40 / @rem;
      font-size: 15 / @rem;
    }
  }
}
</style>