<template>
    <div class="page">
        <div class="info card">
            <h1 class="tit">账号信息</h1>
            <ul class="info-list" v-if="!loading && account">
                <li class="item">
                    <div class="key">姓名:</div>
                    <div class="value">{{ account.name }}</div>
                </li>
                <li class="item">
                    <div class="key">微信号:</div>
                    <div class="value">{{ account.wechat }}</div>
                </li>
                <li class="item">
                    <div class="key">银行:</div>
                    <div class="value">{{ account.bank }}</div>
                </li>
                <li class="item">
                    <div class="key">开户行:</div>
                    <div class="value">{{ account.bankBranch }}</div>
                </li>
                <li class="item">
                    <div class="key">卡号:</div>
                    <div class="value">{{ account.bankAccount }}</div>
                </li>
            </ul>
            <div class="no-bind" v-if="!loading && !account">
                <p class="text">您还没有绑定提现账号信息</p>
                <a class="go-bind" @click="jump('/pages/wallet/bind')"
                    >绑定提现账号信息</a
                >
            </div>
        </div>
        <div class="money card">
            <h1 class="tit">店铺余额</h1>
            <div class="money-num">
                <div class="num">￥{{ total / 100 }}</div>
                <div class="view" @click="jump('/pages/wallet/bill')">
                    查看账单
                </div>
            </div>
        </div>
        <div class="money card">
            <h1 class="tit">可提现金额</h1>
            <div class="money-num">
                <div class="num">￥{{ balance / 100 }}</div>
                <!-- <div class="view" @click="jump('/pages/wallet/bill')">
                    查看账单
                </div> -->
            </div>
            <p class="tip">最低提现2元，单日上线20000元</p>
            <div class="input">
                <input
                    type="digit"
                    v-model="formVal"
                    placeholder="￥0"
                    @input="valChange"
                />
            </div>
            <p class="tip tip-color" v-if="showErr">
                {{ errStr }}
            </p>
            <button
                v-if="!loading && account"
                type="button"
                class="btn"
                @click="withdrawal"
            >
                申请提现
            </button>
        </div>
        <div class="card record">
            <h1 class="tit">
                提现记录
                <!-- <span class="more" @click="jump('/pages/wallet/withdrawal-list')">
                    查看更多
                    <my-image
                        class="arrow"
                        src="/static/common/arrows_left.png"
                    ></my-image>
                </span> -->
            </h1>
            <ul class="table">
                <li class="row">
                    <div class="item">申请时间</div>
                    <div class="item">结算方式</div>
                    <div class="item">金额</div>
                    <div class="item">状态</div>
                </li>
                <li class="row" v-for="item of withdrawalList" :key="item.id" >
                    <div class="item">
                        {{ item.applyTime | dateFormat("yyyy/MM/dd") }}
                    </div>
                    <div class="item">
                        {{ item.method | method }}
                    </div>
                    <div class="item">
                        {{ item.amount / 100 }}
                    </div>
                    <div class="item">
                        {{ item.status | status }}
                    </div>
                </li>
            </ul>
        </div>

        <uni-popup ref="popup" type="dialog">
            <uni-popup-dialog
                mode="input"
                :title="'提现备注'"
                :content="false"
                :inputType="'text'"
                placeholder="请输入备注"
                @confirm="popupConfirm"
            ></uni-popup-dialog>
        </uni-popup>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
import uniPopupDialog from "../../components/uni-popup/uni-popup-dialog";
import uniPopup from "../../components/uni-popup/uni-popup";

