<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-07-22 17:33:54
 * @LastEditors: 无尘
 * @LastEditTime: 2019-10-21 09:54:40
 -->
<template>
  <div class="nav-wrap boxbttom border-box">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <template v-for="(item, index) in navPath">
        <template v-if="!!item.path">
          <el-breadcrumb-item
            :key="'nav' + index"
            @click="changeRoute(item.path, item.relocation)">
            <span
              class="el-breadcrumb__inner is-link"
              @click="changeRoute(item.path, item.relocation)">
              {{ item.name
              }}<!-- :to="{ path: item.path }" -->
            </span>
          </el-breadcrumb-item>
        </template>
        <template v-else>
          <el-breadcrumb-item :key="'nav' + index">
            {{ item.name }}
          </el-breadcrumb-item>
        </template>
      </template>
    </el-breadcrumb>
  </div>
</template>

<script>
import { postRequest } from '@/api/api';
import errMsg from '@/assets/js/error';
export default {
  name: 'NavBread',
  props: {
    navPath: {
      type: Array,
      default: function() {
        return [];
      }
    },
    slotFlag: {
      type: Boolean,
      default: false
    },
    navtip: {
      type: Boolean,
      default: false
    },
    subNavText: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      projectName: 'api-gateway-web' // 当前项目名
    };
  },
  methods: {
    changeRoute(path, relocation) {
      let that = this;
      if (relocation) {
        window.location.href = path;
      } else {
        // 为了返回带参数
        if (that.$route.fullPath.includes('?')) {
          let hash = '?' + that.$route.fullPath.split('?')[1];
          let newPath = path + hash;
          if (path.includes('?')) {
            newPath = path + '&' + that.$route.fullPath.split('?')[1];
          }
          that.$router.push(newPath);
          return false;
        }
        that.$router.push(path);
      }
    },
    // get nav path
    getNavPath() {
      let that = this;
      let para = {
        project: that.projectName,
        path: that.$route.path.split('/')[1]
      };

      postRequest('/api-auth/get-current-memu-data', para)
        .then(res => {
          // console.log(res,res.data,res.data.errorCode)
          let resData = res.data;
          if (resData.errorCode == 0) {
            if (!resData.result) {
              return false;
            }

            that.navpath = [];
            if (!!resData.result.list && !!resData.result.list.length) {
              resData.result.list.forEach(function(ele, index) {
                ele.name = ele.menuName;
                ele.path = '';
                if (index == resData.result.list.length - 1) {
                  ele.path = '/' + ele.menuUrl;
                }

                if (index > 0) {
                  that.navpath.push(ele);
                }
              });

              // that.navpath = resData.result.list
            }

            // that.navpath[0].name = resData.result.level2.menuName;
            // that.navpath[0].path = ''

            // that.navpath[1].name = resData.result.level3.menuName;
            // that.navpath[1].path = ''
            // if (!!resData.result.level4) {
            //   that.navpath[2] = {
            //     name:'',
            //     path: ''
            //   }
            //   that.navpath[2].name = resData.result.level4.menuName;
            //   that.navpath[2].path = ''
            // }

            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          // that.toLogin()
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  /* eslint-disable */
  mounted() {
    // var that = this;
    // that.getNavPath();
  }
};
</script>

<style lang="less" scoped>
// .fix-nav{
//   position: fixe
// }
.nav-wrap {
  padding: 12px 0 0 21px;
  height: 40px;
  background-color: #fff;
  border-radius: 2px;
  position:fixed;
  width:100%;

}
.boxbttom {
  border-bottom: 1px solid #e4e7ed;
}
.boxshow {
  border-bottom: 1px solid #e4e7ed;
  box-shadow: 5px -1px 5px #dfdfdf;
}
.navtitle {
  margin: 24px 0 0 0;
  font-size: 20px;
  color: #303133;
  font-weight: 500;
}
.navtip {
  width: 100%;
  height: 38px;
  line-height: 38px;
  font-size: 13px;
  border-radius: 2px;
  color: #606266;
  background-color: #f4f4f5;
}
.navmTop {
  margin-top: 25px;
}
.navtipcolor {
  margin: 0 12px;
  color: #1890ff;
}

.el-breadcrumb__item:last-child .el-breadcrumb__inner,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  color: #303133;
}
.el-breadcrumb__item:last-child {
  /deep/.el-breadcrumb__inner {
    font-weight: 700;
    color: #303133;
    &:hover {
      font-weight: 700;
      color: #303133;
    }
  }
}
.el-breadcrumb__inner.is-link {
  font-weight: 500;
  color: #606266;
}
</style>
