<template>
    <div>
        <div>
            <el-form :inline="true" :model="query" class="demo-form-inline">
                <el-form-item label="手机号">
                    <el-input v-model="query.phone" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input v-model="query.name" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getTableData">查询</el-button>
                    <el-button @click="resetHandle">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-table :data="tableData.list" v-loading="tableData.loading" border stripe>
                <el-table-column label="用户ID" prop="userId"></el-table-column>
                <el-table-column label="用户名" prop="name"></el-table-column>
                <el-table-column label="手机号" prop="mobile"></el-table-column>
                <el-table-column label="实名信息" prop="certName" width="300">
                    <template slot-scope="scope">
                        <div>姓名：{{ scope.row.certName }}</div>
                        <div>身份证号：{{ scope.row.certNo }}</div>
                        <div>银行卡号：{{ scope.row.accountNo }}</div>
                        <div>开户行：{{ scope.row.bankName }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="edit(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <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="100px" label-position="left">
                <el-form-item label="姓名" prop="certName">
                    <el-input v-model="form.certName" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="身份证号" prop="certNo">
                    <el-input v-model="form.certNo" placeholder="请输入身份证号"></el-input>
                </el-form-item>
                <el-form-item label="银行卡号" prop="accountNo">
                    <el-input v-model="form.accountNo" placeholder="请输入银行卡号"></el-input>
                </el-form-item>
                <el-form-item label="预留手机号" prop="mobile">
                    <el-input v-model="form.mobile" placeholder="请输入预留手机号"></el-input>
                </el-form-item>
                <el-form-item label="开户行" prop="bankName">
                    <el-input v-model="form.bankName" 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 { userInfo_list, userInfo, userInfoDel } from "@/api/withdraw.js";
export default {
    data() {
        return {
            query: {
                phone: "",
                name: "",
            },
            resetQuery: {},
            tableData: {
                page: 1,
                limit: 10,
                total: 0,
                list: [],
                loading: false
            },
            visible: false,
            confirmLoading: false,
            form: {
                userId: '',
                certName: "",
                certNo: "",
                accountNo: "",
                mobile: "",
                bankName: "",
            },
            rules: {
                certName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
                certNo: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
                accountNo: [{ required: true, message: "请输入银行卡号", trigger: "blur" }],
                mobile: [{ required: true, message: "请输入预留手机号", trigger: "blur" }],
                bankName: [{ required: true, message: "请输入开户行", trigger: "blur" }],
            }
        }
    },
    mounted() {
        this.resetQuery = { ...this.query };
        this.getTableData()
    },
    methods: {
        // 确定编辑
        confirmHandle() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        this.confirmLoading = true
                        await userInfo(this.form)
                        this.visible = false
                        this.$message.success('编辑成功')
                        this.getTableData()
                    } catch (error) {
                        console.log(error);
                    }
                    this.confirmLoading = false
                }
            })
        },
        // 关闭弹窗, 重置表单
        onClose() {
            this.$refs.form.resetFields();
        },
        // 编辑
        edit(row) {
            this.form = { ...row }
            this.visible = true
        },
        // 删除
        del(row) {
            console.log(row);
            this.$confirm('是否删除该用户信息?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                try {
                    await userInfoDel({ userId: row.userId })
                    this.$message.success('删除成功')
                    this.getTableData()
                } catch (error) {
                    console.log(error);
                }
            }).catch(() => { })
        },
        // 重置
        resetHandle() {
            this.query = { ...this.resetQuery }
            this.tableData.page = 1
            this.getTableData()
        },
        // 分页数量
        handleSizeChange(size) {
            this.tableData.page = 1;
            this.tableData.limit = size;
            this.getTableData();
        },
        // 分页
        handleCurrentChange(val) {
            this.tableData.page = val;
            this.getTableData();
        },
        // 获取数据
        async getTableData() {
            try {
                this.tableData.loading = true
                const { data } = await userInfo_list({
                    page: this.tableData.page,
                    limit: this.tableData.limit,
                    phone: this.query.phone,
                    name: this.query.name,
                })
                this.tableData.list = data.data.list
                this.tableData.total = data.data.totalCount
            } catch (error) {
                console.log(error);
            }
            this.tableData.loading = false
        }
    }

}
</script>