<!--人员信息视图页面 -->
<template>
    <div class="view-list-page">
        <div class="page-title clear-float pl-15 pr-15">
            <div class="float-left">
                <span class="page-title-text">人员信息视图</span>
            </div>
            <div class="float-right page-refresh" @click="backClick">
                <span class="pointer">
                    <svg-icon icon-class="callback"></svg-icon>
                    <span class="ml-10">返回</span>
                </span>
            </div>
        </div>
        <div class="view-main pl-15 pr-15">
            <el-row :gutter="20">
                <el-col :span="4">
                    <div class="view-main-lf">
                        <img src="../../assets/images/System/user.jpg">
                    </div>
                </el-col>
                <el-col :span="20">
                    <div class="view-main-rg">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <div class="rg-detail">
                                    姓名：<span v-if="name === null">暂无</span>
                                          <span v-else>{{name}}</span>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="rg-detail">
                                    工号：<span v-if="no === null">暂无</span>
                                    <span v-else>{{no}}</span>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="rg-detail">
                                    手机号：<span v-if="contact === null">暂无</span>
                                    <span v-else>{{contact}}</span>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <div class="rg-detail">
                                    邮箱：<span v-if="email === null">暂无</span>
                                    <span v-else>{{email}}</span>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="rg-detail">
                                    状态：<span v-if="status === null">暂无</span>
                                    <span v-else-if="status === '1'">在职</span>
                                    <span v-else-if="status === '2'">离职</span>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="view-tab pl-15 pr-15" id="page-content">
            <el-tabs v-model="activeName">
                <el-tab-pane label="部门/角色" name="first">
                    <DepartmentRoleView :userId="id"></DepartmentRoleView>
                </el-tab-pane>
                <el-tab-pane label="功能权限" name="second">
                    <FunctionalAuthorityView :userId="id"></FunctionalAuthorityView>
                </el-tab-pane>
                <el-tab-pane label="数据权限" name="third">
                    <DataPermissionView :userId="id"></DataPermissionView>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    import DepartmentRoleView from './components/DepartmentRoleView'
    // 数据权限组件
    import DataPermissionView from './components/DataPermissionView'
    // 功能权限组件
    import FunctionalAuthorityView from './components/FunctionalAuthorityView'
    export default {
        components: {
            DepartmentRoleView,
            DataPermissionView,
            FunctionalAuthorityView
        },
        name: 'UserView',
        data () {
            return {
                viewHeight: 0,
                activeName: 'first',
                id: '',          // 用户ID
                name: '',
                email: '',
                no: '',
                contact: '',
                status: ''
            }
        },
        methods: {
            // 6、返回点击事件
            backClick () {
                this.$router.push({ path: this.$route.query.from || '/system/user' })
            }
        },
        mounted () {
            this.id = this.$route.query.id;
            this.name = this.$route.query.name;
            this.email = this.$route.query.email;
            this.no = this.$route.query.no;
            this.contact = this.$route.query.contact;
            this.status = this.$route.query.status;
            this.viewHeight = `${document.querySelector('.view-list-page').offsetHeight - 205}`;
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../styles/System/userView';
</style>

