<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2018-10-10 17:21:32
 * @LastEditors: 无尘
 * @LastEditTime: 2020-03-09 13:59:38
 -->
<template>
  <div class="navheader">
    <!-- logo -->
    <div class="navheader-logo fl" :class="{ moveleft: isCollapse, moveright: !isCollapse }"><span class="pro-name">好办管理平台</span></div>
    <div class="navheader-item fl">
      <!-- <a class="itemlink icon-collapse" @click="handleCollapse">
        <i class="iconfont" :class="{ 'icon-shouqi': !isCollapse, 'icon-zhankai': isCollapse }"></i>
      </a> -->
      <template v-for="(menuitem, index) in menuHead">
        <a :key="index" :class="['itemlink bottom menu-mall menu-font-16', pathName == menuitem.url ? 'current-module' : '']" @click="changeRouter(menuitem.url)">
          {{ menuitem.rightName }}
        </a>
      </template>
      <!-- 最右侧用户信息 -->
      <div class="navuserinfo fr">
        <span class="span-log color-909399 iconfont iconrizhifuwu"></span>
        <!-- <el-button type="text" @click="toLoginOut">退出</el-button> -->
        <el-popover placement="bottom" title="" width="95" trigger="hover" popper-class="user-header-pop" style="min-width: 95px;">
          <ul class="navsuerwrap">
            <!-- <li class="user-item">
              <div class="flex flex-row flex-align-center user-info-wrap">
                <div class="user-left-img">
                  <img :src="userInfo.headPic" alt="" />
                </div>
                <div class="user-right-info flex flex-column" style="margin-left: 10px">
                  <p>{{ userInfo.name }}</p>
                  <p>{{ userInfo.nationcode == '86' ? userInfo.phoneNumber : '+' + userInfo.nationcode + '-' + userInfo.phoneNumber }}</p>
                </div>
              </div>
            </li> -->
            <li class="user-item loginout" style="text-align: center" @click.stop="toLoginOut"><a class="usertext">退出登录</a></li>
            <!-- href="javascript:void(0)" -->
          </ul>
          <a class="nav-user-name" slot="reference">
            <span class="font-12 color-606266">{{ userInfo.staffDTO.staffName || '--' }}</span> <i class="iconfont iconxiala arrowico"></i>
          </a>
        </el-popover>
      </div>
    </div>
  </div>
