<template>
    <section class="wallet-status">
        <Header :title="title" :meaushow='meaushow'></Header>
        <div class="status-content" v-if="walletInfoData.wallet_freeze_format">
            <ul class="form-wrap">
                <li class="inp-wrap">
                    <label class="lineBlock va-m">冻结余额</label>
                    <input readonly="readonly" v-if="walletInfoData.wallet_status !== 1" type="text" value="￥0.00" class="va-m inp"/>
                    <input readonly="readonly" v-else type="text" :value="walletInfoData.wallet_freeze_format" class="va-m inp"/>
                   
                    <van-icon v-if="walletInfoData.wallet_freeze_format !== '¥0.00'" name="warning-o" class="tips va-m" size="22px" color="#f00" @click="dialogTips"/>
                </li>
                <li class="inp-wrap">
                    <label class="lineBlock va-m">钱包状态</label>
                    <input readonly="readonly" v-if="walletInfoData.wallet_status !== 1" type="text" value="未启用" class="va-m inp"/>
                    <input readonly="readonly" v-else type="text" value="已启用" class="va-m inp"/>
                </li>
                <li class="inp-wrap">
                    <label class="lineBlock va-m">支付密码</label>
                    <input readonly="readonly" v-if="walletInfoData.wallet_status !== 1" type="text" value="未启用" class="va-m inp"/>
                    <input readonly="readonly" v-else type="text" value="已启用" class="va-m inp"/>
                    <span v-if="walletInfoData.wallet_status == 1" class="forget-password va-m" @click="forgetPassword">忘记密码</span>
                </li>
                <li class="inp-wrap">
                    <label class="lineBlock va-m">我的银行卡</label>
                    <input readonly="readonly" v-if="walletInfoData.bank_name == null" type="text" value="未绑定" class="va-m inp"/>
                    <input readonly="readonly" v-else type="text" :value="walletInfoData.bank_name" class="va-m inp"/>
                    <span v-if="walletInfoData.bank_name == null" class="bind-bank va-m" @click="bindBank">绑卡</span>
                </li>
            </ul>
            <a v-if="walletInfoData.wallet_status !== 1" href="javascript:;" class="submit" @click="submit">激活</a>
        </div>
    </section>
</template>

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

    Vue.use(Icon).use(Dialog);

    export default {
        name: 'walletStatus',
        data() {
            return {
                title: "钱包状态",
                meaushow: true
            }
        },
        computed: {
            ...mapState({
              walletInfoData: state => state.wallet.walletInfoData
            })
        },
        watch: {
          
        },
        created() {
            this.$store.dispatch({
                type: 'getWalletInfo'
            }) 
        },
        methods: {
            dialogTips() {
                Dialog.alert({
                    message: '<p style="font-size:16px;">您的'+this.walletInfoData.wallet_freeze_format+'元正在提现中，</p><p style="font-size:16px;">预计1个工作日后到账，</p><p style="font-size:16px;">节假日顺延，请耐心等候。</p>'
                }).then(() => {
                    // on close
                });
            },
            submit() {
                this.$router.push({path: '/wallet/activate'});
            },
            forgetPassword() {
                this.$router.push({path: '/wallet/retrieve'});
            },
            bindBank() {
                this.$router.push({path: '/wallet/verify'});
            }
        },
        components: {
            Header
        }
    }
</script>

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