<template>
  <el-container>
    <el-header class="el-header" height="100%">
      <div class="header-row">
        <div class="nav-left" style="min-width: 300px;text-align: left;">
          <!--资产库相关-->
          <div v-if="mainType=='0'" class="inline-block header-font text-general-color">AWS PAL资产库</div>
          <div v-if="mainType=='1'" id="ws-select" class="inline-block">
            <div class="icon-main-div cursor-pointer" :style="{'background-color': mainIcon.color}" @mouseenter="function(){mainIcon.code='&#59139;';mainIcon.color='#6d97ff'}" @mouseleave="function(){mainIcon.code=mainIconTemp.code;mainIcon.color=mainIconTemp.color}" @click="returnMainPage">
              <i class="awsui-iconfont icon-i-ws" v-html="mainIcon.code"></i>
            </div>
            <el-dropdown trigger="click" @command="handleWsCommand" @visible-change="changeDropDownArrow">
              <span class="el-dropdown-link header-font cursor-pointer text-general-color">
                {{wsLabel}}<i class="awsui-iconfont" style="margin-left: 5px;font-size: 14px;" v-html="arrowTip=='down' ? '&#xe716;' : '&#xe718;'"></i>
              </span>
              <el-dropdown-menu slot="dropdown" class="navigation-dropdown-area">
                <template v-for="item in wsOptions">
                  <el-dropdown-item class="el-dropdown-row" :command="item.value">
                    <div class="inline-block text-general-color" style="height: 100%;width: 80%"><span style="font-size: 14px;">{{item.label}}</span></div>
                    <div class="inline-block" style="width: 20%"><i :class="['el-icon-check','text-linker-color',{'icon-check-display':item.value != wsValue}]" style="float:right;"></i></div>
                  </el-dropdown-item>
                </template>
                <el-dropdown-item divided></el-dropdown-item>
                <el-dropdown-item class="text-linker-color el-dropdown-row" command="create">
                  <div style="height: 100%;width: 100%;font-size: 14px;"><i class="iconfont icon-xinjian" style="font-size: 14px;"></i><span>新建资产库</span></div>
                </el-dropdown-item>
                <el-dropdown-item class="text-linker-color el-dropdown-row" command="import">
                  <div style="height: 100%;width: 100%;font-size: 14px;"><i class="iconfont awsui-iconfont-sousuo1" style="font-size: 14px;"></i><span>导入资产库</span></div>
                </el-dropdown-item>
                <el-dropdown-item class="text-general-color el-dropdown-row" command="manage">
                  <div style="height: 100%;width: 100%;font-size: 14px;"><i class="iconfont awsui-iconfont-zengjia" style="font-size: 14px;"></i><span>管理资产库</span></div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <!--小组相关-->
          <div v-if="mainType=='2'" class="inline-block header-font text-general-color">AWS PAL小组</div>
          <div v-if="mainType=='3'" id="team-select" class="inline-block">
            <div class="icon-main-div cursor-pointer" :style="{'background-color': mainIcon.color}" @mouseenter="function(){mainIcon.code='&#59139;';mainIcon.color='#6d97ff'}" @mouseleave="function(){mainIcon.code=mainIconTemp.code;mainIcon.color=mainIconTemp.color}" @click="returnMainPage">
              <i class="awsui-iconfont icon-i-ws" v-html="mainIcon.code"></i>
            </div>
            <el-dropdown trigger="click" @command="handleTeamCommand" @visible-change="changeDropDownArrow">
              <span class="el-dropdown-link header-font cursor-pointer text-general-color">
                {{teamLabel}}<i class="awsui-iconfont" style="margin-left: 5px;font-size: 14px;" v-html="arrowTip=='down' ? '&#xe716;' : '&#xe718;'"></i>
              </span>
              <el-dropdown-menu slot="dropdown" class="navigation-dropdown-area">
                <template v-for="item in teamOptions">
                  <el-dropdown-item class="el-dropdown-row" :command="item.value">
                    <div class="inline-block text-general-color" style="height: 100%;width: 80%"><span style="font-size: 14px;">{{item.label}}</span></div>
                    <div class="inline-block" style="width: 20%"><i :class="['el-icon-check','text-linker-color',{'icon-check-display':item.value != teamValue}]" style="float:right;"></i></div>
                  </el-dropdown-item>
                </template>
                <el-dropdown-item v-if="(isManage && isTeamManager) || isTeamManager" divided></el-dropdown-item>
                <el-dropdown-item v-if="isManage && isTeamManager" class="text-linker-color el-dropdown-row" command="create">
                  <div style="height: 100%;width: 100%;font-size: 14px;"><i class="iconfont icon-xinjian" style="font-size: 14px;"></i><span>新建小组</span></div>
                  </el-dropdown-item>
                <el-dropdown-item v-if="isTeamManager" class="text-general-color el-dropdown-row" command="manage">
                  <div style="height: 100%;width: 100%;font-size: 14px;"><i class="iconfont awsui-iconfont-zengjia" style="font-size: 14px;"></i><span>管理小组</span></div>
                  </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <!--管理中心-->
          <div v-if="mainType=='4'" class="inline-block header-font text-general-color">AWS PAL管理中心</div>
        </div>
        <div class="nav-center" style="width: 350px;">
          <div v-if="mainType=='1' || mainType=='3'" style="position: relative;" @click.stop="keepRepositoryQuery" id="repositoryQueryArea">
            <el-input style="width:350px;" size="small" placeholder="搜索文件" v-model="queryInput" @input="basicQuery">
              <i class="inline-block awsui-iconfont" slot="prefix">&#xe6e9;</i>
              <i style="cursor: pointer;" class="inline-block awsui-iconfont" slot="suffix" @click="conditionQuery">&#xe664;</i>
            </el-input>
            <RepositoryQuery style="line-height: normal !important;" ref="repositoryQuery" :queryInput="queryInput"></RepositoryQuery>
          </div>
        </div>
        <div class="nav-right">
          <ul class="nav-right-ul">
            <li>
              <div>
                <el-dropdown
                        ref="userDropDownMenu"
                        :hide-on-click=true
                        @command="handleUserCommand"
                        trigger="click">
                  <el-popover
                          placement="top-start"
                          width="200"
                          trigger="hover">
                    <template slot="default">
                      <div class="methodId-box">
                        <ul>
                          <li class="hover_login_data">姓名: <span class="hover_login_data" :title=currentUserName >{{currentUserName}}</span></li>
                          <li class="hover_login_data">角色名称: <span class="hover_login_data" :title=currentUserRole>{{currentUserRole}}</span></li>
                          <li class="hover_login_data">部门名称: <span class="hover_login_data" :title=crrentUserDep>{{crrentUserDep}}</span></li>
                        </ul>
                      </div>
                    </template>
                    <span slot="reference" class="inline-block user_photo_dropdown_span cursor-pointer">
                    <img class="user_photo_img radius3" :src="userPhoto">
                    </span>
                  </el-popover>


                  <el-dropdown-menu class="text-general-color" slot="dropdown" style="width:200px;">
                    <el-dropdown-item class="el-dropdown-row" v-if="mainType != '4' && isManage" command="manage">
                      <div style="height: 100%;width: 100%;font-size: 14px;"><span style="font-size: 14px;">管理中心</span></div>
                    </el-dropdown-item>
                    <el-dropdown-item v-if="mainType != '4' && isManage" divided></el-dropdown-item>
                    <el-dropdown-item class="el-dropdown-row" command="bbs">
                      <div style="height: 100%;width: 100%;font-size: 14px;"><span style="font-size: 14px;">研习社</span></div>
                    </el-dropdown-item>
                    <el-dropdown-item class="el-dropdown-row" command="help">
                      <div style="height: 100%;width: 100%;font-size: 14px;"><span style="font-size: 14px;">帮助文档</span></div>
                    </el-dropdown-item>
                    <el-dropdown-item divided></el-dropdown-item>
                    <el-dropdown-item class="el-dropdown-row" v-if="isChangePwd()" command="updatePwd">
                      <div style="height: 100%;width: 100%;font-size: 14px;"><span style="font-size: 14px;">修改密码</span></div>
                    </el-dropdown-item>
                    <el-dropdown-item class="el-dropdown-row" command="logout">
                      <div style="height: 100%;width: 100%;font-size: 14px;"><span style="font-size: 14px;">退出登录</span></div>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </li>
            <!-- 三员开启时安全保密员不显示以下功能 -->
            <template v-if="!isSecAdminUser">
              <li v-if="mainType != '2' && mainType != '4' && mainType != '0'">
                <div class="inline-block" style="line-height: 20px;vertical-align: middle;margin-left: 10px;margin-right:10px;">
                  <div style="width: 1px;height: 20px;border-left: 1px solid #f2f2f2;margin-left: 5px;margin-right: 5px;"></div>
                </div>
              </li>
              <li v-if="mainType != '2' && mainType != '4' && mainType != '0'" v-show="!showAppDetail">
                <div id="appPopover">
                  <el-popover
                          ref="appPopover"
                          placement="top-start"
                          title="应用中心"
                          :open-delay="250"
                          trigger="click">
                    <ul class="nav-app-list-ul">
                      <li class="inline-block" v-for="row in Math.ceil(appList.length/5)" style="vertical-align: top;">
                        <template v-for="item in appList.slice((row-1)*5, row*5)">
                          <div class="app-div general-bgcolor-hover cursor-pointer"
                               @click="openApp(item.appId, item.clazzName, item.name, item.icon.icon, item.icon.color)">
                            <div class="inline-block app-icon-div" :style="{'background':item.icon.color}">
                              <i class="awsui-iconfont" style="font-size: 18px;color: #fff" v-html="item.icon.icon"></i>
                            </div>
                            <div class="inline-block app-text-div">
                              <div>
                                <p class="app-label-p-title text-general-color">{{item.name}}</p>
                              </div>
                              <div>
                                <p class="app-label-p-desc text-second-color">{{item.desc}}</p>
                              </div>
                            </div>
                          </div>
                        </template>
                      </li>
                    </ul>
                    <i slot="reference" class="iconfont cursor-pointer app-icon" style="font-size: 18px;">&#xe636;</i>
                  </el-popover>
                </div>
              </li>
              <li v-show="showAppDetail">
                <div style="padding: 0 10px;background-color: #EEE;">
                  <div class="inline-block app-icon-div" :style="{'background':currApp.bgColor}" style="width: 22px;height: 22px;line-height:22px;vertical-align:middle;top: 0px;">
                    <i class="awsui-iconfont" style="font-size: 14px;color: #fff" v-html="currApp.icon"></i>
                  </div>
                  <span class="inline-block text-general-color" style="font-size: 14px;height: 100%;vertical-align: middle;margin:0 5px;">{{currApp.name}}</span>
                  <i class="awsui-iconfont text-general-color cursor-pointer" style="font-size: 14px;" @click="closeApp()">&#59134;</i>
                </div>
              </li>
              <li>
                <div style="margin-right: 5px;">
                  <div class="quick-access-btn" v-if="isManage && mainType != '0' && mainType != '1'" @click="openManageMainPage">
                    <span><i class="awsui-iconfont quick-access-btn-icon">&#xe839;</i><span class="quick-access-btn-text">访问资产库</span></span>
                  </div>
                  <div class="quick-access-btn" v-if="(mainType == '0' || mainType == '1' || mainType == '4') && isCooperationActive" style="display: inline-block;cursor: pointer;color: #999;padding:0 5px;" @click="openCooperationPage">
                    <span><i class="awsui-iconfont quick-access-btn-icon">&#xe839;</i><span class="quick-access-btn-text">访问小组</span></span>
                  </div>
                  <div class="quick-access-btn" v-if="isPbulishActive" style="display: inline-block;cursor: pointer;color: #999;padding:0 5px;" @click="openProcessManagePortalPage">
                    <span><i class="awsui-iconfont quick-access-btn-icon">&#xe839;</i><span class="quick-access-btn-text">访问发布门户</span></span>
                  </div>
                </div>
              </li>
            </template>
          </ul>
        </div>
      </div>
      <WorkspaceUpdate ref="workspaceUpdate"></WorkspaceUpdate>
      <WorkspaceImport ref="workspaceImport"></WorkspaceImport>
      <cooperation-update
          ref="cooperationUpdate"
          :visible.sync="cooperation.visible"
          :teamId="cooperation.teamId"
          v-on:cancel="cooperation.visible = false"
          v-on:getResult="createCooperationCallback"
          :title="cooperation.title"/>
    </el-header>
  </el-container>
