<template>
    <div class="loginUser">
        <div class="search-wrapper">
            <el-form :inline="true" :model="searchForm" class="search_form" style="text-align: left">
                <el-form-item label="uid">
                    <el-input v-model="searchForm.uid" placeholder="请输入用户uid" @keyup.enter.native="onSubmit"></el-input>
                </el-form-item>
                <el-form-item label="用户姓名">
                    <el-input v-model="searchForm.userName" placeholder="请输入用户姓名" @keyup.enter.native="onSubmit">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table-wrapper">
            <table-template :tableData="tableData" :tableColumns="tableColumns" :loading="loading"
                :pagination="pagination" @Jump="jumpPage">
                <el-table-column fixed="right" label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button type="danger" size="mini" round @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </table-template>
        </div>
    </div>
</template>

<script>
import TableTemplate from "@/components/Table";
import { setName,setTel } from "@/utils";
import { queryListRealUser } from '@/api/currency/realUser.js'
export default {
    components: { TableTemplate },

    data() {
        return {
            searchForm: {
                uid: '',
                userName: '',
            },
            loading: false,
            tableColumns: [
                {
                    key: "userId",
                    label: "用户id",
                }, {
                    key: "userName",
                    label: "用户名称",
                }, {
                    key: "phoneNumber",
                    label: "电话",
                }, {
                    key: "idCard",
                    label: "身份证号码",
                }, {
                    key: "createTime",
                    label: "创建时间",
                },
            ],
            tableData: [],
            pagination: {
                total: 0,
                pageSize: 10,
                currentPage: 1,
            },
        }
    },
    methods: {
        init() {
            this.loading = true;
            let params = {
                uid: this.searchForm.uid,
                name: this.searchForm.userName,
                pageNum: this.pagination.currentPage,
                pageSize: this.pagination.pageSize,
            }
            queryListRealUser(params).then((res) => {
                this.loading = false;
                console.log(res);
                if (res.success) {
                    this.pagination.total = res.data.total;
                    if (res.data.total != 0) {
                        this.tableData = res.data.list;
                        if (localStorage.getItem('userName') == 'admin') {
                            // this.tableData = changeList(this.tableData)
                            this.tableData.map((item) => {
                                item.userName = setName(item.userName)
                                item.phoneNumber = setTel(item.phoneNumber)
                            })
                        }
                    } else {
                        this.tableData = []
                    }
                }
            })
        },
        jumpPage() {
            this.init();
        },
        onSubmit() {
            this.pagination.currentPage = 1;
            this.init();
        },
        del(val) {
            console.log(val)
        }
    },
    created() {
        this.init()
    },
}
</script>

<style lang="stylus" scoped>
@import '~@/stylus/common';

</style>