<template>
    <div class="template-box">
        <div class="template-tools">
            <el-input
                style="width: 300px"
                placeholder="输入用户名进行查询"
                v-model="searchValue"
                clearable
                @clear="searchChange"
                @keyup.enter.native="searchChange"
            >
                <i slot="suffix" class="el-input__icon el-icon-search" @click="searchChange"></i>
            </el-input>
            <el-button style="float: right" @click="addUser">添加</el-button>
        </div>

        <div class="template-table">
            <el-table
                height="100%"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                :header-cell-style="{ background: '#d9d9d9', color: '#2b2b2b' }"
                v-loading="loading"
            >
                <el-table-column prop="name" label="用户名" header-align="center" align="center"></el-table-column>
                <el-table-column prop="roleName" label="角色" header-align="center" align="center"></el-table-column>
                <el-table-column label="操作" width="150" header-align="center" class="btn">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit-outline" plain size="mini" @click="editUser(scope.row)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" plain size="mini" @click="delUser(scope.row)"></el-button>
                    </template>
                </el-table-column>
                <template slot="empty">
                    <div style="height: 60%; transform: translateY(50%)">
                        <i class="icon-wushuju iconfont"></i>
                        暂无用户数据
                    </div>
                </template>
            </el-table>
        </div>

        <div class="template-pagination">
            <my-pagination @change="getUserList" :page="page" :key="pageKey"></my-pagination>
        </div>
        <user-dialog ref="userDialog" @refresh="getUserList" :type="type"></user-dialog>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import { queryUsers, deleteUsers } from "@/api/system/persagy-sso-server";
import myPagination from "@/components/ledger/lib/myPagination";
import userDialog from "./dialog/userDialog.vue";

export default {
    name: "userAdm",
    components: { myPagination, userDialog },
    data() {
        return {
            searchValue: "",
            loading: false,
            type: "add",
            tableData: [],
            page: {
                size: 50,
                sizes: [1, 10, 30, 50, 100, 150, 200],
                total: 0,
                currentPage: 1,
            },
            pageKey: new Date().getTime(),
        };
    },
    created() {
        this.init();
    },
    computed: {
        ...mapGetters("layout", ["projectId", "userId"]),
    },
    methods: {
        init() {
            this.getUserList();
        },
        async getUserList() {
            this.loading = true;
            let params = {
                filters: [{ ops: "NE", obj: "name", arg: "admin" }],
                pageNumber: this.page.currentPage,
                pageSize: this.page.size,
            };
            this.searchValue && params.filters.push({ ops: "CONTAIN", obj: "name", arg: this.searchValue });
            const res = await queryUsers(params);
            this.loading = false;
            if (res.code === "Success") {
                this.tableData = res.data || [];
                this.page.total = res.total;
            } else {
                this.$message.error(`${res.message}`);
            }
        },
        searchChange() {
            this.page.currentPage = 1;
            this.getUserList();
        },
        addUser() {
            this.type = "add";
            this.$refs.userDialog.showDialog(this.type);
        },
        editUser(row) {
            this.type = "edit";
            this.$refs.userDialog.showDialog(this.type, row);
        },
        delUser(row) {
            this.$confirm("此操作将永久删除用户, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    let { id } = row;
                    const params = { data: { id } };
                    const res = await deleteUsers(params);
                    if (res.code === "Success") {
                        this.$message.success("删除成功");
                        this.getUserList();
                    } else {
                        this.$message.error(`删除失败，失败原因：${res.message}`);
                    }
                })
                .catch(() => {
                    this.$message({ type: "info", message: "已取消" });
                });
        },
    }
};
</script>

<style scoped lang='less'>
.template-box {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    background: #fff;
    .template-tools {
        padding: 10px;
    }
    .template-table {
        height: calc(100% - 105px);
    }
    .template-pagination {
        text-align: right;
        padding: 10px;
    }
}
</style>
