<template>
  <!-- 收银台 -->
  <div class="counter">
    <!-- 上方支付方式 -->
    <div class="top clear">
      <i class="iconfont icon-back"></i>
      <div class="title">
        <img
          v-if="query.pay_platform === 'HB'"
          src="~@/assets/image/hbpay.png"
          alt=""
        />
        <img
          v-if="query.pay_platform === 'WECHATPAY'"
          class="wx"
          src="~@/assets/image/wxpay.png"
          alt=""
        />
        <img
          v-if="query.pay_platform === 'ALIPAY'"
          class="ali"
          src="~@/assets/image/alipay.png"
          alt=""
        />
        <span>{{ getPayPlatform }}付款</span>
      </div>
    </div>
    <!-- 多少rmb -->
    <div class="rmb">
      <div class="count">
        <span class="icon">￥</span>
        <span class="yuan">{{ query.amount / 100 }}.00</span>
      </div>
      <div class="bottom">{{ query.amount / 100 }}元</div>
    </div>
    <!-- 继续付款 -->
    <!-- <div class="continue" v-if="query.pay === 'game'" @click="gamePay">
      继续付款
    </div>
    <div class="continue" v-if="query.pay === 'hb'" @click="hbPay">
      继续付款
    </div> -->

    <div class="continue">支付完成</div>

    <!-- 支付遇到问题 -->
    <div class="question" @click="onService">支付遇到问题？联系客服</div>

    <!-- 支付完成 -->
    <div class="finish">支付完成</div>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
export default {
  name: "Counter",
  components: {},
  inject: ["payHandler", "onRecharge"],
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["getPayPlatform"]),
    ...mapState(["query", "userInfo"]),
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 游戏充值
    gamePay() {
      const {
        server_id,
        server_name,
        cp_order_id,
        role_name,
        role_id,
        goods_id,
        goods_name,
        amount,
        pay_type,
        pay_platform,
      } = this.query;
      this.payHandler({
        server_id,
        server_name,
        cp_order_id,
        role_name,
        role_id,
        goods_id,
        goods_name,
        amount,
        pay_type,
        pay_platform,
      });
    },

    // 鸿币充值
    hbPay() {
      const { amount, goods_name, pay_type, pay_platform } = this.query;
      this.onRecharge({
        amount,
        goods_name,
        pay_type,
        pay_platform,
      });
    },

    // 联系客服
    onService() {
      this.$emit("showInnerControl", "service");
    },

    // 返回游戏
    back() {
      this.$utils.closePage(this.userInfo.uid);
    },
  },
};
</script>

<style lang='less' scoped>
.counter {
  .top {
    i {
      float: left;
      font-size: 60 / @rem;
      color: #3faeed;
    }

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

    .title {
      width: 250 / @rem;
      height: 60 / @rem;
      line-height: 60 / @rem;
      margin: 10 / @rem auto 0;
      padding-left: 20 / @rem;
      font-size: 36 / @rem;
      font-weight: bold;
      text-align: center;

      img {
        width: 60 / @rem;
        float: left;
      }

      .wx,
      .ali {
        width: 50 / @rem;
        margin-top: 5 / @rem;
      }

      span {
        float: left;
        margin-left: 10 / @rem;
      }
    }
  }

  .rmb {
    margin-top: 100 / @rem;

    .count {
      font-size: 50 / @rem;
      text-align: center;

      .yuan {
        font-size: 80 / @rem;
      }
    }
  }

  .bottom {
    margin-bottom: 100 / @rem;
    font-size: 32 / @rem;
  }

  .continue {
    width: 80%;
    height: 100 / @rem;
    line-height: 100 / @rem;
    margin: 0 auto 40 / @rem;
    background-color: #3faeed;
    color: #fff;
    font-size: 36 / @rem;
    border-radius: 5px;
  }

  .question {
    color: #3faeed;
    font-size: 32 / @rem;
  }

  .finish {
    width: 300 / @rem;
    position: absolute;
    margin-left: -150 / @rem;
    left: 50%;
    bottom: 80 / @rem;
    font-size: 32 / @rem;
    color: #3faeed;
  }
}
// 正常横屏样式
@media all and (orientation: landscape),
  /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
  .counter {
    .top {
      i {
        font-size: 30 / @rem;
      }

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

      .title {
        width: 125 / @rem;
        height: 30 / @rem;
        line-height: 30 / @rem;
        margin: 5 / @rem auto 0;
        padding-left: 10 / @rem;
        font-size: 18 / @rem;

        img {
          width: 30 / @rem;
        }

        .wx,
        .ali {
          width: 25 / @rem;
          margin-top: 2.5 / @rem;
        }

        span {
          margin-left: 5 / @rem;
        }
      }
    }

    .rmb {
      margin-top: 50 / @rem;

      .count {
        font-size: 25 / @rem;

        .yuan {
          font-size: 40 / @rem;
        }
      }
    }

    .bottom {
      margin-bottom: 50 / @rem;
      font-size: 16 / @rem;
    }

    .continue {
      height: 50 / @rem;
      line-height: 50 / @rem;
      margin: 0 auto 20 / @rem;
      font-size: 18 / @rem;
    }

    .question {
      font-size: 16 / @rem;
    }

    .finish {
      width: 150 / @rem;
      margin-left: -75 / @rem;
      bottom: 40 / @rem;
      font-size: 16 / @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) {
}
</style>