<template>
    <div class="header-container">
        <div class="logo">
            <!-- <img src="../../assets/image/index_logoicon.png"/> -->
            <p>云鹊医</p>
        </div>
        <div class="user-info">
            <el-dropdown trigger="click" @command="handleCommand">
                <div class="el-dropdown-link">
                    <img class="user-logo" src="../../assets/image/mm.jpg">
                    <span id="headName">{{userName}}</span><i class="el-icon-caret-bottom"></i>
                </div>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <!--导航-->
        <div class="user-info">
            <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                    {{'系统切换'}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown" class="nav-dropdown">
                    <el-dropdown-item v-for="item in authList" :key="item.id">
                        <span class="menu-item" @click="forward(item)">{{item.systemName}}</span>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>
<script>
import { getLoginUrl,getInnerLoginUrl, getYunQueYiUrl } from '../../utils/index.js'
import { logout, base64encode } from '../../utils/utils.js'
import { mapGetters } from 'vuex'
let vm = null
export default {
    props: {
        userName: {
            type: String,
            default: ''
        },
        authList: {
            type: Array
        }
    },
    data() {
        return {
            name: ''
        }
    },
    computed: {
    },
    watch: {
        authList(newVal, oldVal){

        }
    },
    created() {
        vm = this
    },
    methods: {
        handleCommand(command) {
            if (command === 'logout') {
                let req = {
                    token: localStorage.getItem('storageToken')
                }
                vm.POST('/contents/login/log_out',req).then((res) => {
                    sessionStorage.removeItem('DISCUSS_CENTER_NAVS')
                    localStorage.removeItem('storageToken')
                    window.location.href = getInnerLoginUrl()
                   //logout()
                })
            }
        },
        forward(obj) {
            let self = this;
            if (obj.systemNameAbbreviation.toLowerCase() === "sso") {
                window.location.href = obj.domainName + "pica_index.html";
            } else {
                let req = {
                    system_type: obj.id
                };
                vm.POST('/contents/login/forward_page', req).then(function (data) {
                    let forwardData = JSON.parse(JSON.stringify(data.data));//通过这个实现深拷贝
                    let url = forwardData.picapMenuModels[0].url;
                    if (url.length > 1) {
                        // window.location.href = url;
                    } else {
                        url = forwardData.picapMenuModels[0].picapSecondMenus[0].url;
                        if (url.length > 1) {
                            // window.location.href = url;
                        } else {
                            url = forwardData.picapMenuModels[0].picapSecondMenus[0].picapThirdMenus[0].url;
                        }
                    }
                    let param = "token=" + localStorage.getItem("storageToken") + "&ssoOrigin=" + localStorage.getItem("ssoOrigin") + "&system_type=" + obj.id;
                    window.location.href = obj.domainName + url + "?" + base64encode(param);
                }, function (error) {
                    errorResponseCheck(error, self);
                });
            }
        }
    }
}
</script>
<style lang="scss">
.header-container {
    position: relative;
    left: 0;
    top: 0;
    box-sizing: border-box;
    height: 64px;
    width: 100%;
    z-index: 99999;
    font-size: 22px;
    line-height: 64px;
    color: #fff;
    // background-color: #242f42;
    .logo {
        float: left;
        width: 255px;
        text-align: center;
        color: #fff;
        background: #0B2F3F;
        img{
            width: 24px;
            float: left;
            margin-left: 24px;
            margin-top: 21px;
        }
        p {
            text-align: left;
            margin-left: 60px;
        }
    }
    .user-info {
        float: right;
        padding-right: 50px;
        font-size: 16px;
        color: #838683;
        .el-dropdown-link {
            position: relative;
            display: inline-block;
            padding-left: 50px;
            color: #838683;
            cursor: pointer;
            vertical-align: middle;
            font-size: 14px;
        }
        .user-logo {
            position: absolute;
            left: 10px;
            top: 20px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }
        .el-icon--right, #headName,.line, #login-out{
            font-size: 14px;
        }
        .line {
            display: inline-block;
            padding: 0 10px;
        }
    }
}

.el-dropdown-menu__item {
    text-align: center;
}
.el-dropdown-menu {
    top: 37px !important;
}
.nav-dropdown{
  .el-dropdown-menu__item{
    padding: 0;
  }
}
.menu-item {
  display: block;
  font-size: 14px;
  font-weight: 300;
  color: #606266;
  padding: 0 20px;
}
</style>


