<template>
    <section class="wallet-recharge">
        <Header :title="title" :meaushow='meaushow'></Header>
        <div class="recharge-content">
            <div class="wallet-account">钱包账号：{{walletInfoData.safe_mobile}}</div>
            <div class="recharge-amount">
                <p>充值金额</p>
                <span>￥</span><input type="number" class="money" v-model="inputNum" :readonly="wallet_id? true : false"/>
            </div>
            <p class="payment-method">支付方式</p>
            <van-radio-group v-model="radio">
                <van-cell-group class="payment-content">
                    <van-cell clickable @click="radio = '1'" class="vanCell">
                        <div class="vanCelldt"><img src="../../assets/images/wallet/wechat.png" alt="微信支付" style="width:25px; height:22.5px;"></div>
                        <div class="vanCelldd"><span>微信支付</span><br/>仅安装微信6.0.2及以上版本客户端使用</div>
                        <van-radio name="1" style="display:inline-block; margin: 10px; float: right;"/>
                    </van-cell>
                    <!-- <van-cell clickable @click="radio = '2'" class="vanCell">
                        <div class="vanCelldt"><img src="../../assets/images/wallet/alipay.png" alt="支付宝支付" style="width:25px; height:25px;"></div>
                        <div class="vanCelldd"><span>支付宝支付</span><br/>由阿里巴巴提供服务</div>
                        <van-radio name="2" style="display:inline-block; margin: 10px; float: right;"/>
                    </van-cell>
                    <van-cell clickable @click="radio = '3'" class="vanCell">
                        <div class="vanCelldt"><img src="../../assets/images/wallet/unionpay.png" alt="中国银联" style="width:25px; height:15px;"></div>
                        <div class="vanCelldd"><span>中国银联</span><br/>由猎芯网提供服务</div>
                        <van-radio name="3" style="display:inline-block; margin: 10px; float: right;"/>
                    </van-cell> -->
                </van-cell-group>
            </van-radio-group>
            <a href="javascript:;" class="recharge" :class="inputNum == '' ? 'rechargeNO' : ''" @click="recharge">立即充值</a>
        </div>
    </section>
</template>

<script>
  import Vue from 'vue';
  import {mapState} from 'vuex'
  import Header from '@/views/common/Header.vue';
  import {RadioGroup, Radio, Cell, CellGroup} from 'vant';
  import {productionUrlApi} from '../../api/index'


  Vue.use(RadioGroup).use(Radio).use(Cell).use(CellGroup);

  export default {
    name: 'walletRecharge',
    data() {
      return {
        title: "钱包充值",
        meaushow: true,
        inputNum: this.$route.query.amount || '',
        wallet_id:this.$route.query.wallet_id || '',
        radio: '1'
      }
    },
    computed: {
      ...mapState({
        walletInfoData: state => state.wallet.walletInfoData,
        amountRechargeID: state => state.wallet.amountRechargeID
      })
    },
    watch: {
      amountRechargeID(value) {
        if (value) {
          if (this.radio == 1) { //微信支付
            this.$store.dispatch({
              type: 'payTodo',
              pay_code: 'wxpay',
              // rescue: 1,
              types: 1,
              site_type: 2,
              order_id: value
            });
          } 
          // else if (this.radio == 2) { //支付宝支付
          //   window.location.href = productionUrlApi + "pay/todo?pay_code=alipay&rescue=1&types=1&pay_mode=2&site_type=2&order_id=" + value;
          // } else if (this.radio == 3) { //中国银联
          //   window.location.href = productionUrlApi + "pay/todo?pay_code=unionpay&rescue=1&types=1&site_type=2&order_id=" + value;
          // }
        }
      }
    },
    created() {
      this.$store.dispatch({
        type: 'getWalletInfo'
      });
    },
    methods: {
      recharge() { //充值
        if (this.inputNum !== '') {
          console.log(this.radio)

          //充值申请
          this.$store.dispatch({
            type: 'walletRecharge',
            amount: this.inputNum,
            order_id:this.wallet_id
          });
        }
      }
    },
    components: {
      Header
    }
  }
</script>

<style scoped>
    @import "../../assets/css/wallet/wallet.css";
</style>