<!--
 * @Descripttion: 公共头部
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-10-10 17:21:32
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-18 17:42:14
 -->
<!--
  <vue-office-header :project-name="projectName" :current-menu-code="currentMenuCode" @collapseTag="collapseTag" @toRouterView="toRouterView"> </vue-office-header>
  import vueOfficeHeader from '@/components/vue-office-header.vue';
-->
<template>
  <div class="nav-header">
    <!-- logo -->
    <div class="nav-header-logo fl cursor-pointer"  @click="toIndex"><span class="pro-name">好办管理平台</span></div>
    <div class="nav-header-item fl">
      <template v-for="(menuItem, index) in menuHead">
        <a :key="index" :class="['item-link menu-font-16']" @click="changeRouter(menuItem)">
          <span :class="['inline-block bottom', menuItem.menuUrl.indexOf(pathName) != -1 || currentMenuCode == menuItem.menuCode ? 'current-module' : '']">{{ menuItem.menuName }}</span>
        </a>
      </template>
      <!-- 最右侧用户信息 -->
      <div class="navuser-info fr">
        <!-- <span class="span-log color-909399 iconfont iconrizhifuwu"></span> -->
        <img v-if="userInfo.headImg" class="user-img" :src="userInfo.headImg" alt="">
        <img v-else class="user-img" src="../assets/member.png" alt="img" />
        <el-popover placement="bottom" title="" width="95" trigger="hover" popper-class="user-header-pop" style="min-width: 95px;">
          <ul class="navsuer-wrap">
            <li>
              <p class="font-14 color-606266 hide-item">{{ userInfo.staffName || '--' }}</p>
              <p class="font-12 color-909399 hide-item">{{ userInfo.roleName || '--' }}</p>
            </li>
            <li class="user-item  text-align"  @click.stop="toLoginOut"><a class="user-text">退出登录</a></li>
          </ul>
          <a class="nav-user-name" slot="reference">
            <span class="font-12 color-606266">{{ userInfo.staffName || '--' }}</span> <i class="iconfont iconxiala arrowico color-c0c4cc"></i>
          </a>
        </el-popover>
      </div>
    </div>
   <!--  <div v-if="!checkShow && !$route.path.includes('enterpriseSet')" class="set-tip-body">
      <set-tip v-if="!checkShow" :tipText="tipText"></set-tip>
    </div> -->
  </div>
</template>
<script>
// import setTip from '@/components/app/set-tip.vue';
import api from '@/api/login.js';
import fetch from '@/api/menu-auth.js';
const { getRoleMenu } = fetch;
const { getUserInfo, loginOut } = api;

