<template>
    <div class="content-box">
        <div class="container">
            <p class="title">账号管理</p>
            <el-button @click="addAccountDialog = true" type="primary" style="margin-bottom: 10px;"
                ><i class="el-icon-circle-plus-outline" style="margin-right: 3px;"></i>新增</el-button
            >
            <el-table :data="tableData" :height="tableHeight" border style="width: 100%">
                <el-table-column align="center" prop="userName" label="用户名称" width="180"></el-table-column>
                <el-table-column align="center" prop="account" label="用户账号" width="180"></el-table-column>
                <el-table-column align="center" prop="roleName" label="角色"></el-table-column>
                <el-table-column align="center" label="权限">
                    <template slot-scope="scope">
                        <span>{{ scope.row.isEnable === '1' ? '启用' : '禁用' }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="160">
                    <template slot-scope="scope">
                        <el-button @click="edit(scope.row)" type="text" size="small" class="">编辑</el-button>
                        <!-- <el-button @click="showView(scope.row)" type="text" size="small" class="el-icon-view"></el-button> -->
                        <el-button @click="clickDelete(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="dialog">
                <el-dialog :title="dialogTitle" :visible.sync="addAccountDialog" width="30%">
                    <el-form label-position="left" label-width="80px" :model="formLabelAlign">
                        <el-form-item label="名称：">
                            <el-input v-model="formLabelAlign.name"></el-input>
                        </el-form-item>
                        <el-form-item label="账号：">
                            <el-input v-model="formLabelAlign.account"></el-input>
                        </el-form-item>
                        <el-form-item label="角色：">
                            <el-input v-model="formLabelAlign.role"></el-input>
                        </el-form-item>
                        <el-form-item label="权限：">
                            <el-input v-model="formLabelAlign.jurisdiction"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="addAccountDialog = false">确 定</el-button>
                    </span>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
import { getZhanghData } from '@/api/management';
export default {
    data() {
        return {
            addAccountDialog: false,
            formLabelAlign: {
                name: '',
                account: '',
                role: '',
                jurisdiction: ''
            },
            tableData: [],
            tableHeight: 0,
            currentPage: 1,
            pageSize: 100,
            totalNumber: 1000,
            tableHeight: 0,
            dialogTitle: '新增'
        };
    },
    created() {
        let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        this.tableHeight = windowHeight - 280;
        this.getData();
    },
    methods: {
        getData() {
            getZhanghData().then(res => {
                console.log(res);
                this.tableData = res.data.data;
            });
        },
        edit(scope) {
            console.log(scope, '编辑');
            this.dialogTitle = '编辑';
            this.addAccountDialog = true;
        },
        showView(scope) {
            console.log(scope, '查看');
            this.dialogTitle = '查看';
            this.addAccountDialog = true;
        },
        clickDelete(scope) {
            console.log(scope, '删除');
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    }
};
</script>

<style scoped>
.test-div i {
    font-size: 25px;
}
.dialog .el-form-item {
    margin-bottom: 20px;
}
</style>
