<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="portrait">
                    <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-item command="forward">返回云鹊医首页</el-dropdown-item> -->
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <!--导航-->
        <div class="user-info">
            <el-dropdown trigger="click" @command="handleCommand">
                <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 systemInfoList" :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 { mapGetters } from 'vuex'
import { base64encode, openLoading, closeLoading, logout, errorResponseCheck } from "../../utils/utils";
let vm = null
export default {
    props: {
        portrait: {
            type: String
        },
        userName: {
            type: String
        },
        idType: {
            type: Number
        }
    },
    data() {
        return {
            name: '',
            systemInfoList: []
        }
    },
    computed: {
        ...mapGetters([
            '_token'
        ])
    },
    created() {
        vm = this;
        this.getSystemType();
    },
    methods: {
        removeToken(data){
            return vm.POST("contents/login/forward_page", data)
        },
        handleCommand(command) {
            if (command === 'logout') {
                sessionStorage.removeItem('PROT_CENTER_NAVS')
                localStorage.removeItem('storageToken')
                if(vm.idType == 1) {  // 内部
                    window.location.href = getInnerLoginUrl()
                } else {
                    window.location.href = getInnerLoginUrl()
                    // window.location.href = getLoginUrl('?from=work&type=logout')
                }
            }
            if(command === 'forward') {
                window.location.href = getYunQueYiUrl()
            }
        },
        async getSystemType() {
            let self = this;
            //请求参数
            let req = {
                // system_type: localStorage.getItem("system_type"),
                system_type: 27,
            };
            let headers = {
                headers: {
                    'token': localStorage.getItem('token') || null
                }
            };
            vm.POST("contents/login/header", req).then(res => {
                if(res.code === '201550'){
                    /*messageBox(self, "登录", "登录失效，请重新登录！", "是", function () {
                        logout();
                    }, "", null);*/
                }else{
                    self.systemInfoList = res.data.systemInfoList;

                    localStorage.setItem("user_name", res.data.userName);
                    if(document.getElementById('headName').innerText == undefined ||
                        document.getElementById('headName').innerText == ''){
                        document.getElementById('headName').innerText =localStorage.getItem("user_name")
                    }

                }
            });
        },
        forwardPage(data,self){
            let headers = {
                headers: {
                    'token': localStorage.getItem('token') || null
                    // header('Access-Control-Allow-Origin:*')
                }
            };
            return vm.POST("contents/login/forward_page", data)
        },
        forward(obj) {
            let self = this;
            if (obj.systemNameAbbreviation.toLowerCase() === "sso") {
                window.location.href = obj.domainName + "pica_index.html";
            } else {
                let req = {
//                        token: localStorage.getItem("token"),
                    system_type: obj.id
                };
                openLoading(self);
                let promise = vm.forwardPage(req,self)
                promise.then(function (data) {
                    closeLoading(self);
                    let forwardData = JSON.parse(JSON.stringify(data));//通过这个实现深拷贝
                    console.log('forwardPage值：',forwardData)
                    let url = forwardData.data.picapMenuModels[0].url;
                    if (url.length > 1) {
                        // window.location.href = url;
                    } else {
                        url = forwardData.data.picapMenuModels[0].picapSecondMenus[0].url;
                        if (url.length > 1) {
                            // window.location.href = url;
                        } else {
                            url = forwardData.data.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; // 这个值太大了，导致头像错误的浮在弹层上面，故调整成下面的值
    z-index: 900;
    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: 16px;
            top: 20px;
            width: 24px;
            height: 24px;
            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;
}

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