export default {
  name: 'VueOfficeHeader',
  components: {
    // setTip
  },
  props: {
    currentMenuCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      checkShow: true,
      tipText: '请先完成商户初始化设置后，再进行其他操作',
      repProjectName: 'haoban-manage-web', // 项目名
      // 当前路由
      pathName: '',
      isCollapse: false, // 是否收起左侧
      // 菜单数据
      menuHead: [
        /* {
          menuCode: 'contactsList',
          menuName: '通讯录',
          menuUrl: '/contactsList',
          parentCode: null,
          project: 'office',
          target: 0,
          isShow: 1
        },
        {
          menuCode: 'audit',
          menuName: '审核中心',
          menuUrl: '/unreview?/reviewed/reviewSet',
          parentCode: null,
          project: 'office',
          target: 0,
          isShow: 1
        },
        {
          menuCode: 'enterprise-setting',
          menuName: '企业设置',
          menuUrl: '/enterpriseSet?/adminList',
          parentCode: null,
          project: 'office',
          target: 0,
          isShow: 1
        } */
      ],
      roleMenuData: [],
      routePathName: '', // 当前路由值
      userInfo: {
        staffName: '',
        nationCode: '',
        phoneNumber: '',
        headImg: '',
        wxEnterpriseId: '',
        roleName: ''
      }
    };
  },
  mounted() {
    const that = this;
    that.pathName = that.$route.path;
    // 获取项目名 pathname (路由的hash)
    that.routePathName = window.location.hash.split('/')[1];
    if (that.routePathName.indexOf('?') != -1) {
      that.routePathName = that.routePathName.split('?')[0];
    }
    if (that.routePathName.indexOf('/') != -1) {
      that.routePathName = that.routePathName.split('/')[0];
    }
    // 获取菜单
    localStorage.removeItem('haoBanUser');
    that.toLogin();
  },
  methods: {
    /**
     * @description: 首页跳转
     * @author: 无尘
     */
    toIndex() {
      const that = this;
      that.$router.push('/contactsList');
    },
    /**
     * @description: 路由跳转
     * @param {Object} menuItem
     * @author: 无尘
     */
    changeRouter(menuItem) {
      const that = this;
      if (menuItem.target == 1) {
        if (menuItem.menuUrl.indexOf('http') != -1) {
          window.open(menuItem.menuUrl);
        }else {
          window.open(`/haoban-4/#${menuItem.menuUrl}`);
        }
      }else {
        that.setLeftData(menuItem);
        let childRoute = {};
        that.roleMenuData.forEach(ele => {
          // 如果第一层级下没有菜单，直接跳转
          if (menuItem.menuCode == ele.menuCode && !ele.children.length) {
            childRoute = ele;
          }
          // 如果第一层级下有菜单，就需要跳转第一层的url
          if (menuItem.menuCode == ele.menuCode && ele.children.length) {
            childRoute = ele.children[0];
          }
        });
        that.$router.push(childRoute.menuUrl);
      }
    },
    setLeftData(menuItem) {
      const that = this;
      let arr = [];
      that.roleMenuData.forEach(ele => {
        if (menuItem.menuCode == ele.menuCode) {
          arr.push(ele);
        }
      });
      that.$emit('leftData', arr);
    },
    /**
     * @description: 退出登录
     * @author: 无尘
     */
    toLoginOut() {
      const that = this;
      that
        .$confirm('确认退出吗?', '提示', {
          type: 'warning'
        })
        .then(() => {
          loginOut({})
            .then(res => {
              if (res.code == '0000') {
                that.$message({
                  message: '退出成功',
                  type: 'success'
                });
                localStorage.removeItem('haoBanUser');
                // 跳转登录页
                window.location.href = window.location.origin + '/haoban-4/#/login';
              }
            })
            .catch(function(error) {

            });
        })
        .catch(() => {});
    },
    /**
     * @description: 获取用户信息 --- api
     * @author: 无尘
     */
    toLogin() {
      const that = this;
      getUserInfo({})
        .then(res => {
          if (!res.result) {
            res.result = {
              loginStaff: {
                staffName: '',
                nationCode: '',
                phoneNumber: '',
                headImg: '',
                wxEnterpriseId: '',
              },
              role: {
                roleName: ''
              }
            };
          }
          localStorage.setItem('haoBanUser', JSON.stringify(res.result.loginStaff));
          that.userInfo = Object.assign(res.result.loginStaff, res.result.role);
          that.getData();
        })
        .catch(function(error) {

        });
    },
    /**
     * @description: 处理简单数组-->父子级
     * @param {Array} data
     * @return {Array}
     * @author: 无尘
     */
    treeData(data) {
      let tree = data.filter(father => {
        // 循环所有项
        let branchArr = data.filter(child => {
          return father.menuCode == child.parentCode && child.isShow == 1; // 返回每一项的子级数组
        });
        if (branchArr.length > 0) {
          father.hasSonNode = true;
          father.children = branchArr; // 如果存在子级，则给父级添加一个children属性，并赋值
        } else {
          father.children = [];
          father.hasSonNode = false;
        }
        return father.parentCode == '' && father.isShow == 1; // 返回第一层
      });
      return tree;
    },
    /**
     * @description: 获取菜单
     * @author: 无尘
     */
    getData() {
      const that = this;
      const para = {
        appType: 1
      };
      getRoleMenu(para)
        .then(async res => {
          if (res.code == '0000') {
            let newData = [];
            let menuItem = {};
            let currentItem = {};
            res.result.forEach(ele => {
              if (ele.level == 1 && ele.isShow == 1) {
                newData.push(ele);
              }
              // 设置默认进来数据(路由和父级一致)
              if (that.$route.path == ele.menuUrl && ele.level == 1 && ele.isShow == 1) {
                menuItem = ele;
              }
              // (路由和父级不一致)
              if (that.$route.path == ele.menuUrl && ele.level != 1) {
                currentItem = ele;
              }
            });
            that.menuHead = newData;
            that.roleMenuData = await that.treeData(JSON.parse(JSON.stringify(res.result)));
            if (Object.keys(currentItem).length && currentItem.level == 2) {
              res.result.forEach(ele => {
                if (currentItem.parentCode == ele.menuCode && ele.level == 1 && ele.isShow == 1) {
                  menuItem = ele;
                }
              });
            }
            let threeObj = {};
            if (Object.keys(currentItem).length && currentItem.level == 3) {
              res.result.forEach(ele => {
                if (currentItem.parentCode == ele.menuCode && ele.level == 2 && ele.isShow == 1) {
                  threeObj = ele;
                }
              });
            }
            if (Object.keys(threeObj).length && threeObj.level == 2) {
              res.result.forEach(ele => {
                if (threeObj.parentCode == ele.menuCode && ele.level == 1 && ele.isShow == 1) {
                  menuItem = ele;
                }
              });
            }
            that.setLeftData(menuItem);
          }
        })
        .catch(function(error) {

        });
    }
  }
};
</script>
<style lang="less" scoped>
@main-color: #2f54eb;

