<template>
    <div class="userManagement">
        <div class="form-header">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-button type="success" icon="el-icon-plus" @click="handleAdd()">新增</el-button>

            </el-form>

        </div>
        <div class="form-box">
            <el-table :data="tableData" height="650px" 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="管理模块类型" 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.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="管理路径" align="center">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.path }}</span>
                    </template>
                </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="操作" width="284px" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="warning" @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>
        </div>

        <!-- 弹出框 -->
        <!-- 详情弹出框 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-form ref="gridData" :model="gridData" :rules="rules">
                <el-form-item label="权限路径" :label-width="formLabelWidth" prop="path">
                    <el-input v-model="gridData.path" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="权限名称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="gridData.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="权限描述" :label-width="formLabelWidth" prop="comment">
                    <el-input v-model="gridData.comment" autocomplete="off"></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 apiServe from "@/utils/api.js";
import axios from "axios";
export default {
    data() {
        return {
            // 详情弹出框
            dialogFormVisible: false,
            // 详情数据tabledata
            gridData: {
                path: "",
                name: "",
                comment: "",
                id: "",

            },
            title: "",
            // 新增选项
            types: [{
                value: 1,
                label: '企业'
            }, {
                value: 2,
                label: '个人'
            }],
            XG: "",
            rules: {
                path: [
                    { required: true, message: "请输入权限路径", trigger: "blur" },
                ],
                name: [
                    { required: true, message: "请输入权限名称", trigger: "blur" },
                ],
                comment: [
                    { required: true, message: "请输入权限描述", trigger: "blur" },
                ],

            },
            tenantId: "",
            // 查询
            formInline: {
                shipname: "",
            },
            tableData: [],

            formLabelWidth: '120px'
        }
    },
    methods: {
        // 表头单元格样式
        HeaderCell() {
            return 'HeaderCellClass';
        },
        handleData() {
            apiServe.PowerList("get", {}).then((res) => {
                console.log(res);
                // 将请求成功的数据赋值给表格
                if (res) {
                    this.tableData = res.data;


                }
            });
        },
        // 详情
        handleXQ(id) {
            this.title = "租户信息详情";
            this.dialogFormVisible = true;
            apiServe.TenantXQ("get", {
                id: id,
            }).then((res) => {
                console.log(res);
                // 将请求成功的数据赋值给表格
                if (res) {
                    console.log(res.data);
                    this.gridData = res.data;

                }
            })
        },
        // 新增
        handleAdd() {
            this.title = "新增租户";
            this.dialogFormVisible = true;
            // 清空验证并清空内容
            this.$nextTick(() => {
                this.$refs.gridData.resetFields();
            });

        },
        // 编辑
        handleXG(id) {
            this.XG = id
            this.title = "编辑租户";
            this.dialogFormVisible = true;
            apiServe.PowerCX("get", { id: id }).then((res) => {
                console.log(res.data);
                this.gridData = res.data
            })

        },
        // 新增确定
        handleAdd1(val) {
            this.$refs.gridData.validate((valid) => {
                if (valid) {
                    if (val == 1) {
                        let data = {
                            path: this.gridData.path,
                            name: this.gridData.name,
                            comment: this.gridData.comment,
                        };
                        apiServe.PowerXZ("post", data).then((res) => {
                            console.log(res);
                        })
                        console.log(data);
                        this.$message({
                            message: '恭喜你，添加成功',
                            type: 'success'
                        });
                        this.handleData()
                        // 清空验证并清空内容
                        this.$nextTick(() => {
                            this.$refs.gridData.resetFields();
                        });
                    } else {
                        let data = {
                            path: this.gridData.path,
                            name: this.gridData.name,
                            comment: this.gridData.comment,
                            id: this.XG,
                        };
                        apiServe.PowerXG("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;
                }
            });

        },
        handleDE(ids) {
            const token = localStorage.getItem('token');
            console.log(token);
            this.$confirm(`此操作将永久删除选中的 id为${ids} 的文件, 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios.delete("http://81.70.146.224:11500/users/permission-manage/" + ids, {
                    headers: {
                        'Authorization': `${token}`, // 将 token 放在请求头中
                    }
                }).then((res) => {
                    if (res) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.handleData(); // 刷新数据
                    }
                }).catch((error) => {
                    this.$message({
                        type: 'error',
                        message: '删除失败: ' + (error.message || '未知错误')
                    });
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

    },
    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;
        }
    }



}
</style>