</template>

<script>
  import WorkspaceUpdate from "../workspace/WorkspaceUpdate";
  import WorkspaceImport from "../workspace/WorkspaceImport";
  import RepositoryQuery from "../repository/RepositoryQuery";
  import awsuiAxios from "../../awsuiAxios";
  import {newWin, newPageWin, updateHtmlTitle} from "../../api/commonFun";
  import CooperationUpdate from "../../components/CooperationUpdate/component";
    export default {
      name: "Navigation",
      components: {WorkspaceUpdate, WorkspaceImport, RepositoryQuery, CooperationUpdate},
      data() {
        return {
          mainType : mainType,// 0:左侧显示资产库文字，中间无输入框，右侧显示所有，1:左侧显示资产库下拉菜单，中间显示输入框，右侧显示所有，2:左侧显示小组文字，中间无输入框，右侧显示所有，3:左侧显示小组下拉菜单，中甲显示输入框，右侧显示所有，4:管理中心
          isManage: isManage,
          isSecAdminUser: isSecAdminUser,// 是否安全保密员，三员开启且为安全保密员为true
          userPhoto : '',
          currentUserName:'',
          currentUserRole:'',
          crrentUserDep:'',
          crrentUserId:'',
          isPbulishActive : false,
          isCooperationActive : false,
          wsLabel : '',
          wsValue : '',
          wsOptions : [],
          teamLabel: '',
          teamValue: '',
          isTeamManager: false,
          teamOptions: [],
          arrowTip: 'down',
          queryInput : '',
          appList: [],
          teamAppList: {},
          showAppDetail:false,
          currApp:{
            id:'',
            clazzName:'',
            name:'',
            icon:'',
            bgColor:''
          },
          mainIcon: {code: '&#58884;', color: '#4E7FF9'},
          mainIconTemp: {code: '&#58884;', color: '#4E7FF9'},
          cooperation: {
            visible: false,
            teamId: '',
            title: '创建小组'
          },
          cooperationDrawer: {
            showCooperationDetail: false,
          },

        }
      },
      inject : ['openAppDrawer', 'closeAppDrawer', 'openPwdConfig', 'logout', 'openCooperationDrawer', 'closeCooperationDrawer', 'saveAccessOpLog'],// 父组件方法注入
      methods : {
        basicQuery() {// 基础查询
          this.closeApp();
          this.closeCooperation();
          // this.showQueryArea = true;
          if (this.queryInput.trim() == '') {
            this.$store.commit('setNavigationQueryVisibleFn',false);// 导航栏输入框快速搜索
          } else {
            this.$store.commit('setNavigationQueryVisibleFn',true);// 导航栏输入框快速搜索
          }
        },
        conditionQuery() {// 筛选查询
          this.closeApp();
          this.closeCooperation();
          this.$store.commit('setNavigationQueryVisibleFn',false);// 导航栏输入框快速搜索
          this.$store.commit('setNavigationConditionQueryVisibleFn',true);// 导航栏输入框条件搜索窗口
        },
        keepRepositoryQuery() {// 无用，只是阻拦Main.vue中的页面click执行

        },
        handleWsCommand(command) {// 资产库操作
          this.closeApp();
          this.closeCooperation();
          if (command == 'create') {
            // 资产库
            this.$refs.workspaceUpdate.openUpdateWsDlg('create', '', this);
          } else if (command == 'import') {
            this.$refs.workspaceImport.openImportWsDlg(this);
          } else if (command == 'manage') {
            newPageWin('palManage', this.$store.state.sessionId, 'com.actionsoft.apps.coe.pal_user_home_page', {mainType: 4}, '_top');
          } else {// 切换资产库
            this.wsValue = command;
            for (let i = 0; i < this.wsOptions.length; i++) {
              if (this.wsOptions[i].value == command) {
                this.wsLabel = this.wsOptions[i].label;
                this.$store.commit('setWsIdFn',this.wsValue);
                this.saveAccessOpLog('workspace');// 访问资产库日志
                updateHtmlTitle(this.wsLabel);// 修改网页标题
              }
            }
          }
        },
        handleTeamCommand(command) {// 小组操作
          this.closeApp();
          this.closeCooperation();
          if (command == 'create') {// 小组创建
            this.cooperation.visible = true;
          } else if (command == 'manage') {// 小组管理
            this.openCooperation();
          } else {// 切换小组
            this.teamValue = command;
            for (let i = 0; i < this.teamOptions.length; i++) {
              if (this.teamOptions[i].value == command) {
                this.teamLabel = this.teamOptions[i].label;
                const teamId = this.teamValue.split('|')[0];
                this.$store.commit('setTeamIdFn',teamId);
                this.$store.commit('setWsIdFn',this.teamValue.split('|')[1]);
                this.appList = this.teamAppList[teamId];
                this.updateTeamLogo(teamId);
                this.saveAccessOpLog('cooperation');// 访问小组日志
                updateHtmlTitle(this.teamLabel);
              }
            }
          }
        },
        handleUserCommand(command) {// 用户中心
          this.closeApp();
          this.closeCooperation();
          if (command == 'manage') {
            newPageWin('palCooperation', this.$store.state.sessionId, 'com.actionsoft.apps.coe.pal_user_home_page', {mainType: 4}, '_top');
          } else if (command == 'bbs') {// 研习社
            newWin('bbsLink', "http://www.awspal.com/study");
          } else if (command == 'help') {// 帮助中心
            newWin("helpLink", "http://docs.awspaas.com/coe/aws-paas-user-manual-coe-pal/index.html");
          } else if (command == 'updatePwd') {
            this.openPwdConfig();// 修改密码
          } else if (command == 'logout') {
            this.logout();// 退出pal
          }
        },
        /*******应用中心app侧边栏*********/
        openApp(appId, clazzName, name, icon, color) {// 打开App
          this.$refs['appPopover'].doClose();
          this.currApp.id = appId;
          this.currApp.name = name;
          this.currApp.clazzName = clazzName;
          this.currApp.icon = icon;
          this.currApp.bgColor = color;
          this.openAppDrawer();
          // 导航栏应用显示处理
          this.showAppDetail = true;
        },
        closeApp() {
          this.closeAppDrawer();
        },
        /*******PAL小组侧边栏*********/
        openCooperation() {// 打开PAL小组
          this.openCooperationDrawer();
        },
        closeCooperation() {
          this.closeCooperationDrawer();
        },
        isChangePwd() {// 是否可以修改密码
          return isSecurityPwdChange;
        },
        updateWorkspaceCallback() {// 新建、更新资产库回调函数
          newPageWin('palMain', this.$store.state.sessionId, 'com.actionsoft.apps.coe.pal_user_home_page', {}, '_top');
        },
        importWorkspaceCallback() {// 导入资产库回调函数
          newPageWin('palMain', this.$store.state.sessionId, 'com.actionsoft.apps.coe.pal_user_home_page', {}, '_top');
        },
        initParam() {// 初始化参数
          const that = this;
          const data = {
            url:'jd',
            data:{
              cmd : 'com.actionsoft.apps.coe.pal_nav_header_data',
              mainType : mainType
            }
          };
          awsuiAxios.post(data).then(function (ro) {
            if (ro.result == 'ok') {
              let data = ro.data;
              that.userPhoto = data.userPhoto;

              //增加用户姓名/用户角色/用户部门信息   by zhaolei
              that.currentUserName = data.currentUserName;
              that.currentUserRole = data.currentUserRole;
              that.crrentUserDep = data.crrentUserDep;
              that.crrentUserId=data.crrentUserId;
              that.isPbulishActive = data.isPbulishActive;
              that.isCooperationActive = data.isCooperationActive;
              that.appList = data.appList;
              that.teamAppList = data.teamAppList;
              that.teamLabel = data.teamLabel;
              that.teamValue = data.teamValue;
              that.teamOptions = data.teamOptions;
              that.wsValue = data.wsValue;
              that.$store.commit('setWsIdFn',that.wsValue);
              if (that.teamValue != '') {
                const teamId = that.teamValue.split('|')[0];
                that.$store.commit('setTeamIdFn',teamId);
                that.$store.commit('setWsIdFn',that.teamValue.split('|')[1]);
                // 更新小组图标
                that.updateTeamLogo(teamId);
              }
              that.isTeamManager = data.isTeamManager;
              that.wsLabel = data.wsLabel;
              that.wsOptions = data.wsOptions;
              if (mainType == '0') {
                // 资产库（空白）
                that.$router.replace({path: 'workspace'});
                updateHtmlTitle('AWS PAL资产库');// 修改网页标题
              } else if (mainType== '2') {
                // 小组（空白）
                that.$router.replace({name: 'cooperationCreate',params: {isManage: isManage}});
                updateHtmlTitle('AWS PAL小组');// 修改网页标题
              } else if (mainType == '4') {
                // 管理中心
                that.$router.replace({path: 'manage'});
                updateHtmlTitle('AWS PAL管理中心');// 修改网页标题
              } else if (mainType == '1' || mainType == '3') {
                let htmlTitle = that.wsLabel;
                if (mainType == '1') {
                  // 记录访问日志
                  that.saveAccessOpLog('workspace');// 访问资产库日志
                } else {
                  that.saveAccessOpLog('cooperation');// 访问小组日志
                  htmlTitle = that.teamLabel
                }
                that.$router.replace({path: 'repository'})
                updateHtmlTitle(htmlTitle);// 修改网页标题
              }
            }
          }).catch(error=>{
            console.log(error);
          })
        },
        returnMainPage() {// 返回主页（最近、星标文件）
          this.closeApp();
          this.closeCooperation();
          if (!this.queryInput == '') {
            this.queryInput = '';
          }
          this.$router.push({path: '/Repository', query: {param: Math.random()}});
        },
        changeDropDownArrow(flag) {// 资产库、小组下拉菜单图标
          if (flag) {
            this.arrowTip = 'up';
          } else {
            this.arrowTip = 'down';
          }
        },
        updateTeamLogo(teamId) {
          const that = this;
          for (let i = 0; i < that.teamOptions.length; i++) {
            if (that.teamOptions[i].teamId == teamId) {
              that.mainIcon.color = that.teamOptions[i].teamLogo.color;
              that.mainIcon.code = that.teamOptions[i].teamLogo.code;
              that.mainIconTemp.color = that.teamOptions[i].teamLogo.color;
              that.mainIconTemp.code = that.teamOptions[i].teamLogo.code;
              break;
            }
          }
        },
        createCooperationCallback(result) {// 创建小组完成后执行
          if (result == 'ok') {
            newPageWin('palCooperation', this.$store.state.sessionId, 'com.actionsoft.apps.coe.pal_user_home_page', {mainType: 5}, '_top');
          }
        },
        openCooperationPage() {// 打开PAL小组
          newPageWin('palCooperation', this.$store.state.sessionId, 'com.actionsoft.apps.coe.pal_user_home_page', {mainType: 5}, '_top');
        },
        openManageMainPage() {// 跳转到PAL流程资产库管理员的主页面
          newPageWin('palCooperation', this.$store.state.sessionId, 'com.actionsoft.apps.coe.pal_user_home_page', {}, '_top');
        },
        openProcessManagePortalPage() {// 跳转到流程管理门户页面
          newPageWin('publishPortal', this.$store.state.sessionId, 'com.actionsoft.apps.coe.pal.publisher_client_home');
        },

      },
      created() {
        this.initParam();
      }
    }