/* flex */

.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flex-1 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.flex-column {
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}

.flex-row {
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  -o-flex-direction: row;
  flex-direction: row;
}

.flex-align-center {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.flex-pack-center {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.flex-between {
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.flex-wrap {
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
}

.border-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.flex1(@width, @height) {
  flex: 0 0 @width;
  width: @width;
  height: @height;
}
.set-tip-body {
  position: fixed;
  left: 50%;
  top: 91px;
  z-index: 999;
}

.pro-name {
  font-size: 16px;
  font-weight: 600;
  color: rgba(48, 49, 51, 1);
  line-height: 22px;
  background: linear-gradient(270deg, rgba(91, 74, 219, 1) 0%, rgba(45, 168, 255, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.user-item {
  position: relative;
  margin-top: 10px;
  padding: 10px 0 0 0;
  &:hover {
    color: @main-color;
    // background-color: @userinfobgcolor;
    cursor: pointer;
  }
  &::after {
    content: '';
    position: absolute;
    left: -15px;
    right: -15px;
    top: 0px;
    height: 1px;
    background: #e4e7ed;
  }
}

.navsuer-wrap /deep/ {
  .hide-item {
    width: 118px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .user-item {
    text-align: center;
    color: #606266;
    a {
      color: #606266;
    }
    &:hover .user-text {
      display: block;
      color: @main-color;
      // background-color: @userinfobgcolor;
      cursor: pointer;
    }
  }
}

.nav-header /deep/ {
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  /*min-width: 1400px;*/
  height: 46px;
  line-height: 46px;
  font-size: 14px;
  background-color: #fff;
  padding: 0;
  z-index: 99;
  color: #fff;
  -webkit-box-shadow: 0px 4px 6px 0px rgba(221, 227, 237, 0.29);
  box-shadow: 0px 4px 6px 0px rgba(221, 227, 237, 0.29);
  .fl {
    float: left;
  }
  .fr {
    float: right;
  }
  &-logo {
    flex: 0 0 200px;
    width: 200px;
    height: 46px;
    float: left;
    padding-left: 50px;
    font-size: 20px;
    color: #1f2f3d;
    text-align: left;
    background: url('../assets/logo.png') no-repeat 20px center;
    background-size: 22px;
    .border-box;
  }
  &-pic {
    vertical-align: middle;
  }
  &-item {
    flex: 1;
  }
  .item-link {
    float: left;
    display: inline-block;
    width: 133px;
    // height: 44px;
    padding: 0 10px;
    text-align: center;
    cursor: pointer;
    color: #606266;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* span {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    } */
    &.menu-font-16 {
      font-size: 16px;
    }
    &.icon-collapse {
      width: auto;
      padding: 0 23px 0 14px;
    }
    &:hover {
      color: @main-color;
    }
  }

  /* 选中 */
  .current-module.bottom {
    color: @main-color;
    /* border-bottom: 2px solid @main-color; */
    font-weight: 600;
    position: relative;
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1;
      margin: 0 auto;
      width: 100%;
      animation: borders 0.5s;
      border-top: 2px solid #2f54ed;
    }
  }
}

li {
  list-style: none;
}
/*用户信息*/

.navuser-info {
  /*width: 140px;*/
  /*font-size: 0;*/
  text-align: center;
  padding-right: 20px;
  .span-log {
    position: relative;
    font-size: 18px;
    padding-right: 10px;
    /* border-right: 1px solid #e4e7ed; */
    &::after {
      content: '';
      position: absolute;
      top: 3px;
      right: 0;
      width: 0;
      height: 14px;
      border-right: 1px solid #e4e7ed;
    }
  }
  .user-img {
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    border-radius: 12px;
  }
  .el-button--text {
    padding-right: 24px;
    font-size: 14px;
    color: #606266;
    margin-left: 30px;
  }
}

.nav-user-name {
  position: relative;
  display: inline-block;
  padding: 0 20px 0 10px;
  color: #606266;
  text-align: center;
  &:hover {
    color: #2f54eb;
  }
  &:hover .arrowico {
    transform: rotate(180deg);
  }
}

.user-left-img {
  img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
  }
}

@keyframes borders {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
/* 当浏览器的可视区域小于1280px */

@media screen and (max-width: 1280px) {
  .nav-header {
    min-width: 1280px;
  }
}

@media screen and (min-width: 1280px) and (max-width: 1366px) {
  .nav-header {
    min-width: 1280px;
  }
}

@media screen and (min-width: 1366px) and (max-width: 1440px) {
  .nav-header {
    min-width: 1366px;
  }
}

@media screen and (min-width: 1440px) and (max-width: 1920px) {
  .nav-header {
    min-width: 1440px;
  }
}
</style>
