<template>
  <div class="header-container">
    <div class="logo">
      <img src="../../../assets/image/IM/logo-small.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" />
        </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" />
        </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 { getInnerLoginUrl } from '@/utils/index.js';
  import { forwardPage } from '@/api/layout';
  import { base64encode } from '@/utils/utils.js';
  export default {
    props: {
      userName: {
        type: String,
        default: '',
      },
      authList: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        name: '',
      };
    },
    computed: {},

    created() {},
    methods: {
      handleCommand(command) {
        if (command === 'logout') {
          window.location.href = getInnerLoginUrl();
        }
      },
      forward(obj) {
        if (obj.systemNameAbbreviation.toLowerCase() === 'sso') {
          window.location.href = obj.domainName + 'pica_index.html';
        } else {
          const req = {
            system_type: obj.id,
          };
          forwardPage(req).then(
            (data) => {
              const forwardData = JSON.parse(JSON.stringify(data.data)); // 通过这个实现深拷贝
              let url = forwardData.picapMenuModels[0].url;
              if (url.length <= 1) {
                url = forwardData.picapMenuModels[0].picapSecondMenus[0].url;
                if (url.length <= 1) {
                  url =
                    forwardData.picapMenuModels[0].picapSecondMenus[0]
                      .picapThirdMenus[0].url;
                }
              }

              const param =
                'token=' +
                localStorage.getItem('token') +
                '&ssoOrigin=' +
                localStorage.getItem('ssoOrigin') +
                '&system_type=' +
                obj.id;
              window.location.href =
                obj.domainName + url + '?' + base64encode(param);
            },
            (error) => {
              console.log(error);
            }
          );
        }
      },
    },
  };
</script>
<style lang="scss" scoped>
.header-container {
  position: relative;
  left: 0;
  top: 0;
  box-sizing: border-box;
  height: 64px;
  width: 100%;
  z-index: 1000;
  font-size: 22px;
  line-height: 64px;
  color: #fff;
  // background-color: #242f42;
  .logo {
    float: left;
    width: 215px;
    text-align: center;
    color: #fff;
    background: #0b2f3f;
    img {
      width: 32px;
      float: left;
      margin-left: 19px;
      margin-top: 14px;
    }
    p {
      text-align: left;
      margin-left: 60px;
    }
  }
  .user-info {
    float: right;
    padding-right: 50px;
    font-size: 16px;
    color: #838683;
    .el-dropdown-link {
      display: flex;
      align-items: center;
      padding-left: 50px;
      color: #838683;
      cursor: pointer;
      vertical-align: middle;
      font-size: 14px;
    }
    .user-logo {
      margin-right: 6px;
      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>
