<template>
    <section class="wallet">
        <Header :title="title" :meaushow='meaushow'></Header>
        <div class="wallet-content" v-if="walletInfoData">
            <div class="wallet-balance">
                <div class="balance-bg">
                    <p class="text-1 lineBlock">钱包余额</p>
                    <p class="text-2 lineBlock">￥<span class="text-3">{{walletInfoData.wallet_usable}}</span></p>
                    <p class="text-4 lineBlock"><a href="/v3/help">常见问题 ></a></p>
                </div>
                <div class="balance-handle">
                    <span class="withdraw" :class="walletInfoData.wallet_status !== 1 ? 'gray' : ''" @click="withdraw">提现</span>
                    <span v-if="walletInfoData.wallet_status == 1" class="recharge" @click="recharge">充值</span>
                    <span v-else class="recharge activate" @click="activate">激活</span>
                </div>
            </div>
            <ul class="clr">
                <li>
                    <a href="/h5/view/#/wallet/status" class="lineBlock">
                        <img src="../../assets/images/wallet/status.png" alt="钱包状态" style="width:47px; height:45px;">
                        <p>钱包状态</p>
                    </a>
                </li>
                <li>
                    <a href="/h5/view/#/wallet/walletdetail" class="lineBlock">
                        <img src="../../assets/images/wallet/account.png" alt="钱包明细" style="width:42px; height:45px;">
                        <p>钱包明细</p>
                    </a>
                </li>
                <li>
                    <a href="/h5/view/#/wallet/record" class="lineBlock">
                        <img src="../../assets/images/wallet/record.png" alt="充值提现记录" style="width:45px; height:44px;">
                        <p>充值提现记录</p>
                    </a>
                </li>
            </ul>
        </div>
    </section>
</template>

<script>
  import Vue from 'vue';
  import {mapState} from 'vuex'
  import Header from '@/views/common/Header.vue';
  import { Dialog } from 'vant';

  Vue.use(Dialog);

  export default {
    name: 'wallet',
    data() {
      return {
        title: "我的钱包",
        meaushow: true
      }
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.$store.dispatch({
          type: 'loginCheck',
          is_jump: true
        });
      })
    },
    computed: {
      ...mapState({
        walletInfoData: state => state.wallet.walletInfoData
      })
    },
    created() {
      this.$store.dispatch({
        type: 'getWalletInfo'
      })
    },
    methods: {
      withdraw() {
        if (this.walletInfoData.wallet_status == 1 && !(this.walletInfoData.bank_account === null)) {
          //钱包状态：1启用，-1未启用，-2锁定
          this.$router.push({path: '/wallet/withdraw'});
        }else{
          Dialog.confirm({
            title: '提醒',
            message: '请先去绑卡'
          }).then(() => {
            this.$router.push({path: '/wallet/verify'});
          }).catch(() => {
            // on cancel
          });
        }
      },
      activate() {
        this.$router.push({path: '/wallet/activate'});
      },
      recharge() {
        this.$router.push({path: '/wallet/recharge'});
      }
    },
    components: {
      Header
    }
  }
</script>

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