<template>
  <div class="top-nav">
    <div class="nav-logo">
      <img :src="require(`../../../assets/logo/logo.png`)" alt="">
    </div>
    <el-menu class="navbar" mode="horizontal">
      <div>
        <span> {{this.$store.getters.xt_user.org.org_name}}
        </span>
      </div>
      <div class="system-nav">
        <div class="system-nav-menu" v-if="this.$store.getters.xt_user.xt_role_exist">
          <a :href="XTWebsit()">
            <span><i class="icon iconfont icon-jiankangshuidi"></i> 血透管理</span>
          </a>
        </div>
        <div class="system-nav-menu" v-if="this.$store.getters.xt_user.cdm_role_exist">
          <a :href="CDMWebsit()">
            <span><i class="icon iconfont icon-manbing-xuanzhong"></i> 慢病管理</span>
          </a>
        </div>
        <div class="system-nav-menu active">
          <a>
            <span><i class="iconfont icon-pengyou"></i> SCRM</span>
          </a>
        </div>
        <div class="system-nav-menu" v-if="this.$store.getters.xt_user.mall_role_exist">
          <a :href="MircoMallWebsit()">
            <span><i class="icon iconfont icon-service_fill"></i> 微商城</span>
          </a>
        </div>

        <div class="system-nav-menu">
          <a :href="APPManageWebsit()">
            <span><i class="icon iconfont icon-suoyou"></i> 应用</span>
          </a>
        </div>
      </div>

      <div class="right-menu">
        <el-dropdown class="avatar-container right-menu-item" trigger="click"  @command="handleCommand">
          <div class="avatar-wrapper">
            <img class="user-avatar" :src="avater">
            <span class="user-title">{{ this.$store.getters.xt_user.user.user_name }}</span>
            <i class="el-icon-caret-bottom"></i>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="modifyUserInfoAction">
              修改个人信息
              <!-- <span @click="modifyUserInfoAction">修改个人信息</span> -->
            </el-dropdown-item>
            <el-dropdown-item command="modifyOrgInfoAction">
              机构信息
            </el-dropdown-item>
            <!-- <el-dropdown-item divided>
              <span @click="myServe">我的服务</span>
            </el-dropdown-item> -->
            <el-dropdown-item divided command="logout">
              {{$t('navbar.logOut')}}
              <!-- <span @click="logout" style="display:block;">{{$t('navbar.logOut')}}</span> -->
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <!-- <screenfull class="screenfull right-menu-item"></screenfull> -->
        <modify-user-info-dialog ref="modify_user_info_dialog"></modify-user-info-dialog>

      </div>
    </el-menu>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  // import Breadcrumb from "@/components/Breadcrumb";
  // import Hamburger from "@/components/Hamburger";
  import Screenfull from '@/components/Screenfull'
  import ModifyUserInfoDialog from '@/scrm_pages/home/modify_user_info_dialog'

  export default {
    data() {
      return {
        
      }
    },
    components: {
      // Breadcrumb,
      // Hamburger,
      Screenfull,
      ModifyUserInfoDialog,
    },
    computed: {
      ...mapGetters(['sidebar']),
      avater: function() {
        var avatar = this.$store.getters.xt_user.user.avatar
        return avatar.length > 0
          ? avatar
          : require('../../../assets/home/userData.png')
      }
    },
    methods: {
      // toggleSideBar() {
      //   this.$store.dispatch("toggleSideBar");
      // },
      handleCommand(command){
        switch (command) {
          case 'modifyUserInfoAction':
            this.modifyUserInfoAction();
            break;
          case 'modifyOrgInfoAction':
            this.modifyOrgInfoAction();
            break;
          case 'logout':
            this.logout();
            break;
        }
      },
      logout() {
        this.$store.dispatch('FrontendLogout')
        window.location.href = process.env.BASE_API + '/logout'
      },
      modifyOrgInfoAction() {
        // this.$refs.modify_org_info_dialog.show()
        this.$router.push('/orginfo')
        return false
      },
      modifyUserInfoAction() {
        this.$refs.modify_user_info_dialog.show()
      },
      myServe() {
        this.$router.push('/service')
        return false
      },
      XTWebsit() {
        return process.env.XT_HOST
      },
      MircoMallWebsit() {
        return process.env.MIRCO_MALL_HOST
      },
      CDMWebsit() {
        return process.env.CDM_HOST
      },
      APPManageWebsit() {
        return process.env.SSO_HOST + '/org/admin/apps?org=' + this.$store.getters.xt_user.org_id
      }
    },
    created() {
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.top-nav {
  background: #409eff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  .nav-logo {
    width: 162px;
    display: flex;
    align-items: center;
    height: 60px;
    text-align: center;
    justify-content: center;
    padding: 10px 0;
    box-sizing: border-box;
    float: left;

  img {
    display: inline-block;
    width: 100px;
  }

  }
  .navbar {
    border-radius: 0px !important;
    display: flex;
    justify-content: space-between;
    width: calc(100% - 180px);
    align-items: center;
    color: #fff;
    border: none;
    background: #409eff;
    float: left;

  .breadcrumb-container {
    float: left;
  }

  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }

  .right-menu {
    float: right;
    height: 100%;
    z-index: 99999;

  &
  :focus {
    outline: none;
  }

  .right-menu-item {
    display: inline-block;
    margin: 0 8px;

  .iconfont {
    font-size: 18px;
  }

  }
  .screenfull {
    height: 20px;
  }

  .international {
    vertical-align: top;
  }

  .theme-switch {
    vertical-align: 15px;
  }

  .avatar-container {
    margin-right: 10px;

  .avatar-wrapper {
    cursor: pointer;
    margin-top: 3px;
    display: flex;
    align-items: center;
    justify-content: center;

  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
  }

  .user-title {
    margin: 0 8px;
    font-size: 14px;
    color: #fff;
  }

  .el-icon-caret-bottom {
    font-size: 12px;
    color: #fff;
  }

  }
  }
  }
  }
  .system-nav {

  .system-nav-menu {
    float: left;
    height: 60px;
    line-height: 60px;
    padding: 0 25px;

  a {
    font-size: 15px;

  .iconfont {
    font-size: 18px;
  }

  }
  }
  .active {
    background: #3090eb;
    border-left: 1px #5fabf7 solid;
    border-right: 1px #5fabf7 solid;
  }

  }
  .el-menu::after,
  .el-menu::before {
    width: 1px;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
  }

  }
  .el-dropdown-menu {
    z-index: 9999 !important;
  }

  .v-modal {
    z-index: 9999 !important;
  }
</style>
