<template>
    <div class="app-container Profile-container">
        <el-tabs tab-position="left" style="height:100%" v-model="activeTab" class="profile-tabs"
            v-loading="userLoading">
            <el-tab-pane label="个人资料" name="user">
                <UserInfo ref="user" :user='user' v-if="visible.user" @updateInfo="getInfo" />
            </el-tab-pane>
            <el-tab-pane label="租户信息" name="tenantInfo" v-if="isTenant">
                <TenantInfo ref="tenantInfo" v-if="visible.tenantInfo" :tenantData="tenantData" />
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="password">
                <Password ref="password" v-if="visible.password" />
            </el-tab-pane>
            <el-tab-pane disabled name="line"></el-tab-pane>
            <el-tab-pane label="我的组织" name="organize">
                <div class="JNPF-common-title mb-10  ">
                    <h2 class="bold">我的组织
                        <el-tooltip content="用户可以自行切换组织信息，我的组织默认只能进行单选" placement="right">
                            <a class="tooltip-question el-icon-question"></a>
                        </el-tooltip>
                    </h2>
                </div>
                <div class="organize-list">
                    <el-row :gutter="80" v-if="organizeList.length">
                        <el-col :span="12" class="organize-item" v-for="(item,i) in organizeList"
                            :key="i">
                            <div class="organize-item-main"
                                :class="{active:activeOrganize===item.id}"
                                @click="changeMajor(item.id,'Organize')">
                                <i class="icon-ym icon-ym-organization"></i>
                                <p class="organize-name">{{item.fullName}}</p>
                                <p class="btn">默认</p>
                                <div class="icon-checked">
                                    <i class="el-icon-check"></i>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-empty description="暂无数据" :image-size="120" v-else></el-empty>
                </div>
            </el-tab-pane>
            <el-tab-pane label="我的岗位" name="position">
                <div class="JNPF-common-title mb-10">
                    <h2 class="bold">我的岗位
                        <el-tooltip content="用户可以自行切换我的组织内的岗位信息，我的岗位默认只能进行单选" placement="right">
                            <a class="el-icon-question tooltip-question"></a>
                        </el-tooltip>
                    </h2>
                </div>
                <div class="organize-list">
                    <el-row :gutter="80" v-if="positionList.length">
                        <el-col :span="12" class="organize-item" v-for="(item,i) in positionList"
                            :key="i">
                            <div class="organize-item-main"
                                :class="{active:activePosition===item.id}"
                                @click="changeMajor(item.id,'Position')">
                                <i class="icon-ym icon-ym-wf-outgoingApply"></i>
                                <p class="organize-name">{{item.fullName}}</p>
                                <p class="btn">主岗</p>
                                <div class="icon-checked">
                                    <i class="el-icon-check"></i>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-empty description="暂无数据" :image-size="120" v-else></el-empty>
                </div>
            </el-tab-pane>
            <el-tab-pane label="我的下属" name="subordinate">
                <div class="JNPF-common-title mb-10">
                    <h2 class="bold">我的下属</h2>
                </div>
                <div class="subordinate-list">
                    <el-tree :data="treeData" :props="props" check-on-click-node node-key="id" lazy
                        v-loading="loading" :load="loadNode"
                        class="JNPF-common-el-tree subordinate-tree">
                        <el-card class="subordinate-tree-node" shadow="never" slot-scope="{ data }">
                            <el-avatar :size="50" :src="define.comUrl+ data.avatar"></el-avatar>
                            <div class="text">
                                <p>{{data.userName}}</p>
                                <p class="user-text">
                                    {{data.department}}{{data.position?'/'+data.position:''}}</p>
                            </div>
                        </el-card>
                    </el-tree>
                </div>
            </el-tab-pane>
            <el-tab-pane label="绑定设置" name="justAuth" v-if="useSocials">
                <JustAuth ref="justAuth" v-if="visible.justAuth" />
            </el-tab-pane>
            <el-tab-pane label="系统权限" name="authorize" class="el-tab-pane-authorize">
                <Authorize ref="authorize" v-if="visible.authorize" />
            </el-tab-pane>
            <el-tab-pane label="登录日志" name="sysLog">
                <SysLog ref="sysLog" v-if="visible.sysLog" />
            </el-tab-pane>
        </el-tabs>
        <div class="head">
            <el-upload class="avatar-uploader" :action="define.comUploadUrl+'/userAvatar'"
                :headers="uploadHeaders" :on-success="handleSuccess" :show-file-list="false"
                accept="image/*" :before-upload="beforeUpload">
                <div class="avatar-box">
                    <el-avatar :size="50" :src="define.comUrl + user.avatar" class="avatar"
                        v-if="user.avatar" />
                    <div class="avatar-hover">更换头像</div>
                </div>
            </el-upload>
            <span class="username">{{user.realName}}</span>
        </div>
    </div>
