<template>
    <div>
        <el-form inline @submit.native.prevent="queryHandle">
            <!-- <el-form-item label="用户ID">
                <el-input v-model="query.userId" placeholder="请输入用户ID" />
            </el-form-item>
            <el-form-item label="用户名">
                <el-input v-model="query.userName" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item label="支付宝账号">
                <el-input v-model="query.zhifubao" placeholder="请输入支付宝账号" />
            </el-form-item> -->
            <el-form-item>
                <el-input v-model="query.alipayAccountName" placeholder="请输入支付宝账户姓名查询" />
            </el-form-item>
            <!-- <el-form-item label="提现类型">
                <el-select v-model="query.userType">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="用户提现" value="1"></el-option>
                    <el-option label="分销商提现" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="query.state">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="待转账" value="0"></el-option>
                    <el-option label="成功" value="1"></el-option>
                    <el-option label="失败" value="2"></el-option>
                    <el-option label="待审核" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="日期">
                <el-date-picker v-model="timeValue" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" @change="changeTime" :default-time="['00:00:00', '23:59:59']">
                </el-date-picker>
            </el-form-item> -->
            <el-form-item>
                <el-button type="primary" @click="queryHandle">查询</el-button>
                <el-button @click="resetHandle">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row>
            <el-col :span="6" class="cards">
                <div class="box">
                    <div class="box_num">
                        <div class="box_color">成功提现次数合计</div>
                        <div class="text_color">
                            <span>{{ count }}</span>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6" class="cards">
                <div class="box">
                    <div class="box_num">
                        <div class="box_color">成功提现金额合计</div>
                        <div class="text_color">
                            <span>{{ totalMoney }}</span>元
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-table v-loading="tableData.loading" :data="tableData.list" border stripe>
            <el-table-column label="用户ID" prop="userId"></el-table-column>
            <el-table-column label="用户名" prop="userName"></el-table-column>
            <el-table-column label="手机号" prop="phone"></el-table-column>
            <el-table-column label="邀请码" prop="inviterCode"></el-table-column>
            <el-table-column label="提现小计" prop="subTotal">
                <template slot-scope="scope">
                    <div>提现金额：￥{{ scope.row.subTotal }}</div>
                    <div>提现次数：{{ scope.row.subCount }}</div>
                </template>
            </el-table-column>
            <el-table-column label="提现账号" prop="zhifubao">
                <template slot-scope="scope">
                    {{ scope.row.zhiFuBaoName }} / {{ scope.row.zhiFuBao }}
                </template>
            </el-table-column>
        </el-table>
        <!-- <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 30, 40]" :page-size="tableData.limit" :current-page="tableData.page"
                layout="total" :total="tableData.total">
            </el-pagination>
        </div> -->
        <el-dialog title="提现审核" width="600px" :visible.sync="visible" @close="onClose">
            <el-form :model="form" :rules="rules" ref="form" label-width="80px" label-position="left">
                <el-form-item label="审核" prop="isAgree">
                    <el-radio-group v-model="form.isAgree">
                        <el-radio label="1"> 同意 </el-radio>
                        <el-radio label="0"> 拒绝 </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注" prop="refund" v-if="form.isAgree == 0">
                    <el-input v-model="form.refund" placeholder="拒绝原因"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer" style="display: flex; justify-content: flex-end;">
                    <el-button size="small" @click="visible = false"> 取 消 </el-button>
                    <el-button size="small" type="primary" :loading="confirmLoading"
                        @click="confirmHandle">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { summary_query } from "@/api/withdraw.js";
export default {
    data() {
        return {
            timeValue: [],
            query: {
                userId: "",
                userName: "",
                userType: '',
                zhifubao: "",
                zhifubaoName: "",
                state: "",
                startTime: "",
                endTime: "",
                alipayAccountName: ""
            },
            resetQuery: {},
            count: 0,
            totalMoney: 0,
            tableData: {
                page: 1,
                limit: 10,
                total: 0,
                list: [],
                loading: false
            },
            visible: false,
            confirmLoading: false,
            form: {
                id: "",
                isAgree: "1",
                refund: ""
            },
            rules: {
                isAgree: [],
                refund: [
                    { required: true, message: "请输入拒绝原因", trigger: "blur" }
                ]
            }
        };
    },
    mounted() {
        this.resetQuery = { ...this.query };
        this.getTableData();
    },
    methods: {
        // 关闭弹窗, 重置表单
        onClose() {
            this.$refs.form.resetFields();
        },
        // 打开发放奖品弹窗
        deliverHandle(row) {
            this.form.id = row.id;
            this.visible = true;
        },
        // 提交发放奖品
        confirmHandle() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    this.confirmLoading = true;
                    try {
                        const { data } = await cashOutAuditAudit(this.form);
                        if (data.code == 0) {
                            this.$message.success("审核成功");
                            this.visible = false;
                            this.getTableData();
                        } else {
                            this.$message.error(data.msg || "审核失败");
                        }
                    } catch (error) {
                        console.log(error);
                    }
                    this.confirmLoading = false;
                }
            });
        },
        // 开始查询
        queryHandle() {
            this.tableData.page = 1;
            this.getTableData();
        },
        // 重置查询
        resetHandle() {
            this.query = { ...this.resetQuery };
            this.timeValue = [];
            this.getTableData();
        },
        // 确认选择日期
        changeTime() {
            if (this.timeValue.length == 2) {
                this.query.startTime = this.timeValue[0];
                this.query.endTime = this.timeValue[1];
            } else {
                this.query.startTime = "";
                this.query.endTime = "";
            }
        },
        // 分页数量
        handleSizeChange(size) {
            this.tableData.limit = size;
            this.getTableData();
        },
        // 分页
        handleCurrentChange(val) {
            this.tableData.page = val;
            this.getTableData();
        },
        // 获取列表
        async getTableData() {
            try {
                this.tableData.loading = true;
                const { data } = await summary_query({
                    ...this.query
                });
                this.tableData.loading = false;
                this.tableData.list = data.data.list;
                this.tableData.total = data.data.count;

                this.count = data.data.count;
                this.totalMoney = data.data.sum;
            } catch (error) {
                this.tableData.loading = false;

                this.tableData.list = [];
                this.tableData.total = 0;

                this.count = 0;
                this.totalMoney = 0;

                console.log('error===', error);
            }
        }
    }
};
</script>

<style scoped lang="scss">
.box {
    padding: 44px;
    border: 1px solid #eee;
    margin: 0 15px 25px 0;
}

.box_num {
    font-size: 14px;
    color: #66b1ff;
}

.box_num .box_color {
    color: #333;
    font-size: 14px;
    margin-bottom: 15px;
}

.box_num div span {
    font-size: 20px;
    margin-left: 5px;
}

.text_color {
    color: #4f9dec;
}

.text_color span {
    margin-right: 5px;
}
</style>
