<template>
    <div class="userManagement">
        <div class="form-header">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="角色名称">
                    <el-input v-model="formInline.roleName" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleData()">查询</el-button>
                    <el-button type="success" icon="el-icon-plus" @click="handleAdd()">新增</el-button>
                </el-form-item>
                <!-- <el-form-item label="租户名称">
                    <el-select v-model="formInline.tenantId" clearable placeholder="请选择所属租户">
                        <el-option v-for="item in tenantIdoptions" :key="item.id" :label="item.label" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleData()">查询</el-button>
                </el-form-item> -->
            </el-form>

        </div>
        <div class="form-box">
            <el-table :data="tableData" height="350px" style="width: 100%" :header-cell-class-name="HeaderCell" stripe
                border>
                <el-table-column label="序号" type="index" width="80" align="center">
                </el-table-column>
                <el-table-column label="id" align="center">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="名称" align="center">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.tenantName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="用户名" align="center">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.comment }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="角色" align="center">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.roleName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="384px" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="success" @click="handleXQ(scope.row.id)"
                            icon="el-icon-document">详情</el-button>
                        <el-button size="mini" type="info" @click="handleXG(scope.row.id)"
                            icon="el-icon-edit">修改</el-button>
                        <el-button size="mini" type="danger" @click="handleDE(scope.row.id)"
                            icon="el-icon-delete">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 第四步绑定自定义属性 -->
            <pagination :total="obj.total" @handleSize="handleSizeChange" @handleCurrent="handleCurrentChange">
            </pagination>
        </div>
        <!-- 弹出框 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible" top="30vh">
            <el-form ref="gridData" :model="gridData" :rules="rules">
                <el-form-item label="角色名称" :label-width="formLabelWidth" prop="roleName">
                    <el-input v-model="gridData.roleName" autocomplete="off" :disabled="title == '角色信息详情'"></el-input>
                </el-form-item>
                <el-form-item label="修改人" :label-width="formLabelWidth" v-if="title == '角色信息详情'">
                    <el-input v-model="gridData.updateBy" autocomplete="off" :disabled="title == '角色信息详情'"></el-input>
                </el-form-item>
                <el-form-item label="创建人" :label-width="formLabelWidth" v-if="title == '角色信息详情'">
                    <el-input v-model="gridData.createBy" autocomplete="off" :disabled="title == '角色信息详情'"></el-input>
                </el-form-item>
                <el-form-item label="修改时间" :label-width="formLabelWidth" v-if="title == '角色信息详情'">
                    <el-input v-model="gridData.updateTime" autocomplete="off" :disabled="title == '角色信息详情'"></el-input>
                </el-form-item>
                <el-form-item label="租户" :label-width="formLabelWidth" prop="tenantId" v-if="title == '新增角色'">
                    <el-select v-model="gridData.tenantId" placeholder="请选择租户" style="width: 100%;">
                        <el-option v-for="item in tenantIdoptions" :key="item.id" :label="item.label" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="角色描述" :label-width="formLabelWidth" prop="comment">
                    <el-input v-model="gridData.comment" autocomplete="off" :disabled="title == '角色信息详情'"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click=handleAdd1(1) v-if="title == '新增角色'">确 定</el-button>
                <el-button type="primary" @click=handleAdd1(2) v-if="title == '修改信息'">确 定</el-button>
            </div>


        </el-dialog>

    </div>



