{extend name="public/container"}
{block name="title"}申请提现{/block}
{block name="head_top"}
<style>
    .router {
        position: absolute;
        width: 100%;
        padding: 0;
    }

    .bg-color-red {
        background-color: #2c8eff !important;
    }
    .icon-weixinzhifu{
        color: #2c8eff;
    }
    .icon-qiandai{
        color: #2c8eff;
    }
    .icon-umidd17{
        color: #2c8eff;
    }
</style>
{/block}
{block name="content"}
<div v-cloak id="app">
    <div class="cash-withdrawal router">
        <div class="nav acea-row">
            <div v-for="(item, index) in navList" class="item font-color-red" @click="swichNav(index, item)"
                :key="index">
                <div class="line bg-color-red" :class="currentTab === index ? 'on' : ''"></div>
                <div class="iconfont" :class="item.icon + ' ' + (currentTab === index ? 'on' : '')"></div>
                <div>{{ item.name }}</div>
            </div>
        </div>
        <div class="wrapper">
            <div :hidden="currentTab !== 0" class="list">
                <div class="item acea-row row-between-wrapper">
                    <div class="name">持卡人</div>
                    <div class="input">
                        <input placeholder="请输入持卡人姓名" v-model="post.name" />
                    </div>
                </div>
                <div class="item acea-row row-between-wrapper">
                    <div class="name">卡号</div>
                    <div class="input">
                        <input placeholder="请填写卡号" v-model="post.cardnum" />
                    </div>
                </div>
                <div class="item acea-row row-between-wrapper">
                    <div class="name">银行</div>
                    <div class="input">
                        <select v-model="post.bankname">
                            <option value="">请选择银行</option>
                            <option v-for="(item, index) in banks" :key="index" :value="item.bank_name">
                                {{ item.bank_name }}
                            </option>
                        </select>
                    </div>
                </div>
                <div class="item acea-row row-between-wrapper">
                    <div class="name">提现</div>
                    <div class="input">
                        <input :placeholder="'最低提现金额' + minPrice" v-model="post.money" />
                    </div>
                </div>
                <div class="tip">当前可提现金额: {{ commissionCount }}</div>
                <div class="bnt bg-color-red" @click="submitted">提现</div>
            </div>
            <div :hidden="currentTab !== 1" class="list">
                <div class="item acea-row row-between-wrapper">
                    <div class="name">微信号</div>
                    <div class="input">
                        <input placeholder="请输入微信号" v-model="post.weixin" />
                    </div>
                </div>
                <div class="item acea-row row-between-wrapper">
                    <div class="name">提现</div>
                    <div class="input">
                        <input :placeholder="'最低提现金额' + minPrice" v-model="post.money" />
                    </div>
                </div>
                <div class="tip">当前可提现金额: {{ commissionCount }}</div>
                <div class="bnt bg-color-red" @click="submitted">提现</div>
            </div>
            <div :hidden="currentTab !== 2" class="list">
                <div class="item acea-row row-between-wrapper">
                    <div class="name">用户名</div>
                    <div class="input">
                        <input placeholder="请填写您的支付宝用户名" v-model="post.name" />
                    </div>
                </div>
                <div class="item acea-row row-between-wrapper">
                    <div class="name">账号</div>
                    <div class="input">
                        <input placeholder="请填写您的支付宝账号" v-model="post.alipay_code" />
                    </div>
                </div>
                <div class="item acea-row row-between-wrapper">
                    <div class="name">提现</div>
                    <div class="input">
                        <input :placeholder="'最低提现金额' + minPrice" v-model="post.money" />
                    </div>
                </div>
                <div class="tip">当前可提现金额: {{ commissionCount }}</div>
                <div class="bnt bg-color-red" @click="submitted">提现</div>
            </div>
        </div>
    </div>
    <shortcut></shortcut>
</div>
{/block}
{block name="foot"}
<script>
    var now_money = {$number}, extract_min_money = {$extract_min_money}, token = "{$token}",
        extract_bank = {$extract_bank}, brokerage_price = '{$brokerage_price}',
        extract_min_money = {$extract_min_money};
    require(['vue', 'helper', 'store','{__WAP_PATH}zsff/js/shortcut.js'], function (Vue, $h, app) {
        new Vue({
            el: '#app',
            data: {
                navList: [
                    {name: "银行卡", type: "bank", icon: "icon-qiandai"},
                    {name: "微信", type: "weixin", icon: "icon-weixinzhifu"},
                    {name: "支付宝", type: "alipay", icon: "icon-umidd17"}
                ],
                post: {
                    extract_type: "bank",
                    alipay_code: "",
                    money: "",
                    name: "",
                    bankname: "",
                    cardnum: "",
                    weixin: ""
                },
                currentTab: 0,
                minPrice: extract_min_money,
                banks: extract_bank,
                commissionCount: brokerage_price
            },
            watch: {
                number: function (n) {
                    if (n > now_money) this.number = now_money;
                }
            },
            methods: {
                swichNav: function (index, item) {
                    this.currentTab = index;
                    this.post.extract_type = item.type;
                },
                all_withdraw: function () {
                    this.number = now_money;
                },
                save: function (info) {
                    var that = this;
                    app.basePost($h.U({
                        c: 'spread',
                        a: 'save_withdraw',
                        q: {token: token}
                    }),info, function (res) {
                        $h.showMsg({
                            title: res.data.msg, icon: 'success', success: function () {
                                window.location.reload();
                            }
                        });
                    });
                },
                submitted() {
                    var bankname = this.post.bankname,
                        alipay_code = this.post.alipay_code,
                        money = this.post.money,
                        name = this.post.name,
                        cardnum = this.post.cardnum,
                        weixin = this.post.weixin,
                        that = this;
                    if (
                        parseFloat(money) > parseFloat(that.commissionCount) ||
                        parseFloat(that.commissionCount) == 0
                    )
                        return $h.pushMsgOnce("余额不足");
                    if (parseFloat(money) < parseFloat(that.minPrice))
                        return $h.pushMsgOnce("最低提现金额" + that.minPrice);
                    switch (that.post.extract_type) {
                        case "bank":
                            if (!name) {
                                return $h.pushMsgOnce('请填写持卡人姓名');
                            }
                            if (!cardnum) {
                                return $h.pushMsgOnce('请填写卡号');
                            }
                            if (!bankname) {
                                return $h.pushMsgOnce('请选择提现银行');
                            }
                            if (!money) {
                                return $h.pushMsgOnce('请填写提现金额');
                            }
                            var save = {
                                extract_type: that.post.extract_type,
                                bankname: bankname,
                                cardnum: cardnum,
                                name: name,
                                money: money
                            };
                            that.save(save);
                            break;
                        case "alipay":
                            if (!name) {
                                return $h.pushMsgOnce('请填写支付宝用户名');
                            }
                            if (!alipay_code) {
                                return $h.pushMsgOnce('请填写支付宝账号');
                            }
                            if (!money) {
                                return $h.pushMsgOnce('请填写提现金额');
                            }
                            var save = {
                                extract_type: that.post.extract_type,
                                alipay_code: alipay_code,
                                name: name,
                                money: money
                            };
                            that.save(save);
                            break;
                        case "weixin":
                            if (!weixin) {
                                return $h.pushMsgOnce('请填写提现微信号');
                            }
                            if (!money) {
                                return $h.pushMsgOnce('请填写提现金额');
                            }
                            var save = {
                                extract_type: that.post.extract_type,
                                weixin: weixin,
                                money: money
                            };
                            that.save(save);
                            break;
                    }
                }
            },
            mounted: function () {

            }
        })
    })
</script>
{/block}