<template>
    <div class="app-container">
        <div class="main">
            <div class="main-right">
                <p class="center">账户余额(元)</p>
                <p class="center number">{{ adapayMember.acctBalance }}</p>
                <p class="center">
                    注:
                    <span class="text">账户余额 = 可用余额 + 冻结余额</span>
                </p>
            </div>
            <div class="main-right">
                <p class="center">可用余额(元)</p>
                <p class="center number">{{ adapayMember.avlBalance }}</p>
                <el-button type="primary" style="display: block; margin: 0 auto"
                    v-if="adapayMember.avlBalance > withdrawalFee" @click="dialogVisible = true">提现申请</el-button>
                <p class="center" v-else>
                    注:
                    <span class="text">该余额大于{{ withdrawalFee }}元时，才可发起取现</span>
                </p>
            </div>
            <div class="main-right">
                <p class="center">冻结金额(元)</p>
                <p class="center number">{{ adapayMember.frzBalance }}</p>
                <p class="center">
                    注:
                    <span class="text">当配置了自动结算功能，在每日发起结算时会将可用余额转为冻结金额。该部分金额不允许取现。</span>
                </p>
            </div>
            <div class="main-right">
                <p class="center">昨日日终余额(元)</p>
                <p class="center number">{{ adapayMember.lastAvlBalance }}</p>
                <p class="center">
                    注:
                    <span class="text">一</span>
                </p>
            </div>
        </div>
        <!-- <el-tabs
            v-model="activeName"
            type="card"
            @tab-click="handleClick"
            style="margin-top: 10px"
        >
            <el-tab-pane label="清分记录" name="first">
                <el-form
                    ref="queryForm"
                    :inline="true"
                    label-width="220px"
                >
                    <el-form-item label="清分时间">
                        <el-date-picker
                            v-model="createTimeRange"
                            style="width: 240px"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :default-time="['00:00:00', '23:59:59']"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :clearable="false"
                        ></el-date-picker>
                    </el-form-item>

                    <el-form-item label="提现申请时间" prop="orderCode">
                        <el-date-picker
                            v-model="createTimeRange"
                            style="width: 240px"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :default-time="['00:00:00', '23:59:59']"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :clearable="false"
                        ></el-date-picker>
                    </el-form-item>

                    <el-form-item label="清分单号">
                      <el-input></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary">搜索</el-button>
                      <el-button>重置</el-button>
                    </el-form-item>
                    <div v-if="buttonBoolean">
                       <el-form-item label="电站ID"></el-form-item>
                       <el-form-item label="充电场站"></el-form-item>
                       <el-form-item label="订单单号"></el-form-item>
                       <el-form-item label="订单状态"></el-form-item>
                       <el-form-item label="流水状态"></el-form-item>
                       <el-form-item label="流水类型"></el-form-item>
                       <el-form-item label="清分单号"></el-form-item>


                        <el-form-item label="订单来源"></el-form-item>
                        <el-form-item label="清分周期类型"></el-form-item>
                        <el-form-item label="清分状态"></el-form-item>
                        <el-form-item label="提现单号"></el-form-item>
                    </div>
                    <el-button
                        @click="showOrHide()"
                        style="border-color: white;
                            background-color: white;
                            font-size: x-small;
                            color: #50bfff;
                            padding: 1px 2px;
                            margin-left: 40%;
                            margin-top: 0px;
                            margin-bottom: 15px;"
                        :icon="icon"
                        >{{ showOrHideText }}
                    </el-button>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="订单流水" name="second">订单流水</el-tab-pane>
        </el-tabs> -->
        <el-dialog title="提现申请" :visible.sync="dialogVisible" width="33%">
            温馨提示
            <div style="font-size: 12px; color: gray">
                <p>1.提现将在3个工作日内审核到账,节假日审核顺延</p>
                <p>2.部分流量方的充电订单存在账期,需要一定周期后才开始执行清分</p>
                <p>3.提现为银行自动付款,根据银行要求会收取手续费,请知悉</p>
            </div>
            <p>
                可提现（元）：
                <span class="number">{{ adapayMember.avlBalance }}</span>
            </p>
            <p>
                手续费（元）：
                <span class="number">{{ withdrawalFee.toFixed(2) }}</span>
            </p>
            <p>
                实际到账（元）：
                <span class="number">{{ adapayMember.avlBalance - withdrawalFee }}</span>
            </p>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">提交</el-button>
            </span>
        </el-dialog>
        <!-- <button @click="handleClose">aaaaa</button> -->
    </div>
</template>

<script>
import { queryAdapayAccountBalance, withdraw } from "@/api/adapayMember/adapayMember";
export default {
    props: ["merchantId"],
    data() {
        return {
            activeName: "first",
            showOrHideText: "显示更多查询条件",
            buttonBoolean: false,
            //图标，可根据自己的需求匹配
            icon: "el-icon-caret-bottom",
            createTimeRange: "",
            adapayMember: {},
            dialogVisible: false,
            withdrawalFee: 5,
        };
    },
    methods: {
        handleClose() {
            this.$confirm("确认提交？")
                .then((_) => {
                    let params = {
                        merchantId: this.merchantId,
                        cashAmt: this.adapayMember.avlBalance,
                    };
                    withdraw(params).then((response) => {
                        console.log("res 提现金额", response);
                        if (response.code !== 200) return this.$modal.msgError(response.msg);
                        this.$modal.msgSuccess("操作成功");
                        this.getList();
                    });

                    this.dialogVisible = false;
                })
                .catch((_) => { });
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        showOrHide() {
            if (this.buttonBoolean) {
                this.icon = "el-icon-caret-bottom";
                this.showOrHideText = "显示更多查询条件";
                this.buttonBoolean = !this.buttonBoolean;
            } else {
                this.icon = "el-icon-caret-top";
                this.showOrHideText = "收起";
                this.buttonBoolean = !this.buttonBoolean;
            }
        },
        // 提现弹窗确定事件
        submit() {
            // let params = {
            //     merchantId: this.merchantId,
            //     cashAmt: this.adapayMember.avlBalance,
            // };
            // withdraw(params).then((response) => {
            //     console.log("res 提现金额", response);
            //     if (response.code !== 200) return this.$modal.msgError(response.msg);
            //     this.$modal.msgSuccess("操作成功");
            //     this.getList();
            // });
            this.handleClose();
        },
        getList() {
            console.log("this.merchantId", this.merchantId);
            let param = {
                merchantId: this.merchantId,
            };
            queryAdapayAccountBalance(param).then((response) => {
                console.log("查询 queryAdapayAccountBalance", response);
                this.adapayMember = response.data;
            });
        },
    },
    created() {
        this.getList();
    },
};
</script>
<style lang="scss" scoped>
.number {
    color: #50bfff;
    font-size: 20px;
    font-weight: bolder;
}

.center {
    text-align: center;
}

.text {
    font-size: 12px;
    color: red;
}

.main {
    display: flex;
    justify-content: space-between;

    // align-items: baseline;
    .main-right {
        width: 310px;
        margin-right: 20px;
        border: 1px solid #e6ebf5;
        border-radius: 10px;
        padding: 10px;
        transition: all 0.2s linear;
    }
}

.main-right:hover {
    box-shadow: 0 0 5px 3px #999;
}

.bord {
    position: relative;
    top: 68px;
    height: 60px;
    border-left: 1px solid gray;
}

.card {
    // width: 230px;
    padding: 10px;
}
</style>
