<template>
    <div class="conent">

        <!-- 点击新增弹出表单 -->
        <div class="from">
            <el-dialog title="新增用户" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
                <div>
                    <el-form label-width="80px">
                        <el-form-item label="姓名">
                            <el-input v-model="from.name"></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input v-model="from.password"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码">
                            <el-input v-model="from.password_confirmation"></el-input>
                        </el-form-item>
                        <el-form-item label="角色">
                            <template>
                                <el-select v-model="value" placeholder="请选择">
                                    <el-option v-for="item in roleOptions" :key="item.value" :label="item.name"
                                        :value="item.name">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-form-item>
                        <div class="from-btn">
                            <el-button type="danger" @click="dialogVisible = false">取消</el-button>
                            <el-button @click="onSubmit">确认</el-button>
                        </div>
                    </el-form>
                </div>
            </el-dialog>
        </div>

        <!-- 点击编辑弹出表单信息 -->
        <div class="edit_from">
            <el-dialog title="编辑" :visible.sync="editVisible" width="30%" :close-on-click-modal="false">
                <div>
                    <el-form label-width="80px">
                        <el-form-item label="ID">
                            <el-input v-model="edit_from.id"></el-input>
                        </el-form-item>
                        <el-form-item label="姓名">
                            <el-input v-model="edit_from.name"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱">
                            <el-input v-model="edit_from.email"></el-input>
                        </el-form-item>
                        <el-form-item label="角色">
                            <template>
                                <el-select v-model="edit_from.role_name" placeholder="请选择">
                                    <el-option v-for="item in roleOptions" :key="item.value" :label="item.name"
                                        :value="item.name">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input v-model="edit_from.password"></el-input>
                        </el-form-item>
                        <el-form-item label="密码确认">
                            <el-input v-model="edit_from.password_confirmation"></el-input>
                        </el-form-item>
                        <div class="from-btn">
                            <el-button type="danger" @click="editVisible = false">取消</el-button>
                            <el-button @click="onEdit()">确认</el-button>
                        </div>
                    </el-form>
                </div>
            </el-dialog>
        </div>

        <!-- 新增按钮 -->
        <el-button type="primary" @click="dialogVisible = true">新增</el-button>

        <!-- 用户列表 -->
        <div class="table">
            <template>
                <el-table :data="tableList" style="width: 100%">
                    <el-table-column prop="id" label="ID"></el-table-column>
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column label="角色">
                        <template slot-scope="scope">{{
                                scope.row.roles[0].name
                        }}</template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button @click="openEdit(scope.row)">编辑</el-button>
                            <!-- <el-button type="danger">删除</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </div>

        <!-- 分页功能 -->
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="current_page" :page-sizes="[15, 50, 100]" :page-size="per_page"
                layout="total, sizes, prev, pager, next, jumper" :total="Paginationdata.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import {
    userList,
    userAdd,
    userEdit,
    userConfirm,
    roleList,
} from "../../api/user";
export default {
    data() {
        return {
            id: "",
            dialogVisible: false, //新增按钮变量
            editVisible: false, //编辑按钮变量
            tableList: [], //列表数据
            from: {
                //表单数据（用户名密码确认密码角色名）
                name: "",
                password: "",
                password_confirmation: "",
                role_name: "",
            },
            edit_from: {
                // 编辑返回默认数据
                created_at: "",
                deleted_at: null,
                email: "",
                id: "",
                name: "",
                password: "",
                password_confirmation: "",
                role_name: "",
            },
            Paginationdata: {}, //分页相关数据
            current_page: 1, //当前页
            per_page: 15, //每页显示数量
            roleOptions: [], //角色下拉框
            value: "", //角色下拉框选择
        };
    },

    mounted() {
        this.getList(); //进入调用用户表单数据请求
        this.getrole(); //进入调用角色数据请求
    },
    methods: {
        // 角色列表请求
        getrole() {
            roleList().then((res) => {
                this.roleOptions = res.data.data;
            });
        },

        //用户表单数据请求
        getList() {
            let page = {
                page: this.current_page,
                per_page: this.per_page,
            };
            userList(page).then((res) => {
                this.tableList = res.data.data;
                this.Paginationdata = res.data.meta;
            });
        },

        //点击新增确认
        onSubmit() {
            this.from.role_name = this.value;
            let from = this.from;
            userAdd(from).then((res) => {
                this.tableList = [...this.tableList, res.data.data];
                this.dialogVisible = false;
                this.getList();
                this.from = {};
                this.$message({
                    message: "账号添加成功！",
                    type: "success",
                });
            });
        },

        //点击编辑
        openEdit(e) {
            this.editVisible = true;
            let id = e.id;
            this.id = e.id;
            // 请求id对应数据
            userEdit(id).then((res) => {
                this.edit_from = res.data.data;
            });
        },

        //编辑完确认请求
        onEdit() {
            userConfirm(this.id, this.edit_from).then((res) => {
                this.tableList = [...this.tableList, res.data.data];
                this.editVisible = false;
                this.getList();
                this.$message({
                    message: "账号修改成功！",
                    type: "success",
                });
            });
            this.editVisible = false;
        },

        //分页功能
        handleSizeChange(val) {
            //当前条数
            this.per_page = val;
            this.getList();
        },
        handleCurrentChange(val) {
            //当前页
            this.current_page = val;
            this.getList();
        },
    },
};
</script>

<style lang="scss" scoped>
.block {
    margin-top: 30px;
}
</style>
