<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <base th:href="${#request.getContextPath() + '/'} ">
        <meta charset="UTF-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=11,chrome=1"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="stylesheet" type="text/css" href="assets/js/vendor/layui/css/layui.css"/>
        <style>
            html, body {background-color: #FFF;}
            .edit-content {padding: 0 10px;}
            .table-left-title {width: 20%; background-color: #e6e6e6; text-align: center;}
            .layui-table td, .layui-table th {border-color: #000;}
            [v-cloak] {display: none;}
        </style>
    </head>
    <body>
        <div id="app" class="easyui-layout easyui-layout-dialog edit-content">
            <table class="layui-table" lay-size="sm" v-cloak>
                <tbody>
                    <tr>
                        <td class="table-left-title">用户名</td>
                        <td colspan="3"><span>{{userDetail.userUsername}}</span></td>
                    </tr>
                    <tr>
                        <td class="table-left-title">姓　名</td>
                        <td colspan="3"><span>{{userDetail.userName}}</span></td>
                    </tr>
                    <tr>
                        <td class="table-left-title">电　话</td>
                        <td colspan="3"><span>{{userDetail.userPhone == '' ? '无' : userDetail.userPhone}}</span></td>
                    </tr>
                    <tr>
                        <td class="table-left-title">邮　箱</td>
                        <td colspan="3"><span>{{userDetail.userEmail == '' ? '无' : userDetail.userEmail}}</span></td>
                    </tr>
                    <tr>
                        <td class="table-left-title">角　色</td>
                        <td colspan="3">
                            <span v-for="(role, index) in userDetail.roles" v-if="userDetail.roles.length > 0">
                                <span v-if="index > 0">，</span>{{role.roleName}}
                            </span>
                            <span v-else>无</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="table-left-title">部　门</td>
                        <td colspan="3">
                            <span v-for="(department, index) in userDetail.departments" v-if="userDetail.departments.length > 0">
                                <span v-if="index > 0">，</span>{{department.departmentName}}
                            </span>
                            <span v-else>无</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="table-left-title">职　位</td>
                        <td colspan="3">
                            <span v-for="(position, index) in userDetail.positions" v-if="userDetail.positions.length > 0">
                                <span v-if="index > 0">，</span>{{position.positionName}}
                            </span>
                            <span v-else>无</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="table-left-title">所属组</td>
                        <td colspan="3">
                            <span v-for="(group, index) in userDetail.groups" v-if="userDetail.groups.length > 0">
                                <span v-if="index > 0">，</span>{{group.groupName}}
                            </span>
                            <span v-else>无</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script type="text/javascript" src="assets/js/jquery-3.5.1.min.js"></script>
        <script type="text/javascript" src="assets/js/vendor/layui/layui.js"></script>
        <script type="text/javascript" src="assets/js/vendor/viewer/viewer.min.js"></script>
        <script type="text/javascript" src="assets/js/vue.min.js"></script>
        <script type="text/javascript" src="assets/js/common.js"></script>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    userId: top.restAjax.params(window.location.href).userId,
                    userDetail: {}
                },
                methods: {
                    initUserDetail: function() {
                        var self = this;
                        var loadLayerIndex;
                        top.restAjax.get(top.restAjax.path('api/user/getuserdetail/{userId}', [self.userId]), {}, null, function(code, data) {
                            self.userDetail = data;
                        }, function(code, data) {
                            top.DialogBox.msg(data.msg);
                        }, function() {
                            loadLayerIndex = top.DialogBox.msg(TextMessage.loading, {icon: 16, time: 0, shade: 0.3});
                        }, function() {
                            top.DialogBox.close(loadLayerIndex);
                        });
                    }
                },
                mounted: function() {
                    this.initUserDetail();
                }
            })
        </script>
    </body>
</html>