<template>
  <div class="recharge">
    <section class="plan">
      <p class="title">请选择充值燃料</p>
      <ul>
        <li v-for="({id, name, price, chain_times, chain_price}) in planList" 
          :key="id" class="item" 
          :class="id === planId? 'active': ''"
          @click="planId = id;price = price;chain_times = chain_times;">
          <div class="times">{{chain_times}}次</div>
          <div class="right price">¥{{price}}</div>
          <div class="name">{{name}}</div>
          <div class="right">均价：{{chain_price}}</div>   
        </li>
      </ul>
    </section>
    <section class="method">
      <p class="title">选择支付方式</p>
      <van-radio-group v-model="method">
        <van-cell title="支付宝" clickable @click="method = 0" center>
          <template #icon>
            <common-svg name="gerenzhongxin-zhifubaozhifu" style="margin-right:10px;"></common-svg>
          </template>
          <template #right-icon>
            <van-radio :name="0" />
          </template>
        </van-cell>
        <van-cell title="微信" clickable @click="method = 1" center>
          <template #icon>
            <common-svg name="gerenzhongxin-weixinzhifu2"  style="margin-right:10px;"></common-svg>
          </template>
          <template #right-icon>
            <van-radio :name="1" />
          </template>
        </van-cell>
      </van-radio-group>
    </section>
    <div @click="recharge" class="btn">充值</div>
    <section class="btn-group">
      <router-link tag="span" :to="{name:'RechargeRecord'}">充值记录</router-link>
      <router-link to="/contect" tag="span" style="margin-left:10px;">联系客服</router-link>
    </section>
    <section class="explain">
      <p class="title">年费说明</p>
      <p>1、燃料充值年费说明：开通年费会员后，充值的套餐有效期一年，隔年自动作废，请尽快使用。
      2、套餐选购：按需购买套餐，套餐金额越大，单价越低，根据您的上链数量进行选购；
      3、充值未完成时请不要切换账户，或者退出，否则可能出现充值不到账的情况。
      </p>
    </section>
    <section class="confirm-recharge" v-if="confirm">
        <div class="box" style="text-align:center;">
            <div style="color:#353535;font-size:20px;">确认付款</div>
            <div style="color:#353535;font-size: 40px;">{{price}}</div>
            <div style="color:#B6B7B9;font-size: 16px;">{{chainTimes}}</div>
            <div>{{method === 0? '支付宝支付': '微信支付'}}</div>
            <a :href="payUrl" style="background:linear-gradient(180deg,rgba(70,103,250,1) 0%,rgba(91,119,244,1) 100%);
box-shadow:0px 2px 15px 0px rgba(63,121,254,0.42);width:200px;height:40px;line-height:40px;
border-radius:4px;">立即充值</a>
        </div>
    </section>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Cell, Form, Field, CellGroup, Button, Image, RadioGroup, Radio } from 'vant';
import { Getter, State } from 'vuex-class';
import { Route } from 'vue-router';
@Component({
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Image.name]: Image,
    [Cell.name]: Cell,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
  },
})
export default class Recharge extends Vue {
  @State('userInfo') private userInfo!: any;
  private planList: any[] = [];
  private planId: number = 1;
  private price: number = 0;
  private chainTimes: number = 0;
  private method: number = 0;
  private plan: any = {};

  private payUrl: string = '';

  private confirm: boolean = false;
  private mounted() {
    this.$api.plan.list(1).then((res: any) => {
      this.planList = res.results;
    });
  }
  private beforeRouteLeave(to: Route, from: Route, next: (params?: any) => void) {
    if (!this.confirm) { return next(); }
    this.$dialog.confirm({
      title: '提示',
      message: '点击“返回”将中断操作，确定返回？',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    }).then(() => {
      next();
    }).catch(() => {
      next(false);
    });
  }
  private recharge() {
    this.$api.order.add(this.planId, this.method).then((res: any) => {
      this.payUrl = res.pay_url;
      this.confirm = true;
    });
  }
}
</script>
<style scoped lang="scss">
  .recharge{
    position: relative;
    padding: 17px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .plan{
      p.title{
        color:#353535;
        font-size: 16px;
        font-weight: 500;
      }
      .item{
        position: relative;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: repeat(2,30px);
        place-items: center start;
        padding: 3px 23px;
        margin-top: 10px;
        font-size: 12px;
        color: #B6B5BA;
        border-radius:4px;
        border:1px solid rgba(230,230,230,1);
        &.active{
          border-color: #3175FF;
        }
        .right{
          place-self: center end;
        }
        .times{
          color:#353535;
          font-size: 20px;
          font-weight: 600;
        }
        .price{
          color:#353535;
          font-size: 18px;
        }
      }
    }
    .method{
      .title{
        color:#353535;
        font-size: 16px;
        font-weight: 500;
      }
    }
    .btn{
      width: 200px;
      height: 40px;
      align-self: center;
      line-height: 40px;
      text-align: center;
      border-radius: 4px;
      font-size: 14px;
      color: #FFFFFF;
      background: #3175FF;
    }
    .btn-group{
      align-self: center;
      margin-top: 10px;
      color: #3F79FE;
      font-size: 12px;
    }
    .explain{
      .title{
        font-size: 14px;
        color: #353535;
      }
      color: #A1A1A1;
      font-size: 12px;
    }
    .confirm-recharge{
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: #3175FF no-repeat fixed top;
      div.box{
        position: absolute;
        top: 39px;
        left: 30px;
        right: 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 26px;
        border-radius: 4px;
        background: #FFFFFF;
        font-size: 16px;
        text-align: center;
        color: #B6B7B9; 
      }
    }
  }
</style>