<template>
  <!-- 游戏内支付 -->
  <div class="menu_game_pay_h5">
    <div class="content">
      <!-- 确认信息 -->
      <div class="pay_money">
        <span class="left">充值金额</span>
        <span class="right">￥ {{ query.amount / 100 }}</span>
      </div>
      <div class="pay_info">
        <span class="left">购买商品</span>
        <span class="right">{{ query.goods_name }}</span>
      </div>

      <!-- 支付方式 -->
      <p>
        请选择支付方式
        <span class="red"> (鸿币充值低至9折) </span>
      </p>
      <div class="pay_type clear">
        <div
          class="alipay"
          :class="{
            active: currentPayPlatform === 'ALIPAY',
          }"
          @click="onSelectPayPlatform('ALIPAY')"
        >
          <img src="~@/assets/image/alipay.png" alt="" />
          <span>支付宝</span>
        </div>
        <div
          class="wxpay"
          :class="{
            active: currentPayPlatform === 'WECHATPAY',
          }"
          @click="onSelectPayPlatform('WECHATPAY')"
        >
          <img src="~@/assets/image/wxpay.png" alt="" />
          <span>微信</span>
        </div>
        <div
          class="hbpay"
          :class="{
            active: currentPayPlatform === 'HB',
          }"
          @click="onSelectPayPlatform('HB')"
        >
          <img src="~@/assets/image/hbpay.png" alt="" />
          <span>鸿币</span>
          <img class="discount" src="~@/assets/image/discount.png" alt="" />
        </div>
      </div>
      <!-- 鸿币余额 -->
      <div class="money">
        鸿币余额:
        <span>{{ finance }}</span>
        <span class="hb_pay" @click="onHbPay">(点此充值鸿币)</span>
      </div>

      <!-- 立即付款 -->
      <!-- 鸿币支付 -->
      <div class="to_pay" v-if="currentPayPlatform === 'HB'" @click="toHbPay">
        立即付款
      </div>
      <!-- 支付 -->
      <div class="to_pay" v-else @click="toPay">立即付款</div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "",
  components: {},
  inject: ["checkCode", "payHandler", "checkCodeHandler", "routeLink"],
  data() {
    return {
      currentPayPlatform: "ALIPAY", // 默认支付方式     如果没有余额  默认支付宝
      canPay: true, // 是否可以支付
    };
  },
  computed: {
    ...mapState(["finance", "query"]),
  },
  watch: {
    finance(newValue) {
      newValue > this.query.amount / 100
        ? this.onSelectPayPlatform("ALIPAY")
        : this.onSelectPayPlatform("HB");
    },
  },
  created() {},
  mounted() {
    this.finance > this.query.amount / 100
      ? this.onSelectPayPlatform("ALIPAY")
      : this.onSelectPayPlatform("HB");
  },
  destroyed() {},
  methods: {
    // 选择支付方式
    onSelectPayPlatform(payPlatform) {
      this.currentPayPlatform = payPlatform;
    },

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

    // 鸿币支付
    toHbPay() {
      this.showInnerControl("hbConfirm");
    },

    // 支付宝 微信支付
    toPay() {
      if (!this.canPay) {
        return;
      }
      this.canPay = false;
      this.payFun();
    },

    // 支付工具函数
    payFun(extra) {
      const { currentPayPlatform } = 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(currentPayPlatform).h5;
      this.payHandler({
        server_id,
        server_name,
        cp_order_id,
        role_id,
        role_name,
        goods_id,
        goods_name,
        amount,
        pay_type: payType,
        pay_platform: currentPayPlatform,
        extra,
      }).then(() => {
        this.canPay = true;
        this.back();
      });
    },

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

    // 关闭
    back() {
      this.$emit("close");
    },
  },
};
</script>

