<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 label="支付宝姓名">
                <el-input v-model="query.zhifubaoName" 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-table v-loading="tableData.loading" :data="tableData.list" border stripe>
            <el-table-column label="ID" prop="id" width="80"></el-table-column>
            <el-table-column label="用户ID" prop="userId" width="100"></el-table-column>
            <el-table-column label="用户名" prop="userName" width="200">
                <template slot-scope="scope">
                    <template v-if="scope.row.relationId">
                        <div class="danger_user">
                            <div class="user_info">
                                <i class="icon el-icon-warning"></i>
                                危险用户：{{ scope.row.userName }}
                            </div>
                            <el-tag type="danger" disable-transitions>{{ scope.row.relationId }}</el-tag>
                        </div>
                    </template>
                    <template v-else>
                        {{ scope.row.userName }}
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="提现账号" prop="zhifubao" width="200">
                <template slot-scope="scope">
                    {{ scope.row.zhifubaoName }} / {{ scope.row.zhifubao }}
                </template>
            </el-table-column>
            <el-table-column label="提现信息" width="200">
                <template slot-scope="scope">
                    <div>提现金额：￥{{ scope.row.money }}</div>
                    <div>手续费：￥{{ scope.row.rate }}</div>
                    <div style="margin-top: 6px;">
                        提现类型：
                        <span v-if="scope.row.userType == 1">用户提现</span>
                        <span v-if="scope.row.userType == 2">代理提现</span>
                    </div>
                    <div>订单编号：{{ scope.row.orderNumber }}</div>
                </template>
            </el-table-column>
            <el-table-column label="提现统计" width="200">
                <template slot-scope="scope">
                    <div>成功提现金额：￥{{ scope.row.total }}</div>
                    <div>成功提现次数：{{ scope.row.count }}</div>
                    <div style="margin-top: 6px;">待审提现金额合计：￥{{ scope.row.verifyTotal }}</div>
                    <div>待审提现申请笔数：{{ scope.row.verifyCount }}</div>
                </template>
            </el-table-column>
            <el-table-column label="申请时间" prop="createAt" width="200"></el-table-column>
            <el-table-column label="转账时间" prop="outAt" width="200"></el-table-column>
            <el-table-column label="状态" prop="state" width="200">
                <template slot-scope="scope">
                    <el-tag type="warning" v-if="scope.row.state == 0" disable-transitions>
                        待转账
                    </el-tag>
                    <el-tag type="success" v-if="scope.row.state == 1" disable-transitions>
                        成功
                    </el-tag>
                    <div class="tag_danger" v-if="scope.row.state == 2">
                        失败：{{ scope.row.refund }}
                    </div>
                    <el-tag type="warning" v-if="scope.row.state == 3" disable-transitions>
                        待审核
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="100" fixed="right">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="deliverHandle(scope.row)" v-if="scope.row.state == 3">
                        待审核
                    </el-button>
                    <el-button type="text" disabled v-else>已审核</el-button>
                </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,sizes, prev, pager, next,jumper" :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 dayjs from 'dayjs'
import { cashOutAuditPage, cashOutAuditAudit } from "@/api/withdraw.js";
export default {
    data() {
        return {
            timeValue: [],
            query: {
                userId: "",
                userName: "",
                userType: '',
                zhifubao: "",
                zhifubaoName: "",
                state: "",
                startTime: "",
                endTime: ""
            },
            resetQuery: {},
            tableData: {
                page: 1,
                limit: 10,
                total: 0,
                list: [],
                loading: false
            },
            visible: false,
            confirmLoading: false,
            form: {
                id: "",
                isAgree: "1",
                refund: "",
                userId: ''
            },
            rules: {
                isAgree: [],
                refund: [
                    { required: true, message: "请输入拒绝原因", trigger: "blur" }
                ]
            }
        };
    },
    mounted() {
        this.resetQuery = { ...this.query };
        this.cashOutAuditPage();
    },
    methods: {
        // 关闭弹窗, 重置表单
        onClose() {
            this.$refs.form.resetFields();
        },
        // 打开发放奖品弹窗
        deliverHandle(row) {
            this.form.id = row.id;
            this.form.userId = row.userId
            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.cashOutAuditPage();
                        } else {
                            this.$message.error(data.msg || "审核失败");
                        }
                    } catch (error) {
                        console.log(error);
                    }
                    this.confirmLoading = false;
                }
            });
        },
        // 开始查询
        queryHandle() {
            this.tableData.page = 1;
            this.cashOutAuditPage();
        },
        // 重置查询
        resetHandle() {
            this.query = { ...this.resetQuery };
            this.timeValue = [];
            this.cashOutAuditPage();
        },
        // 确认选择日期
        changeTime(e) {
            console.log(e);
            this.timeValue = e
            if (this.timeValue.length == 2) {
                this.query.startTime = dayjs(this.timeValue[0]).format("YYYY-MM-DD HH:mm:ss");
                this.query.endTime = dayjs(this.timeValue[1]).format("YYYY-MM-DD HH:mm:ss");
            } else {
                this.query.startTime = "";
                this.query.endTime = "";
            }
        },
        // 分页数量
        handleSizeChange(size) {
            this.tableData.limit = size;
            this.cashOutAuditPage();
        },
        // 分页
        handleCurrentChange(val) {
            this.tableData.page = val;
            this.cashOutAuditPage();
        },
        // 获取列表
        async cashOutAuditPage() {
            try {
                this.tableData.loading = true;
                const { data } = await cashOutAuditPage({
                    ...this.query,
                    page: this.tableData.page,
                    limit: this.tableData.limit
                });
                this.tableData.loading = false;
                this.tableData.list = data.page.list;
                this.tableData.total = data.page.totalCount;
            } catch (error) {
                this.tableData.loading = false;
                console.log(error);
            }
        }
    }
};
</script>

<style scoped lang="scss">
.danger_user {
    display: flex;
    flex-direction: column;
    gap: 4px;

    .user_info {
        display: flex;
        align-items: center;
        $color: #F56C6C;
        color: $color;
        gap: 4px;

        .icon {
            color: $color;
        }
    }
}

.tag_danger {
    background-color: rgba(245, 108, 108, .1);
    color: #f56c6c;
    border-radius: 4px;
    border: 1px solid rgba(245, 108, 108, .2);
    padding: 2px 10px;
}
</style>