</script>

<style scoped>
  .el-header {
    padding-right: 0;
    padding-left: 0
  }
  .header-row {
    border-bottom: 1px solid #F2F2F2;
    box-shadow: rgba(170, 170, 170, 0.3) 0px 2px 5px 0px;;
    height: 39px;
    line-height:40px;
    vertical-align:middle;
    padding-top:8px;
    padding-bottom:8px;
    padding-left: 20px;
    padding-right: 20px
  }
  .header-font {
    font-size: 16px !important;
    font-weight: 600;
  }
  .nav-left {
    display: inline-block;
    float: left;
  }
  .nav-center {
    display: inline-block;
    float: left;
  }
  .nav-right {
    display: inline-block;
    float: right;
  }
  .nav-app-list-ul {
    max-width:1024px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
  }
  .nav-app-list-ul li {
    width: 200px;
  }
  .app-div {
    height: 56px;
    padding-left: 20px;
    /*margin: 5px 0;*/
  }
  .app-div:hover div div p {
    color: #4E7FF9;
  }
  .app-label-p-title {
    font-size:13px;
  }
  .app-label-p-desc {
    -webkit-transform:scale(0.9);
    transform-origin: 0 0;
    font-size:12px;
  }
  .app-icon-div {
    position: relative;
    top:-1px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    vertical-align: middle;
    text-align: center;
    border-radius: 10%;
  }
  .app-text-div {
    margin-left: 7px;
    position: relative;
    top: 12px;
  }
  .app-text-div div p{
    width: 140px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .user_photo_dropdown_span {
    width: 26px;
    height:26px;
    vertical-align: middle;
  }
  .user_photo_img {
    width: 26px;
    height: 26px;
    position: absolute;
    border-radius: 50%;
    left: 0px;
  }
  .inline-block {
    display: inline-block;
  }
  .cursor-pointer {
    cursor:pointer;
  }
  .nav-right-ul li {
    float: right;
  }
  .icon-check-display {
    display: none;
  }
  .app-icon {
    color: #A5B5CE;
  }
  .app-icon:hover {
    color: #4E7FF9;
  }
  .icon-main-div {
    border-radius: 50%;
    display: inline-block;
    width: 26px;
    height: 26px;
    text-align: center;
    line-height: 26px;
    vertical-align: middle;
    position: relative;
    top: -4px;
    margin-right: 8px;
  }
  .icon-i-ws {
    color: white;
    font-size: 14px;
  }
  .el-dropdown-link:hover {
    color: #4E7FF9;
  }
  .el-dropdown-row {
    min-height: 46px;
    line-height: 46px;
  }
  .el-dropdown-row :hover {
    color: #4E7FF9 !important;
  }
  .navigation-dropdown-area {
    min-width: 250px;
    max-height: 370px;
    overflow-y: auto;
  }
  #appPopover >>> .el-popover__title {
    color: #606266;
    font-weight: 600;
  }
  #repositoryQueryArea div >>> .el-input__inner{
    color: #8E8E8E !important;
    background-color: #F0F3F9 !important;
    border: 0px;
  }
  .quick-access-btn {
    display: inline-block;
    cursor: pointer;
    color: #999;
    padding:0 5px;
  }
  .quick-access-btn-icon {
    font-size: 18px;
  }
  .quick-access-btn-text {
    position: relative;top: -2px;
    padding-left: 3px;
  }
  .quick-access-btn :hover {
    color: #4E7FF9 !important;
  }




  .hover_wrapper {
    position: relative;
    display: flex;
  }
  .hover_text{
    width: 100px;
    height: 24px;
    text-align: center;
    line-height: 24px;
  }
  .btn{
    width: 24px;
    height: 24px;
    border: 1px solid #ccc;
    border-radius: 50%;
    text-align: center;
    line-height: 22px;
    position: relative;
    cursor: pointer;
  }
  .hover_container{
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    border-radius: 8px;
    text-align: center;
    line-height: 98px;
    position: absolute;
    left: 50px;
    top: 50%;
    z-index: 99;
    transform: translateY(-50%);
  }
  .hover_login_data{
    font-size: 14px;
    color: rgb(147,147,153);
    margin-right: 8px;
    width:200px;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
  }


</style>