<style lang='less' scoped>
.menu_game_pay_h5 {
  .pay_info,
  .pay_money {
    height: 70 / @rem;
    line-height: 70 / @rem;
    border-top: 1px solid #e6e6e6;

    .left {
      float: left;
    }
    .right {
      float: right;
    }
  }
  .pay_money {
    margin-top: 20 / @rem;
    .right {
      color: #ca0000;
    }
  }
  p {
    height: 70 / @rem;
    line-height: 70 / @rem;
    background-color: #efefef;
    border-radius: 8 / @rem;

    .red {
      color: #ca0000;
      font-size: 26 / @rem;
    }
  }
  .pay_type {
    width: 90%;
    line-height: 70 / @rem;
    margin: 40 / @rem auto 20 / @rem;

    .hbpay,
    .alipay,
    .wxpay {
      width: 32%;
      padding: 0 20 / @rem;
      float: left;
      text-align: center;
      border: 2px solid #e2e2e2;
      box-sizing: border-box;
      border-radius: 8 / @rem;
      img {
        width: 52 / @rem;
        margin-top: 8 / @rem;
        float: left;
      }

      i,
      span {
        display: inline-block;
        text-align: center;
      }
    }

    i {
      width: 52 / @rem;
      height: 52 / @rem;
      margin-top: 9 / @rem;
      margin-right: 10 / @rem;
      float: left;
    }
    .hbpay {
      float: right;
      position: relative;

      img {
        width: 60 / @rem;
        margin-top: 7 / @rem;
        float: left;
      }

      .discount {
        width: 60 / @rem;
        position: absolute;
        top: -20 / @rem;
        left: 100%;
        margin-left: -30 / @rem;
      }
    }
    .alipay {
      i {
        // background: url("@/assets/image/alipay.png") no-repeat;
      }
    }
    .wxpay {
      margin: 0 2%;
      i {
        // background: url("@/assets/image/wxpay.png") no-repeat;
      }
    }

    .active {
      border: 2px solid #3faeed !important;
    }
  }
  .money {
    font-size: 30 / @rem;
    span {
      color: #3faeed;
    }
    .hb_pay {
      margin-left: 10 / @rem;
      border-bottom: 2px solid #3faeed;
    }
  }
  .to_pay {
    width: 60%;
    line-height: 70 / @rem;
    margin: 20 / @rem auto;
    background-color: #3faeed;
    color: #fff;
    border-radius: 8 / @rem;
  }
}

// 正常横屏样式
@media all and (orientation: landscape),
  /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
  .menu_game_pay_h5 {
    .content {
      width: 100%;
      height: 240 / @rem;
      overflow-y: auto;
    }

    .pay_info,
    .pay_money {
      height: 35 / @rem;
      line-height: 35 / @rem;
    }

    .pay_money {
      margin-top: 10 / @rem;
    }

    p {
      height: 35 / @rem;
      line-height: 35 / @rem;
      border-radius: 4 / @rem;
      .red {
        font-size: 13 / @rem;
      }
    }
    .pay_type {
      width: 80%;
      line-height: 35 / @rem;
      margin: 10 / @rem auto 0;

      .hbpay,
      .alipay,
      .wxpay {
        width: 100%;
        float: none;
        padding: 0 10 / @rem;
        border-radius: 4 / @rem;
        margin: 10 / @rem 0;
        img {
          width: 28 / @rem;
          margin-top: 3.5 / @rem;
          margin-left: 5 / @rem;
        }
      }

      i {
        width: 30 / @rem;
        height: 30 / @rem;
        margin: 4.5 / @rem;
      }
      .hbpay {
        img {
          width: 30 / @rem;
          margin-top: 2.5 / @rem;
          margin-left: 5 / @rem;
        }
        .discount {
          width: 30 / @rem;
          margin-left: -15 / @rem;
          top: -10 / @rem;
        }
      }

      .alipay {
        margin: 0;
      }
    }
    .money {
      font-size: 15 / @rem;
      .hb_pay {
        margin-left: 5 / @rem;
      }
    }
    .to_pay {
      line-height: 35 / @rem;
      margin: 10 / @rem auto;
      border-radius: 4 / @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_game_pay_h5 {
    .content {
      height: 100%;
    }
  }
}
</style>