<template>
    <view class="dy-withdraw-apply">
        <view class="dwa-balance">
            <text class="dwab-txt">可提现资金：</text>
            {{ balance.toFixed(2)||"0.00" }}元
        </view>
        <view class="dwa-scroll">
            <view class="dwa-opt-line" :key="i">
                <view class="dol-name">*提现金额</view>
                <input type="digit" class="dol-ipt" placeholder="请输入提现金额" v-model="info.amount">
            </view>
            <view class="dwa-opt-line" :key="i">
                <view class="dol-name">*账户名称</view>
                <input type="text" class="dol-ipt" placeholder="请输入账户名称" v-model="info.account_name_of_bank">
            </view>
            <view class="dwa-opt-line" :key="i">
                <view class="dol-name">*银行卡号</view>
                <input type="number" class="dol-ipt" placeholder="请输入银行卡号" v-model="info.account">
            </view>
            <view class="dwa-opt-line">
                <view class="dol-name">*银行名称</view>
                <picker class="dol-picker" :range="banks" @change="bankNameChange">
                    <view class="dp-frame">
                        <input type="text" disabled class="df-ipt" placeholder="请选择" v-model="info.bank_name">
                        <image class="df-icon" mode="aspect" src="/subpackage/wallet/static/images/arrow_c33.png"></image>
                    </view>
                </picker>
            </view>
            <view class="dwa-opt-line" :key="i">
                <view class="dol-name">*支行名称</view>
                <input type="text" class="dol-ipt" placeholder="请输入支行名称" v-model="info.bank_address">
            </view>
            <view class="dwa-opt-line" :key="i">
                <view class="dol-name">联系电话</view>
                <input maxlength="11" type="number" class="dol-ipt" placeholder="请输入联系电话" v-model="info.mobile">
            </view>
            
        </view>
        
        <view class="dwa-tip">
            <view class="dt-tit">温馨提示</view>
            <view class="dt-desc">1、账户请预留一定的余额，避免余额不足导致退款失败！</view>
            <view class="dt-desc">2、提现申请成功提交后，预计在3~7个工作日内进行处理。</view>
        </view>
        <view class="dwa-btn">
            <wm-button green @click="confirmExtract">确认提现</wm-button>
        </view>

        <wallet-modal-success 
            title="申请成功"
            ref="walletModalSuccess"
            @click:button="toDetailBtn"
        >
            <template v-slot:tip>平台已收到您的提现请求，预计在3~7个工作日内进行处理，请耐心等待！</template>
            <template v-slot:btn>提现记录</template>
        </wallet-modal-success>
    </view>
</template>