export default {
    name: "",
    components: { MyImage, uniPopupDialog, uniPopup },
    // 数据
    data() {
        return {
            formVal: "",
            withdrawalPageIndex: 1,
            withdrawalList: [],
            withdrawalTotal: "",
            account: null,
            balance: 0,
            total: 0,
            loading: false,
            showErr: false,
            errStr: "",
            deviceName: "",
            deviceInfo: "",
        };
    },
    filters: {
        status(v) {
            let obj = {
                0: "审核中",
                1: "待打款",
                2: "已完成",
                3: "未通过",
                4: "打款失败",
            };
            let str = obj[v];
            return str || "";
        },
        method(v) {
            let obj = {
                1: "微信",
                2: "银行卡",
            };
            return obj[v] || "";
        },
    },
    onLoad() {
        let self = this;
        uni.getSystemInfo({
            success: function (res) {
                self.deviceName = res.brand;
                self.deviceInfo = res.model;
            },
        });
    },
    async onShow() {
        this.getWithdrawalInfo();
    },

    // onPullDownRefresh() {
    //     this.getList();
    // },

    // 函数
    methods: {
        getWithdrawalInfo() {
            uni.showLoading({
                title: "加载中...",
            });
            this.loading = true;
            this.api.get("/User/GetWithdrawalInfo").then((res) => {
                uni.hideLoading();
                this.loading = false;
                this.account = res.data.account;
                this.balance = res.data.balance;
                this.total = res.data.total;
                this.withdrawalList = res.data.withdrawalList.data;
            });
        },

        withdrawal() {
            if (!this.formVal) {
                return this.fn.showToast("请输入提现金额");
            }
            if (this.formVal * 100 > this.balance) {
                return this.fn.showToast(
                    "提现金额不能大于" + this.balance / 100 + "元"
                );
            }
            if (this.formVal * 100 < 200) {
                return this.fn.showToast("提现金额不能小于2元");
            }
            // this.$refs.popup.open({
            //     type: "dialog",
            // });
            uni.showLoading({
                title: "提交中...",
            });
            let data = {
                amount: this.formVal * 100,
                // remark: value,
                deviceInfo: this.deviceInfo,
                deviceName: this.deviceName,
            };
            this.api
                .post("/User/Withdrawal", data, { pass: true })
                .then((res) => {
                    this.submitLoading = false;
                    uni.hideLoading();
                    if (res.success) {
                        // 刷新页面数据
                        this.formVal = "";
                        this.getWithdrawalInfo();
                        this.fn.showToast("提现成功");
                    } else {
                        this.fn.showModal({
                            content: "错误信息：" + res.message,
                            showCancel: false,
                        });
                    }
                });
        },
        popupConfirm(done, value) {
            if (!value) {
                return this.fn.showToast("请输入提现备注");
            }
            console.log(this.formVal, value);
            done();
        },

        valChange() {
            if (this.formVal) {
                let val = Number(this.formVal);
                if (val > this.balance / 100) {
                    this.showErr = true;
                    this.errStr = "提现金额超出总金额，请重新填写";
                    return;
                }
                if (val < 2) {
                    this.showErr = true;
                    this.errStr = "提现金额不能小于2元，请重新填写";
                    return;
                }
            }
            this.showErr = false;
        },
    },

    // 数据计算
    computed: {
        user() {
            return this.$store.state.user.user;
        },
    },

    // 数据监听
    watch: {},
};
</script>


<style lang="scss" scoped>
.card {
    margin: px(40) px(40);
    border: 1px solid #efefef;
    padding: px(40);
    background-color: #fff;
    .tit {
        font-size: px(44);
        font-weight: bold;
        padding-bottom: px(20);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .more {
        color: #409eff;
        font-size: px(40);
        display: flex;
        align-items: center;
        font-weight: normal;
        .arrow {
            width: px(30);
            height: px(30);
            transform: rotate(180deg);
            /deep/ img {
                width: px(30);
                height: px(30);
            }
        }
    }
}
.info {
    .item {
        margin-top: px(20);
        font-size: px(44);
        display: flex;
        align-items: start;
        line-height: px(60);
        .key {
            margin-right: px(20);
            flex-shrink: 0;
            color: #666;
        }
    }
}
.money {
    .money-num {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: px(20) 0;
        .num {
            font-size: px(56);
            color: red;
        }
        .view {
            width: px(340);
            height: px(88);
            border: 1px solid rgb(0, 188, 38);
            color: rgb(0, 188, 38);
            font-size: px(44);
            text-align: center;
            line-height: px(88);
            border-radius: px(10);
        }
    }
    .input {
        margin: px(30) 0;
        input {
            height: px(100);
            padding: 0 px(20);
            border: 1px solid #ededed;
        }
    }
    .tip {
        font-size: px(40);
        color: #999;
        &.tip-color {
            color: rgb(255, 173, 129);
        }
    }
    .btn {
        margin-top: px(40);
        background-color: rgb(0, 188, 38);
        color: #fff;
        border: none;
    }
}
.record {
    .table {
        margin-top: px(30);
        .row {
            display: flex;
            border-right: 1px solid #efefef;
            border-bottom: 1px solid #efefef;
        }
        .item {
            border-left: 1px solid #efefef;
            border-top: 1px solid #efefef;
            width: 25%;
            flex-shrink: 0;
            font-size: px(42);
            // text-align: center;
            padding: px(20);
            @include omits(4);
            &:nth-child(1) {
                width: 30%;
            }
            &:nth-child(2) {
                width: 30%;
            }
            &:nth-child(3) {
                width: 20%;
            }
            &:nth-child(4) {
                width: 20%;
            }
        }
    }
}
.no-bind {
    .text {
        font-size: px(44);
        color: #666;
        margin-top: px(30);
    }
    .go-bind {
        width: px(400);
        height: px(100);
        line-height: px(100);
        text-align: center;
        border-radius: px(10);
        margin: px(60) auto px(100);
        border: 1px solid rgb(0, 188, 38);
        color: rgb(0, 188, 38);
    }
}
</style>