<template>
  <div class="dg-page-header">
    <header class="menu-header ant-layout-header">
      <a href="#" class="goto" :style="`background: url(${bgUrl}) 65% 50% / 100% no-repeat;`"></a>
      <a href="#" class="logo"><span class="ali-name">河钢集团主数据管理平台</span></a>
      <div class="horizontalMenu">
        <!-- <ul class="ant-menu ant-menu-dark ant-menu-root ant-menu-horizontal" role="menu" style="line-height: 50px; height: 50px; background: rgb(26, 26, 26); width: 80%; left: 180px;">
        <li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" role="menuitem" style="display: none;">
          <div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div>
        </li>
        <li class="ant-menu-item ant-menu-item-selected" role="menuitem"><a href="#/aggregate">数据汇聚</a></li>
        <li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" role="menuitem" style="display: none;"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li>
        <li class="ant-menu-item" role="menuitem"><a href="#/dataRefining">数据精炼</a></li>
        <li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" role="menuitem" style="display: none;"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li>
        <li class="ant-menu-item" role="menuitem"><a href="#/dataService">数据服务</a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" role="menuitem" style="display: none;"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li>
        <li class="ant-menu-item" role="menuitem"><a href="#/monitorOperation">监控运维</a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" role="menuitem" style="display: none;"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li>
        <li class="ant-menu-item" role="menuitem"><a href="#/intelligentData">智能数据</a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" role="menuitem" style="display: none;"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li>
        <li class="ant-menu-item" role="menuitem"><a href="#/mainData">主数据管理</a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" role="menuitem" style="visibility: hidden; position: absolute; display: none;"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li>
      </ul> -->
      </div>
      <div class="head-portrait">
        <div class="user-header">
          <img
            class="user-log-img"
            :src="`../../assets/TB1u365d4jaK1RjSZFAXXbdLFXa-48-48.jpg`"
            alt="加载中"
            @click="showUserList"
          />
          <i aria-label="图标: caret-down" class="anticon anticon-caret-down"
            ><svg
              viewBox="0 0 1024 1024"
              focusable="false"
              class=""
              data-icon="caret-down"
              width="1em"
              height="1em"
              fill="currentColor"
              aria-hidden="true"
              @click="showUserList"
            >
              <path
                v-show="userListShow"
                d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
              ></path>
              <path
                v-show="!userListShow"
                d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
              ></path>
            </svg>
          </i>
        </div>
        <div v-show="userListShow" class="user-list">
          <div class="list-conents-new">
            <header>
              <div class="user-logo">
                <img
                  class="user-log-img"
                  :src="`/dc/static/original/${$styleVars.themeImgType}/${item.OBJ_TYPE}.png`"
                  alt="加载中"
                />
              </div>
              <div class="userName-box">
                <div class="header-user-name">{{ username }}</div>
                <template v-if="roles && roles.length > 0">
                  <div v-for="name in roles" :key="name">{{ name }}</div>
                </template>
              </div>
            </header>
            <!-- <main><a href="#/cloudResources">云资源管理</a></main>
              <main><a href="#/configManagement">后端配置管理</a></main>
              <main><a href="/manage2paas/">用户中心</a></main>
              <main><a href="/apply2paas/#/scene">场景申请</a></main>
              <main><a href="#/userInfo">个人信息</a></main> -->
            <div class="sign-out" @click="dropOut">退出登录</div>
          </div>
        </div>
      </div>
    </header>
  </div>
</template>
<script>
import { cookie } from '@datago/utils'

export default {
  name: 'DgPageHeader',
  props: {
    bgUrl: {
      type: String,
      default: () => '',
    },
  },
  data() {
    return {
      username: '',
      roles: [],
      userListShow: false,
    }
  },
  mounted() {
    this.$moduleApiData.getPortalUserInfo().then(async (r) => {
      console.log('header获取用户', r)
      if (!r || r.code == '401' || !r.data || !r.data.attributes || !r.data.attributes.userName) {
        //
      } else {
        this.username = r.data.attributes.userName
        const rolesRes = await this.$apiData.DgJsonStore({
          apiCode: 'sys_get_role_by_user',
          params: `command=init&resType=user&user=${r.data.attributes.code}`,
        })
        if (rolesRes && rolesRes.root) {
          ;(rolesRes.root || []).forEach((el) => {
            this.roles.push(el.CNNAME)
          })
        }
        // this.roles = (this.$store.state.user.info.roleNames||'').split(',').filter(e=>e);
      }
    })
  },
  methods: {
    showUserList() {
      this.userListShow = !this.userListShow
    },
    async dropOut() {
      // 登出去掉本系统的cookie，登出接口在前端调用
      // window.localStorage.clear()
      window.localStorage.removeItem('vuex')
      window.localStorage.removeItem('token')
      const orig = window.location.origin
      await this.$moduleApiData.logout({
        redirectUrl: '',
      })
      cookie.clear('JSESSIONID') // JSESSIONID目前为httpOnly，前端无法操作
      window.location =
        `http://idm.hbisco.com/cas/logout?service=${orig}${this.$moduleApiData.loginUrl}` + window.location.href
    },
  },
}
</script>