</template>
<script>
import { postRequest } from '@/api/api';
import errMsg from '@/common/js/error';
import qs from 'qs';
export default {
  name: 'vue-office-header',
  props: ['menuRouter', 'collapseFlag', 'projectName'],
  data() {
    return {
      repProjectName: 'haoban-manage-web', // 项目名
      // 当前路由
      pathName: '',
      isCollapse: false, // 是否收起左侧
      // 菜单数据
      menuHead: [
        // {
        //   menuCode: null,
        //   rightName: "首页",
        //   url: "/index",
        //   parentCode: null,
        //   project: "office"
        // }
      ],
      // 获取 location origin
      baseUrl: '',
      routePathName: '', // 当前路由值
      userInfo: {
        name: '',
        phoneNumber: '',
        headPic: '',
        staffDTO: {
          staffName: ''
        }
      }
    };
  },
  beforeMount() {
    const that = this;
    let host = window.location.origin;
    if (host.indexOf('localhost') != '-1') {
      that.baseUrl = 'http://www.gicdev.com';
    } else {
      that.baseUrl = host;
    }
  },
  methods: {
    /**
     * 路由跳转
     */
    changeRouter(path) {
      let that = this;
      that.$router.push(path);
    },

    // 处理折叠
    handleCollapse() {
      const that = this;
      that.isCollapse = that.isCollapse == true ? false : true;
      that.$emit('collapseTag', that.isCollapse);
    },

    // 跳转 gic 管理后台
    toGicLogin() {
      let toUrl = window.location.origin.includes('demogic.com') ? window.location.origin : 'https://hope.demogic.com';
      window.location.href = toUrl + '/gic-web/#/';
    },

    //退出登录
    toLoginOut() {
      const that = this;
      that
        .$confirm('确认退出吗?', '提示', {
          type: 'warning'
        })
        .then(() => {
          that.axios
            .post('/haoban-manage3-web/logout', {})
            .then(res => {
              let resData = res.data;
              if (resData.errorCode == 1) {
                that.$message({
                  message: '退出成功',
                  type: 'success'
                });
                // 跳转登录页
                window.location.href = window.location.origin + '/haoban-3/#/login';
                return;
              }
              that.$message.error({
                duration: 1000,
                message: resData.message
              });
            })
            .catch(function(error) {
              that.$message.error({
                duration: 1000,
                message: error.message
              });
            });
        })
        .catch(() => {});
    },

    // 触发父组件路由
    toRouter(path, name, code) {
      const that = this;
      let obj = {
        path: '/' + path,
        name: name
      };
      that.$emit('toRouterView', obj);
    },

    /**
     * 简单数组-->父子数组对象
     */
    treeData(data) {
      let tree = data.filter(father => {
        //循环所有项
        let branchArr = data.filter(child => {
          return father.haobanMenuRightId == child.parentRightId; //返回每一项的子级数组
        });
        if (branchArr.length > 0) {
          father.children = branchArr; //如果存在子级，则给父级添加一个children属性，并赋值
        }
        return father.parentRightId == -1; //返回第一层
      });
      return tree;
    },

    /**
     *  获取菜单详情
     */
    getMenuDetail() {
      const that = this;
      let para = {
        router: that.routePathName,
        project: that.repProjectName,
        requestProject: that.repProjectName
      };

      that.axios
        .post(that.baseUrl + '/haoban-manage-web/menu-detail', qs.stringify(para))
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.pathName = '/' + resData.result.top.url;
            return;
          }
          that.$message.error({
            duration: 1000,
            message: resData.message
          });
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },

    /**
     *  获取菜单
     */
    getHeaderMenu() {
      const that = this;
      let para = {
        project: that.repProjectName,
        requestProject: that.repProjectName
      };

      that.axios
        .post(that.baseUrl + '/haoban-manage-web/menu-list', qs.stringify(para))
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            resData.result.forEach(function(ele, index) {
              ele.url = '/' + ele.url;
            });
            that.menuHead = that.treeData(resData.result);
            that.$nextTick(() => {
              that.userInfo = JSON.parse(localStorage.getItem('userInfo'));
              if (!that.userInfo) {
                that.userInfo = {
                  name: '',
                  headPic: '',
                  phoneNumber: ''
                };
                that.getUserData();
              }
            });
            return;
          }
          that.$message.error({
            duration: 1000,
            message: resData.message
          });
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    getUserData() {
      const that = this;
      that.axios
        .get(that.baseUrl + '/haoban-manage-web/emp/get-user-info', {})
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.userInfo = resData.result;
            localStorage.setItem('userInfo', JSON.stringify(resData.result));
            return;
          }
          that.$message.error({
            duration: 1000,
            message: resData.message
          });
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     *  登录 --- api
     */
    toLogin() {
      const that = this;
      let para = {};
      postRequest('/haoban-manage3-web/get-login-info', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            localStorage.setItem('userInfo', JSON.stringify(resData.result));
            that.userInfo = resData.result;
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },

  watch: {
    $route: {
      handler: function(val, oldVal) {
        // const that = this;
        // that.getMenuDetail();
      },
      // 深度观察监听
      deep: true
    },

    collapseFlag: function(newData, oldData) {
      const that = this;
      that.isCollapse = newData;
    },

    projectName: function(newData, oldData) {
      const that = this;
      that.repProjectName = newData || 'haoban-manage-web';
    }
  },
  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];
    }
    // 项目名
    that.repProjectName = that.projectName || 'haoban-manage-web';
    that.isCollapse = that.collapseFlag;
    // 获取菜单
    if (!localStorage.getItem('userInfo')) {
      that.toLogin();
    } else {
      that.userInfo = JSON.parse(localStorage.getItem('userInfo'));
    }
    // Promise.all([that.getHeaderMenu(), that.getMenuDetail()]);
    // that.userInfo = JSON.parse(localStorage.getItem('userInfo'));
  }
};
</script>
<style lang="less" scoped>
@base-color: #353944;
@hover-color: #3c92eb;
@hoverbg-color: #20242d;
@main-color: #2f54eb;
@navbgcolor: #04143a;
@sidebgcolor: #020b21;
@userinfobgcolor: #ecf5ff;
@contentbgcolor: #f5f7fa;
@bordercolor: #dcdfe6;
@customnavcolor: #04143a;
@btnbgcolor: #f5f7fa;
@iconbgcolor: #e6e9f2;
@elmenuisactive: #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;
}

.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 {
  padding: 10px 0;
  &:hover {
    color: @main-color;
    background-color: @userinfobgcolor;
    cursor: pointer;
  }
}

.navsuerwrap /deep/ {
  .user-item {
    color: #606266;
    a {
      color: #606266;
    }
    &:hover .usertext {
      display: block;
      color: @main-color;
      background-color: @userinfobgcolor;
      cursor: pointer;
    }
  }
  .loginout {
    // border-top: 1px solid #eee;
    // box-sizing: border-box;
    // padding: 15px 0;
    // margin-bottom: 20px;
  }
}

.navheader /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;
  }
  .itemlink {
    float: left;
    display: inline-block;
    width: 133px;
    height: 44px;
    text-align: center;
    cursor: pointer;
    color: #606266;
    &.menu-font-16 {
      font-size: 16px;
    }
    &.icon-collapse {
      width: auto;
      padding: 0 23px 0 14px;
    }
    &:hover {
      color: @main-color;
    }
  }
  .bottom:hover {
    border-bottom: 3px solid @main-color;
  }
  /* 选中 */
  .current-module.bottom {
    color: @main-color;
    border-bottom: 3px solid @main-color;
    font-weight: 500;
  }
  /* logo */
  .moveleft {
    margin-left: -136px;
    transition: all 0.3s ease;
    background-position: 151px 10px;
    color: transparent;
  }
  .moveright {
    margin-left: 0px;
    transition: all 0.2s ease;
  }
}

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

.navuserinfo {
  /*width: 140px;*/
  /*font-size: 0;*/
  text-align: center;
  padding-right: 20px;
  .span-log {
    position: relative;
    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;
    }
  }
  .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%;
  }
}
/* 当浏览器的可视区域小于1280px */

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

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

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

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