<template>
    <div class="users">
        <el-form :inline="true" :model="formData" ref="form" class="option">
            <el-form-item label="帐号:" prop="account">
                <el-input v-model.trim="formData.account" @keyup.enter.native="handleQuery" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="姓名:" prop="name">
                <el-input v-model.trim="formData.name" @keyup.enter.native="handleQuery" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="联系方式:" prop="phone_num">
                <el-input type="number" v-model.trim="formData.phone_num" @keyup.enter.native="handleQuery" placeholder="请输入"></el-input>
            </el-form-item>
            <el-button class="ml" icon="el-icon-refresh-right" @click="resetForm">重置</el-button>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
        </el-form>
        <el-table
            :data="list"
            class="res"
            border
            v-loading="loading">
            <el-table-column type="index" align="center" label="序号" width="80" />
            <el-table-column prop="name" label="姓名" align="center" />
            <el-table-column prop="account" label="帐号" align="center" />
            <el-table-column prop="phone_num" label="联系方式" align="center" />
            <el-table-column prop="action" label="操作" align="center" width="80">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleConfirm(scope.row)">选择</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="custom-pagination">
            <div class="info">
                <span>共 {{ total }} 条记录</span>
            </div>
            <el-pagination
                background
                class="custom-page"
                layout="prev, pager, next"
                :current-page="query.page"
                :page-size="query.size"
                :total="total"
                @current-change="handlePageChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { getUsers } from '@/api/system_user';
import { notEmpty } from '@/utils/tool';

export default {
    name: 'ChooseUser',
    data () {
        return {
            loading: false,
            formData: {
                account: '',
                name: '',
                phone_num: '',
            },
            query: {
                page: 1,
                size: 10,
                sort: 'create_time desc',
            },
            total: 0,
            list: [],
        }
    },
    mounted () {
        this.handleQuery()
    },
    methods: {
        resetForm() {
            this.$refs.form.resetFields()
            this.handleQuery()
        },
        handlePageChange(v) {
            this.query.page = v
            this.getUserData()
        },
        handleQuery() {
            this.query.page = 1
            this.getUserData()
        },
        getUserData() {
            this.loading = true;
            let query = [];
            if (notEmpty(this.formData.name)) {
                query.push(`name==*${this.formData.name}*`);
            }
            if (notEmpty(this.formData.phone_num)) {
                query.push(`phone_num==${this.formData.phone_num}`);
            }
            if (notEmpty(this.formData.account)) {
                query.push(`account==${this.formData.account}`);
            }
            getUsers(this.query).then(res => {
                this.total = parseInt(res.total || '0');
                this.list = res.data || [];
                this.loading = false
            })
        },
        handleConfirm(row) {
            this.$emit('changeUser', row)
        }
    }
}
</script>