<template>
  <div class="layout">
    <el-container>
      <!-- 侧边栏 -->
      <div style="max-width: 300px; height: 100%; background-color: #354595">
        <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical-demo"
          background-color="#354595"
          text-color="#fff"
          active-text-color="#ffd04b"
          :collapse="isCollapse"
          @select="selectMenus"
        >
          <el-menu-item index="/daichuli">
            <!-- <i class="el-icon-s-order"></i> -->
            <span slot="title">待处理的检验订单</span>
          </el-menu-item>
          <el-menu-item index="/yichuli">
            <!-- <i class="el-icon-s-claim"></i> -->
            <span slot="title">已处理的检验订单</span>
          </el-menu-item>
          <el-menu-item index="/daishenhe">
            <!-- <i class="el-icon-s-open"></i> -->
            <span slot="title">待审核的检验订单</span>
          </el-menu-item>
          <el-menu-item index="/yishenhe">
            <!-- <i class="el-icon-s-check"></i> -->
            <span slot="title">已审核的检验订单</span>
          </el-menu-item>
          <!-- <el-menu-item index="/" class="toHome">
            <i class="el-icon-s-home"></i>
            <span slot="title">返回首页</span>
          </el-menu-item> -->
        </el-menu>
      </div>
      <el-container>
        <!-- 页码头部标题 -->
        <el-header>
          <vheader></vheader>
        </el-header>
        <div class="lline">
          <!-- 导航折叠按钮 -->
          <el-radio-group
            v-model="isCollapse"
            style="margin-bottom: 20px"
            @change="btnClick"
            class="navbtn"
          >
            <el-radio-button :label="false" class="icon1" v-show="btn1Show">
              <i class="el-icon-s-unfold"></i>
            </el-radio-button>
            <el-radio-button :label="true" class="icon2" v-show="btn2Show">
              <i class="el-icon-s-fold"></i>
            </el-radio-button>
          </el-radio-group>
          <!--面包屑列表-->
          <el-breadcrumb class="navbread" separator="/">
            <el-breadcrumb-item
              v-for="(item, index) in breadList"
              :key="index"
              @click.native="breadcrumbClick(item)"
              :v-if="item.name"
              style="cursor: pointer"
            >
              {{ item.name }}
            </el-breadcrumb-item>
          </el-breadcrumb>
          <!-- <el-dropdown trigger="click" style="float: right">
            <span class="el-dropdown-link">
              {{ userName }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="selectMenus('/')"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown> -->
        </div>
        <!-- 主页 -->
        <el-main>
          <!-- 路由组件 -->
          <transition name="Fade" mode="out-in">
            <router-view></router-view>
          </transition>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import vheader from "../components/home/header/index.vue";

export default {
  // name:'nav',
  components: { vheader },
  data() {
    return {
      breadList: [],
      isCollapse: false,
      btn1Show: false,
      btn2Show: true,
      activeMenu: "/daichuli",
      userType: null,
    };
  },
  watch: {
    $route() {
      this.getBreadcrumb();
    },
  },
  created() {
    this.getBreadcrumb();
    this.userType = localStorage.userType;
    this.activeMenu = this.$route.path;
  },
  computed: {
    userName: function () {
      return localStorage.getItem("userName");
    },
  },
  methods: {
    btnClick() {
      this.btn1Show = !this.btn1Show;
      this.btn2Show = !this.btn1Show;
    },
    selectMenus(key) {
      let routeHerf = null;
      switch (key) {
        case "/":
          routeHerf = `${LXYLOGIN_URL}`;
          break;
        case "/daichuli":
          routeHerf = `${DAICHULI_URL}`;
          break;
        case "/yichuli":
          routeHerf = `${YICHULI_URL}`;
          break;
        case "/daishenhe":
          routeHerf = `${DAISHENHE_URL}`;
          break;
        case "/yishenhe":
          routeHerf = `${YISHENHE_URL}`;
          break;
      }
      window.location.href = routeHerf;
    },
    // 面包屑数据处理
    getBreadcrumb() {
      let that = this;
      // 由于本项目大部分属于‘一级’页面，所以在设置路由时候，一级页面不设置breadNumber = 1，‘二级’页面以上才设置breadNumber
      let breadNumber =
        (typeof this.$route.meta.breadNumber !== "undefined"
          ? this.$route.meta.breadNumber
          : 1) - 1;
      // 获取当前页面的名字和路由，并组合成新的对象
      let newBread = { name: this.$route.name, path: this.$route.fullPath };
      let vuexBreadList = []; // 默认初始化面包屑数据
      if (breadNumber !== 1) {
        // 当前面包屑breadNumber大于1时才会从vuex中获取值
        vuexBreadList = that.$store.state.breadListState; // 获取breadList数组
      }
      if (breadNumber < vuexBreadList.length) {
        // "回退"面包屑----判断条件：当前路由breadNumber小于vuexBreadList的长度
        vuexBreadList.splice(
          breadNumber - vuexBreadList.length,
          vuexBreadList.length - breadNumber
        );
      }
      if (breadNumber > vuexBreadList.length) {
        // 添加面包屑----判断条件：当前路由breadNumber大于vuexBreadList的长度
        vuexBreadList.push(newBread);
      }
      // 处理完数据后，将最终的数据更新到vuex（用于页面刷新）
      that.$store.commit("breadListMutations", vuexBreadList);
      // 处理完数据后，将最终的数据更新为新的面包屑数组
      that.breadList = vuexBreadList;
    },
    // 面包屑点击事件
    breadcrumbClick(item) {
      this.$router.push({
        path: item.path,
      });
    },
  },
};
</script>
    
<style scoped lang='less'>
.Fade-enter,
.Fade-leave-to {
  opacity: 0;
}
.Fade-enter-to,
.Fade-leave {
  opacity: 1;
}

.Fade-enter-active,
.Fade-leave-active {
  transition: all 0.4s;
}

.lline {
  padding: 15px 20px 0px 20px;
  // padding-top: 15px;
  height: 30px;
  line-height: 30px;
  // background-color: gainsboro;
  background-color: #e4e8f1;
  padding-bottom: 10px;
}

/deep/.el-breadcrumb__inner.is-link:hover {
  color: #303133;
}
/deep/.el-menu {
  border-right: 0;
}
/deep/.el-breadcrumb__inner.is-link {
  font-size: 20px;
  font-weight: 400;
}
.navbtn {
  display: inline-block;
  vertical-align: top;
}
.navbread {
  display: inline-block;
  vertical-align: top;
  font-size: 20px;
  // font-weight: 400;
  position: relative;
  top: 2.5px;
}
.icon1 {
  position: relative;
  left: 0px;
}
.icon2 {
  position: relative;
  left: 0px;
}
/deep/.el-radio-button__inner:hover {
  color: #333;
}
/deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  border-color: #e4ebf1;
  // border-color:gainsboro;
  box-shadow: -1px 0 0 0 #e4ebf1;
}
/deep/.el-radio-button__inner {
  font-size: 25px;
  padding: 0 10px 0 0;
}
/deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background-color: #e4ebf1;
}
/deep/.el-radio-button__inner {
  background-color: #e4ebf1;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 260px;
  height: 100%;
}
.el-menu-item {
  font-size: 20px;
  font-family: "PingFangSC-Medium";
  position: relative;
  top: 60px;
}
.el-menu-item,
.el-submenu__title {
  height: 60px;
  line-height: 60px;
  text-align: center;
}
.el-menu-item.is-active {
  background-color: #409eff !important;
  color: white !important;
}
.layout .el-container {
  height: 100vh;
}
.el-header {
  background-color: white;
  color: #333;
  display: none;
}
.el-aside {
  background-color: #354595;
  color: #333;

  line-height: 200px;
}

.el-main {
  // background-color: gainsboro;
  background-color: #e4e8f1;
  color: #333;
  padding-top: 0px;
}
.el-breadcrumb {
  margin-left: 15px;
}
body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
h1 {
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  color: white;
  text-align: center;
}
.el-menu .toHome {
  position: absolute;
  top: unset;
  bottom: 0px;
  width: 100%;
}
.el-menu--collapse {
  height: 100%;
}
</style>