<script>
import walletModal from '../../components/wallet_modal.vue';
import wmButton from '../../components/wm_button.vue';
import wallet_modal_success from '../../components/wallet_modal_success.vue';
import banks from '../../js/bank';
import { WALLET_API } from '../../js/api';
import servers from '../../js/server';
import { routeTo, showModal, showNone, showLoad, hideLoad } from '@/utils/util';
export default {
    components: {
        'wallet-modal': walletModal,
        'wm-button': wmButton,
        'wallet-modal-success': wallet_modal_success
    },
    data(){
        return {
            balance: 0,
            banks,
            brand_id: '',
            info: {
                amount: '',
                account_name_of_bank: '',
                account: '',
                bank_name: '',
                bank_address: '',
                mobile: ''
            },
            // md【241024】 241113新增
            source: '', // 提现源：0抖音；1微信
        }
    },
    async onLoad(options){
        let _bid =  options.brand_id || '';
        this.brand_id = _bid;

        // md【241024】 241113新增
        let { source } = options;
        if(![ 0, 1 ].includes(+source))return showNone('缺少参数 source');
        this.source = +source;

        await this.getDouyinWalletBalance(_bid, +source);

        if(this.isEmptyInfo())this.getStorageAndSet();
    },
    methods: {
        toDetailBtn(){
            routeTo(`/subpackage/wallet/pages/douyin_withdraw/record?brand_id=${this.brand_id}`, 'nT');
        },
        bankNameChange(e){
            let { value } = e.detail;
            this.info.bank_name = this.banks[value];
        },
        getStorageAndSet(){
            uni.getStorage({
                key: 'dyRecentWithdrawApplyInfo',
                success: res=>{
                    showModal({
                        content: '是否自动填充上次提现信息？',
                        showCancel: true,
                        success: mRes=>{
                            if(mRes.confirm){
                                this.info = res.data;
                            }
                        }
                    })
                }
            })
        },
        setInfoToStorage(){
            uni.setStorage({
                key: 'dyRecentWithdrawApplyInfo',
                data: this.info
            });
        },
        confirmExtract(){
            if(!this.infoCheck())return;
            this.setInfoToStorage();
            
            showModal({
                content: '是否确认提现？',
                showCancel: true,
                success: res=>{
                    if(res.confirm){
                        let _amount = this.info.amount || 0;
                        this.dyConfirmExtract({
                            ...this.info,
                            amount: (+_amount) * 100
                        })
                        
                    }
                }
            })
            
        },
        // 提现申请确认
        dyConfirmExtract(e){
            let { brand_id, source } = this;
            this.douyinWalletExtract({
                brand_id,
                source,
                ...e,
            })
        },
        isEmptyInfo(){
            let _infoValues = Object.values(this.info);
            return _infoValues.every(item=>item === '');
        },
        infoCheck(){
            let { amount, account_name_of_bank, account, bank_name, bank_address, mobile } = this.info;
            let _amount = +(amount ?? 0);
            if(_amount <= 0){
                showNone('提现金额不正确');
                return false
            }
            if(_amount > this.balance){
                showNone('提现金额不能大于可提现金额');
                return false
            }
            if(account_name_of_bank === ''){
                showNone('账户名称不能为空');
                return false
            }
            if(account === ''){
                showNone('银行卡号不能为空');
                return false
            }
            if(bank_name === ''){
                showNone('银行名称不能为空');
                return false
            }
            if(bank_address === ''){
                showNone('支行名称不能为空');
                return false
            }
            return true
        },
        /**
         * http://api.ouxuan.net:61080/project/11/interface/api/2195
         * @param {String} brand_id 品牌id
         * */ 
        getDouyinWalletBalance(brand_id, source){
            showLoad();
            return servers.get({
                url: WALLET_API.withdrawalOfDouyinOrg_totalAmount,
                data: {
                    brand_id: brand_id
                },
                failMsg: '获取钱包余额失败'
            })
            .then(res=>{
                
                hideLoad();
                let _balance = 0;
                if(source === 0)_balance = +res.total_amount_of_douyin ?? 0;
                if(source === 1)_balance = +res.total_amount_of_wechat ?? 0;
                return this.balance = _balance * 0.01;
            })
            .catch(hideLoad)
        },
        /**
         * http://api.ouxuan.net:61080/project/11/interface/api/2209
         * @param {String} brand_id 品牌id
         * @param {Number} amount 提现金额
         * @param {String} account 账户
         * @param {String} account_name_of_bank 账户名
         * @param {String} bank_name // 银行名
         * @param {String} bank_address // 银行地址
         * @param {String} mobile 手机号
         * @param {Number} status // 0未处理，1已处理
         * md【241024】 241113新增
         * @param {Number} source // 提现源：0抖音；1微信
         * */ 
        douyinWalletExtract({
            brand_id,
            amount,
            account,
            account_name_of_bank,
            bank_name,
            bank_address,
            mobile,
            status = 0,
            source
        }){
            showLoad();
            servers.post({
                url: WALLET_API.withdrawalOfDouyinOrg_edit,
                data: {
                    brand_id, 
                    amount,
                    account,
                    account_name_of_bank,
                    bank_name,
                    bank_address,
                    mobile,
                    status,
                    source
                },
                failMsg: '申请提现失败'
            })
            .then(res=>{
                hideLoad();
                this.$refs.walletModalSuccess.alert();
                setTimeout(_=>{
                    this.getDouyinWalletBalance(brand_id, source);
                }, 1200);
            })
            .catch(hideLoad)
        },
    }
}
</script>

<style lang="scss">
    page{
        background: #fff;
    }
    .dy-withdraw-apply{
        padding: 36upx 50upx 20upx;
        .dwa-balance{
            @include flcw(28upx, 48upx, $mColor);
            @include tHide;
            .dwab-txt{
                color: #1A1A1A;
            }
        }
        .dwa-scroll{
            margin-top: 20upx;
        }
        .dwa-opt-line{
            @include ctf(space-between);
            &+.dwa-opt-line{
                margin-top: 20upx;
            }
            .dol-name{
                @include flcw(24upx, 34upx, #1A1A1A);
            }
            .dol-ipt{
                box-sizing: border-box;
                flex-grow: 0;
                width: 492upx;
                height: 108upx;
                padding: 0 20upx;
                border-radius: 10upx;
                background: #F2F2F7;
                @include flcw(24upx, 34upx, #1A1A1A);
            }
            .dol-picker{
                flex-shrink: 0;
                .dp-frame{
                    width: 492upx;
                    height: 108upx;
                    padding: 0 20upx;
                    border-radius: 10upx;
                    background: #F2F2F7;
                    @include ctf(space-between);
                    .df-ipt{
                        flex-grow: 1;
                        height: 100%;
                        @include flcw(24upx, 34upx, #1A1A1A);
                    }
                    .df-icon{
                        flex-shrink: 0;
                        width: 20upx;
                        height: 20upx;
                    }
                }
            }
        }
        .dwa-tip{
            margin-top: 18upx;
            .dt-tit{
                @include flcw(24upx, 44upx, #9A9A9D);
            }
            .dt-desc{
                @include flcw(24upx, 44upx, #1A1A1A);
            }
        }
        .dwa-btn{
            margin-top: 62upx;
            @include ctf(center);
        }
    }
</style>