<template>
    <table-page-template>
        <el-form :inline='true' :model='queryData' slot='form' size='mini'>
            <el-form-item label='用户'>
                <el-input v-model.trim='queryData.username' placeholder='请输入用户名进行查询' clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type='primary' @click='query'>查询</el-button>
                <el-button v-if='hasPermission("system:user:create")' type='primary' @click='openAdd(null)'>创建用户</el-button>
            </el-form-item>
        </el-form>
        <el-table :data='pageData.users' border stripe slot='table'>
            <el-table-column prop='id' label='ID'></el-table-column>
            <el-table-column prop='name' label='Name'></el-table-column>
            <el-table-column prop='remark' label='Remark'></el-table-column>
            <el-table-column prop='status' label='Status'></el-table-column>
            <el-table-column label='操作' width='150'>
                <template slot-scope='{row}'>
                    <el-button type='primary' size='mini' @click='openAdd(row)'>编辑</el-button>
                    <el-button type='danger' size='mini' @click='deleteBtnClicked(row)'>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <base-pagination :total='pageData.total' @pageChanged='pageChanged' slot='pagination'></base-pagination>
        <user-add ref='addUser' @confirm='getData' slot='dialog'></user-add>
    </table-page-template>
</template>
<script>
import userapi from '@/api/system/user'
import UserAdd from './UserAdd'
export default {
    name: 'UserList',
    data() {
        return {
            queryData: {
                username: null
            },
            pageData: {
                page: 1,
                size: 50,
                total: 0,
                users: []
            }
        }
    },
    methods: {
        openAdd(user) {
            this.$refs.addUser.open(user)
        },
        pageChanged(page, size) {
            this.pageData.page = page
            this.pageData.size = size
            this.getData(page, size)
        },
        query() {
            this.pageData.page = 1
            this.pageData.size = 10
            this.getData()
        },
        async getData() {
            let vm = this
            let username = this.queryData.username
            let criteria = {}
            if (username) {
                criteria.name = username
            }

            let request = { page: vm.pageData.page, size: vm.pageData.size, criteria: criteria }
            userapi.query(request).then(resp => {
                vm.pageData.total = resp.count
                vm.pageData.users = resp.content
            })
        }
    },
    created() {
        this.query()
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            vm.query()
        })
    },
    components: {
        'user-add': UserAdd
    }
}
</script>