</template>
<script>
// 第一步引入组件
import pagination from "../pagination/pagination.vue";
import apiServe from "@/utils/api.js";
import axios from "axios";
export default {
    // 第二步 注册组件
    components: {
        pagination,
    },
    data() {
        return {
            // 详情弹出框
            dialogFormVisible: false,
            // 详情数据tabledata
            gridData: {
                tenantId: "",
                comment: "",
                roleName: "",

            },
            title: "",
            // 新增选项
            types: [{
                value: 1,
                label: '企业'
            }, {
                value: 2,
                label: '个人'
            }],
            XG: "",
            rules: {
                roleName: [
                    { required: true, message: "请输入角色名称", trigger: "blur" },
                ],
                tenantId: [
                    { required: true, message: "请选择租户id", trigger: "blur" },
                ],
                comment: [
                    { required: true, message: "请输入角色描述", trigger: "blur" },
                ],

            },
            tenantId: "",
            data: [],
            // 查询
            formInline: {
                tenantId: "",
                roleName: "",
            },
            tenantIdoptions: [],
            tableData: [],
            obj: {
                // 页码
                page: 1,
                // 每页多少条
                rows: 10,
                // 默认选中哪一页
                currentPage: 1,
                // 定义总条数
                total: null,
            },
            formLabelWidth: '120px'
        }
    },
    methods: {
        // 表头单元格样式
        HeaderCell() {
            return 'HeaderCellClass';
        },
        handleData() {
            // 获取租户选项
            apiServe.TenantXZ('get', {}).then(res => {
                // console.log(res.data.list);
                // 防止赋值undefined
                if (res.data.list) {
                    this.tenantIdoptions = res.data.list.map(item => ({
                        id: item.id,
                        label: item.name
                    }));
                }
            });
            let data = {
                pageNo: this.obj.page,
                pageSize: this.obj.rows,
                tenantId: this.formInline.tenantId,
                roleName: this.formInline.roleName,
            };
            apiServe.RoleManagement("get", data).then((res) => {
                // console.log(res);
                // 将请求成功的数据赋值给表格
                if (res) {
                    this.data = res.data;
                    this.tableData = res.data.list;
                    this.obj.total = Number(res.data.total)
                    // console.log(this.obj.total);

                }
            });
        },
        // 新增
        handleAdd() {
            this.dialogFormVisible = true;
            this.title = "新增角色";
            // 重置表单数据
            this.gridData = {
                tenantId: "",
                roleName: "",
                comment: "",
            };
            // 等待 DOM 更新后重置表单验证状态
            this.$nextTick(() => {
                if (this.$refs.gridData) {
                    this.$refs.gridData.resetFields();
                }
            });
            // 获取租户选项
            apiServe.TenantXZ('get', {}).then(res => {
                // console.log(res.data);
                this.tenantIdoptions = res.data.map(item => ({
                    id: item.id,
                    label: item.name
                }));
            });



        },
        // 修改
        handleXG(id) {
            this.dialogFormVisible = true;
            this.title = "修改信息";
            apiServe.RoleUserCX("get", { id: id }).then((res) => {
                // console.log(res.data);
                this.gridData.comment = res.data.comment
                this.gridData.roleName = res.data.roleName
                this.gridData.tenantId = res.data.id

            });
        },
        // 删除
        handleDE(id) {
            const token = localStorage.getItem('token');
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios.delete("http://81.70.146.224:11500/users/role-manage/" + id, {
                    headers: {
                        'Authorization': `${token}`, // 将 token 放在请求头中
                    }
                }).then((res) => {
                    console.log(res);
                });

                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message('取消删除');
            })
        },
        handleXQ(id) {
            this.dialogFormVisible = true;
            this.title = "角色信息详情";
            apiServe.RoleUserCX("get", { id: id }).then((res) => {
                // console.log(res.data);
                this.gridData.comment = res.data.comment
                this.gridData.roleName = res.data.roleName
                this.gridData.updateTime = res.data.updateTime
                this.gridData.createBy = res.data.createBy
                this.gridData.updateBy = res.data.updateBy
            });
        },
        // 新增确定
        handleAdd1(val) {
            this.$refs.gridData.validate((valid) => {
                if (valid) {
                    if (val == 1) {
                        let data = {
                            roleName: this.gridData.roleName,
                            tenantId: this.gridData.tenantId,
                            comment: this.gridData.comment,
                        };
                        apiServe.RoleUserXZ("post", data).then((res) => {
                            console.log(res);
                        })
                        // console.log(data);
                        this.$message({
                            message: '恭喜你，添加成功',
                            type: 'success'
                        });
                        this.handleData()
                        // 清空验证并清空内容
                        this.$nextTick(() => {
                            this.$refs.gridData.resetFields();
                        });
                        this.handleData()
                    } else {
                        let data = {
                            roleName: this.gridData.roleName,
                            id: this.gridData.tenantId,
                            comment: this.gridData.comment,
                        };
                        apiServe.RoleUserXG("put", data).then((res) => {
                            console.log(res);
                            this.handleData()
                        })
                        // console.log(data);
                        this.$message({
                            message: '恭喜你，修改成功',
                            type: 'success'
                        });
                    }

                    this.dialogFormVisible = false;
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });

        },
        // 分页开始
        handleSizeChange(val) {
            // console.log(val, "接收");
            // 当我点击每页多少条的时候赋值并重新渲染页面
            this.obj.rows = val;
            this.handleData();
        },
        handleCurrentChange(val) {
            // console.log(val, "接收");
            // 当我点击页码的时候将页码赋值给变量并重新渲染页面
            this.obj.page = val;
            this.handleData();
        },
        // 分页结束

    },
    mounted() {
        // 从本地读取数据
        this.tenantId = localStorage.getItem("tenantId")
        // console.log(this.tenantId)
        this.handleData()
    }
}
</script>
<style lang="scss" scoped>
.userManagement::v-deep {
    .form-header {
        box-shadow: 0 0 5px #d0d0d0;
        border-radius: 5px;
        text-align: left;
        background-color: #fff;
        padding: 10px;
        padding-left: 30px;

        .el-form-item {
            margin-bottom: 0;
        }
    }

    .form-box {
        margin-top: 10px;
        padding: 10px;
        background-color: #fff;
        box-shadow: 0 0 5px #d0d0d0;
        border-radius: 5px;
        /* // calc():高度时100%-超出的部分 */
        height: calc(100vh - 235px);

        .HeaderCellClass {
            background: #859CB7;
            color: #fff;
        }
    }

    .pagination {
        padding-top: 10px;
        text-align: center;
    }

}
</style>