<template>
  <div class="pay">
    <x-header></x-header>
    <img src="../assets/qr-banner.jpg"
         alt=""
         style="width: 100%">
    <div class="section-edge-all">
      <div class="pay-for-who"
           style="font-size:.32rem;font-weight:300">
        <p>正在为您的微信好友充值：</p>
      </div>
      <div class="pay-explain">
        选择充值金额
        <span class="red">（1元=100书币）</span>
      </div>
      <ul class="pay-product">
        <v-touch :class="['pay-new__product',{'is-active': i === selectedProduct }]"
                 v-for="(v,i) in product"
                 :key="v.product_id"
                 @tap="selectProduct(i)">
          <div class="price-new-get">
            <p class="get-num"
               v-if="!v.is_vip">{{v.text}}</p>
            <p class="get-num"
               v-else><img :src="i === selectedProduct ? is_year_check : is_year"
                   alt="">{{v.text}}</p>
            <p class="get-save"
               v-if="v.save_text&&!v.is_vip"><span>省{{v.save_text}}</span></p>
            <p class="get-save"
               v-else><span>{{v.save_text}}</span></p>
          </div>
          <p class="price-new-pay">{{v.price}}</p>
        </v-touch>
      </ul>
      <div class="pay-btn"
           @click="pay">慷慨代付</div>
      <p class="pay-shubis-tip">温馨提示
        <span class="pay-shubi-tip__item">1、完成充值后书币到账，扣款发生在实际支付人</span>
        <span class="pay-shubi-tip__item">2、实际支付人能获得充值金额10%书币奖励</span>
        <span class="pay-shubi-tip__item">3、奖励书币需在置顶站点使用</span>
      </p>
      <div class="reader-loading"
           v-show="loading">
        <mt-spinner class="reader-loading-icon"
                    type="fading-circle"
                    color="#32a1ff"></mt-spinner>
      </div>
    </div>
    <div class="pay-back-dialog"
         v-show="payBack"
         @touchmove.prevent>
      <div class="dialog-box"
           @click.stop>
        <div class="title">代充成功</div>
        <div class="content">
          <p>恭喜你代充成功</p>
          <p class="get-money">获赠<span>{{getMoney}}</span>书币奖励</p>
        </div>
        <div class="dialog-btns">
          <span>注：查询赠书书币：我要使用 -> 个人中心</span>
          <p @click="$router.push('/')">我要使用</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Pay, HelpPayQrcode } from "./namespace.js";
// import product from "../mock/pay.js";
import {
  getProductList,
  subscribeByRMB,
  substituteRecharge,
  getUserInfo,
  getSubstitutePayList
} from "../api";
export default {
  name: Pay.name,
  data() {
    return {
      HelpPayQrcode: HelpPayQrcode.name,
      balance: "...",
      product: [],
      selectedProduct: 0,
      defaultProduct: 0,
      prevRoute: null,
      loading: false,
      showTip: !!this.$route.query.code,
      showBookTip: this.$route.query.code == 10020, //全本提醒true，单本提醒false
      getMoney: 0,
      payBack: false,
      is_year: require("../assets/年会员-黄.png"),
      is_year_check: require("../assets/年会员.png"),
      is_can_allow_pay: 1
    };
  },
  methods: {
    selectProduct(i) {
      this.selectedProduct = i;
    },
    pay() {
      if (this.is_can_allow_pay) {
        substituteRecharge({
          product_id: this.product[this.selectedProduct].product_id,
          uid: this.uid
        });
      } else {
        this.$Toast("暂不支持自己代付");
      }
    }
  },
  created() {
    let { product_id } = this.$route.query || 0;
    this.uid = this.$route.query.su;
    this.getMoney = this.$route.query.back || 0;
    if (this.getMoney) this.payBack = true;
    // this.loading = true;
    // getSubstitutePayList(product_id, this.uid).then(r => {
    //   this.product = r;
    //   this.is_can_allow_pay = r[0].is_can_allow_pay || 0;
    //   this.loading = false;
    //   r.forEach((p, i) => {
    //     if (p.default) {
    //       this.selectedProduct = i;
    //       this.defaultProduct = i;
    //     }
    //   });
    // });
  }
};
</script>

<style lang="scss" scoped>
.pay-new__product {
  display: flex;
  border: 1px solid #f7f7f7;
  border-radius: 3px;
  width: 45%;
  height: 1.4rem;
  font-size: 0.28rem;
  padding: 0.1rem;
  margin-bottom: 0.2rem;

  .price-new-get {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;

    span {
      display: inline-block;
      color: #fff;
      font-weight: bold;
      background: #ffb63b;
      padding: 0 0.2rem;
      border-radius: 0.5rem;
      margin-left: 0.3rem;
      margin-top: 0.1rem;
    }

    img {
      width: 0.4rem;
      vertical-align: text-top;
      margin-right: 0.1rem;
    }
  }

  .price-new-pay {
    align-self: flex-end;
    font-size: 0.36rem;
    font-weight: bold;
    color: #ff6060;
  }

  &.is-active {
    border-color: #ff6060;
    background: #fff1f0;

    .price-new-get {
      color: #ff6060;

      span {
        background: #ff6060;
      }
    }
  }
}

.pay-back-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(#000, 0.2);

  .dialog-box {
    position: fixed;
    background: #fff;
    width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 4px;

    .title {
      padding: 0.3rem 0;
      text-align: center;
      font-size: 0.32rem;
      border-bottom: 1px solid #f7f7f7;
    }

    .content {
      padding: 0.6rem 0;
      text-align: center;
      font-size: 0.3rem;
      color: #666;

      .get-money {
        font-size: 0.36rem;
        font-weight: bolder;
        color: #333;

        span {
          color: #ff6060;
        }
      }
    }

    .dialog-btns {
      padding: 0.25rem;

      span {
        color: #999;
        font-size: 0.24rem;
      }

      p {
        text-align: center;
        font-size: 0.3rem;
        color: #fff;
        background: #ff6060;
        padding: 0.2rem 0;
        margin-top: 0.1rem;
      }
    }
  }
}
</style>