</template>
<script>
import { UserSettingInfo, getSubordinate, UpdateAvatar, UpdateLanguage, getUserOrganizes, getUserPositions, setMajor } from '@/api/permission/userSetting'
import UserInfo from './components/UserInfo'
import Password from './components/Password'
import Authorize from './components/Authorize'
import SysLog from './components/SysLog'
import JustAuth from './components/JustAuth'
import TenantInfo from './components/TenantInfo'
export default {
    name: 'profile',
    components: { UserInfo, Password, Authorize, SysLog, JustAuth, TenantInfo },
    data() {
        return {
            user: {},
            treeData: [],
            activeTab: '',
            organizeList: [],
            positionList: [],
            activeOrganize: '',
            activePosition: '',
            visible: {
                tenantInfo: false,
                user: true,
                password: false,
                theme: false,
                authorize: false,
                sysLog: false,
                justAuth: false,
            },
            props: {
                children: 'children',
                label: 'userName',
                isLeaf: 'isLeaf'
            },
            loading: false,
            userLoading: false,
            nodeId: '0',
            uploadHeaders: { Authorization: this.$store.getters.token },
            tenantData: {},
            isTenant: false
        }
    },
    watch: {
        '$route': 'getInfo',
        activeTab(val) {
            for (let key of Object.keys(this.visible)) {
                this.visible[key] = false
            }
            this.visible[val] = true
            if (val === 'subordinate') {
                this.nodeId = '0'
                this.getSubordinate()
                return
            }
            if (val === 'organize') {
                this.getUserOrganizes()
                return
            }
            if (val === 'position') {
                this.getUserPositions()
                return
            }
        }
    },
    created() {
        this.getInfo()
    },
    computed: {
        useSocials() {
            return localStorage.getItem('useSocials') && localStorage.getItem('useSocials') != '0'
        }
    },
    methods: {
        beforeUpload(file) {
            let isAccept = new RegExp('image/*').test(file.type)
            if (!isAccept) {
                this.$message.error(`请上传图片`)
            }
            return isAccept;
        },
        getInfo() {
            this.userLoading = true
            UserSettingInfo().then(res => {
                this.user = res.data
                this.activeTab = 'user'
                this.userLoading = false
                this.tenantData = this.user.currentTenantInfo
                this.isTenant = this.user.isTenant
                let flag = this.$router.history.current.query.flag
                if (flag == "1") {
                    this.activeTab = "justAuth"
                }
            })
        },
        getSubordinate() {
            this.loading = true
            getSubordinate(this.nodeId).then(res => {
                this.treeData = res.data
                this.loading = false
            })
        },
        loadNode(node, resolve) {
            if (node.level === 0) {
                this.nodeId = '0'
                return resolve(this.treeData)
            }
            this.nodeId = node.data.id
            getSubordinate(this.nodeId).then(res => {
                resolve(res.data)
            })
        },
        handleSuccess(res, file) {
            if (res.code == 200) {
                this.updateAvatar(res.data)
            } else {
                this.$message({
                    message: '上传失败',
                    type: 'error',
                    duration: 1000,
                })
            }
        },
        updateAvatar(data) {
            UpdateAvatar(data.name).then(res => {
                this.user.avatar = data.url
                this.$store.commit('user/SET_USERINFO_HEADICON', data.url)
                this.$message({
                    message: res.msg,
                    type: 'success',
                    duration: 1000,
                })
            })
        },
        getUserOrganizes() {
            getUserOrganizes().then(res => {
                this.organizeList = res.data || []
                const list = this.organizeList.filter(o => o.isDefault)
                if (!list.length) return this.activeOrganize = ''
                const activeItem = list[0]
                this.activeOrganize = activeItem.id
            })
        },
        getUserPositions() {
            getUserPositions().then(res => {
                this.positionList = res.data || []
                const list = this.positionList.filter(o => o.isDefault)
                if (!list.length) return this.activePosition = ''
                const activeItem = list[0]
                this.activePosition = activeItem.id
            })
        },
        changeMajor(majorId, majorType) {
            if (this['active' + majorType] === majorId) return
            let query = {
                majorId,
                majorType
            }
            setMajor(query).then(res => {
                this['active' + majorType] = majorId
                this.$message({
                    message: res.msg,
                    type: 'success',
                    duration: 1500,
                    onClose() {
                        location.reload()
                    }
                })
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.Profile-container {
    position: relative;
    padding-top: 10px;
    .profile-tabs {
        >>> .el-tabs__nav-scroll {
            padding-top: 70px;
        }
        >>> .el-tabs__item {
            text-align: left !important;
        }
        >>> .el-tabs__content {
            height: 100%;
            .el-tab-pane {
                height: 100%;
                overflow: auto;
                overflow-x: hidden;

                &.el-tab-pane-authorize {
                    overflow: hidden;
                }
            }
        }
        >>> #tab-line {
            height: 20px;
            width: 160px;
            &::after {
                position: absolute;
                width: 100%;
                height: 1px;
                background: #ddd;
                content: '';
                display: block;
                overflow: hidden;
                top: 10px;
                left: 0;
            }
        }
    }
    .head {
        position: absolute;
        left: 10px;
        top: 10px;
        height: 70px;
        width: 160px;
        padding-top: 10px;
        >>> .avatar-uploader {
            display: inline-block;
            vertical-align: top;
            .avatar-hover {
                position: absolute;
                left: 0;
                top: 0;
                font-size: 12px;
                display: none;
                overflow: hidden;
                width: 50px;
                height: 50px;
                text-align: center;
                border-radius: 50%;
                line-height: 50px;
                color: #fff;
                cursor: pointer;
                background: rgba(0, 0, 0, 0.5);
            }
            &:hover {
                & .avatar-hover {
                    display: block;
                }
            }
        }
        .avatar-box {
            position: relative;
        }
        .avatar {
            display: inline-block;
            width: 50px;
            height: 50px;
            overflow: hidden;
            border-radius: 50%;
            vertical-align: top;
            margin-right: 10px;
        }
        .username {
            line-height: 50px;
            font-size: 14px;
        }
    }

    >>> .el-select,
    >>> .el-date-editor {
        width: 100%;
    }
    .subordinate-tree {
        height: 100%;
        margin: 0;
        .subordinate-tree-node {
            width: 300px;
        }
        >>> .el-tree-node:focus > .el-tree-node__content {
            background-color: #fff;
        }
        >>> .el-tree-node__expand-icon.el-icon-caret-right {
            font-size: 20px;
        }
        >>> .el-tree-node__content {
            height: 80px;
            &:hover {
                background: #fff;
            }
        }
        >>> .el-card__body {
            display: flex;
            padding: 10px 10px;
            align-items: center;
            .el-avatar {
                margin-right: 10px;
                flex-shrink: 0;
            }

            .text {
                font-size: 14px;
                width: calc(100% - 60px);
                p {
                    line-height: 25px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    word-break: break-all;
                }
            }
            .user-text {
                color: #999;
                font-size: 12px;
            }
        }
    }
    #pane-subordinate {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        .subordinate-list {
            flex: 1;
            overflow: auto;
        }
    }
    .organize-list {
        width: 100%;
        padding: 50px;
        .organize-item {
            margin-bottom: 30px;
            .organize-item-main {
                height: 70px;
                position: relative;
                border-radius: 4px;
                border: 1px solid #dcdfe6;
                display: flex;
                align-items: center;
                padding: 0 20px;
                cursor: pointer;
                box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
                color: #606266;
                &.active {
                    border: 1px solid #1890ff;
                    box-shadow: 0 0 6px rgba(6, 58, 108, 0.26);
                    color: #1890ff;
                    .btn,
                    .icon-checked {
                        display: block;
                    }
                }
                .icon-ym {
                    font-size: 24px;
                    margin-right: 10px;
                }
                .organize-name {
                    line-height: 24px;
                    font-size: 14px;
                }
                .btn {
                    display: none;
                    position: absolute;
                    right: 45px;
                    bottom: 7px;
                    font-size: 12px;
                }
                .icon-checked {
                    display: none;
                    width: 20px;
                    height: 20px;
                    border: 20px solid #1890ff;
                    border-left: 20px solid transparent;
                    border-top: 20px solid transparent;
                    border-bottom-right-radius: 2px;
                    position: absolute;
                    transform: scale(0.9);
                    right: -2px;
                    bottom: -2px;
                    i {
                        position: absolute;
                        top: -2px;
                        left: -3px;
                        font-size: 20px;
                        color: #fff;
                    }
                }
            }
        }
    }
}
</style>