<!--  -->
<template>
  <div class="indexbox">
    <div class="menubox">
      <div class="menubox_logo">
        <img src="../../assets/logo.png" alt="" class="menubox_logo_img" />
        <div class="menubox_logo_text">
          <p>中国海关</p>
          <p>CHINACUSTOMS</p>
        </div>
      </div>
      <div class="menubox_item">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          background-color="#0D3756"
          text-color="#fff"
          :default-active="menuActiveId"
          active-text-color="#409EFF"
          :unique-opened="true"
        >
          <!-- <el-menu-item
            index="/index/home"
            class="firstmenu"
            @click="skip('/index/home')"
          >
            <i class="el-icon-collection-tag"></i>
            <span slot="title">首页</span>
          </el-menu-item> -->
          <el-submenu
            v-for="item in infodata"
            :key="item.pur_id"
            :index="item.pur_id.toString()"
          >
            <template slot="title">
              <i class="el-icon-collection-tag"></i>
              <span>{{ item.purview_name }}</span>
            </template>
            <template v-for="items in item.children">
              <el-submenu
                :index="items.pur_id.toString()"
                v-if="items.children"
                :key="items.pur_id"
                @click="skip('/index/' + items.menu)"
              >
                <span slot="title"
                  ><i class="el-icon-collection-tag"></i
                  >{{ items.purview_name }}</span
                >
                <el-menu-item-group>
                  <el-menu-item
                    v-for="item2 in items.children"
                    :index="item2.pur_id.toString()"
                    :key="item2.pur_id"
                    @click="skip('/index/' + item2.menu)"
                  >
                    <span slot="title"
                      ><i class="el-icon-collection-tag"></i
                      >{{ item2.purview_name }}</span
                    >
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-menu-item
                :index="items.pur_id.toString()"
                v-else
                :key="items.pur_id"
                @click="skip('/index/' + items.menu)"
                class="el-menu-item2"
              >
                <span slot="title"
                  ><i class="el-icon-collection-tag"></i
                  >{{ items.purview_name }}</span
                >
              </el-menu-item>
            </template>
          </el-submenu>
        </el-menu>
      </div>
    </div>
    <div class="contentbox">
      <div class="contentbox_top">
        <div class="index_title">
          <p>深圳海关外来入侵物种监测指挥中心</p>
        </div>
        <div class="index_out">
          <p>{{ username }}</p>
          <p><i class="el-icon-switch-button" @click="quit"></i></p>
        </div>
      </div>
      <div class="contentbox_crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
            v-for="(item, index) in routerinfo"
            :key="item.pur_id"
            ><a
              v-if="index == routerinfo.length - 2 && item.menu!=''"
              :href="'/#/index/'+item.menu"
              >{{ item.purview_name }}</a
            ><a v-else>{{ item.purview_name }}</a></el-breadcrumb-item
          >
        </el-breadcrumb>
      </div>
      <div class="contentbox_box">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      infodata: [],
      username: "",
      routerdata: [],
      menuActiveId: "1",
      // menuOpeneds:["18"]
      routerinfo: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    "$route.path": function (newVal) {
      console.log(newVal);
      this.routemap(this.routerdata);
      // this.menuActiveId = this.$route.path;
    },
  },
  //方法集合
  methods: {
    handleOpen(e) {
      console.log(e);
      // localStorage.setItem("menuActiveId", e);
    },
    handleClose() {},
    // user.login.user_login_info
    getuserinfo() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=sysmenage.usermanager.user_info",
      }).then((res) => {
        this.routerdata = JSON.parse(JSON.stringify(res.data.data.children));
        this.infodata = res.data.data.children;
        console.log(this.routerdata);
        // this.infodata.shift();
        localStorage.setItem('userID', res.data.data.im_user_id) // 存储当前登录账号的ID
        this.infodata.shift();
        this.username = res.data.data.username;
        localStorage.setItem("usernme", this.username);
        this.routemap(this.routerdata);
      });
    },
    quit() {
      // user.login.logout_user
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=sysmenage.usermanager.user_logout",
      }).then((res) => {
        if (res.data.data) {
          localStorage.removeItem("session");
          localStorage.removeItem("username");
          this.$router.push("/Login");
        }
      });
    },
    skip(path) {
      // console.log(this.$route);ssssss
      if (this.$route.path != path) {
        this.$router.push(path);
      }
    },
    routemap(routerdata) {
      var newrouter = this.$route.path;
      var tf = routerdata.filter((item) => {
        if (item.menu != "") {
          if (newrouter.indexOf(item.menu) != -1) {
            //第一层菜单是否包含当前路由
            // console.log(item);
            return [item.menu, item.pur_id];
          } else {
            if (item.children) {
              this.routemap(item.children);
            }
          }
        } else {
          if (item.children) {
            this.routemap(item.children);
          }
        }
      });
      // console.log(tf)
      if (tf.length != 0) {
        this.menuActiveId = tf[0].pur_id.toString();
        this.routerinfo = [];
        this.routerinfo.unshift(tf[0]);
        var newpath = this.routerdata.filter((item) => {
          // console.log(item)
          if (item.pur_id == tf[0].parent_perm_id) {
            return item.pur_id == tf[0].parent_perm_id;
          } else {
            var newpath2 = item.children.filter((items) => {
              if (items.pur_id == tf[0].parent_perm_id) {
                return items.pur_id == tf[0].parent_perm_id;
              } else {
                if (items.children) {
                  var newpath3 = items.children.filter((itemsa) => {
                    return itemsa.pur_id == tf[0].parent_perm_id;
                  });
                  if (newpath3.length != 0) {
                    this.routerinfo.unshift(newpath3[0]);
                    return newpath3;
                  }
                }
              }
              // return items.pur_id == tf[0].parent_perm_id;
            });
            if (newpath2.length != 0) {
              this.routerinfo.unshift(newpath2[0]);
              return newpath2;
            }
          }
        });
        this.routerinfo.unshift(newpath[0]);
        console.log(this.routerinfo);
      }
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // this.menuActiveId = localStorage.getItem("menuActiveId");
    this.getuserinfo();
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
p {
  margin: 0;
}
.indexbox {
  display: flex;
}
.menubox_logo {
  background-color: #0d3756;
  margin: 0;
  height: 62px;
  width: 240px;
  display: flex;
  .menubox_logo_img {
    width: 40px;
    height: 40px;
    margin: 15px 15px 11px 30px;
  }
  .menubox_logo_text {
    color: #fff;
    margin-top: 18px;
    p {
      margin: 0;
      font-size: 18px;
    }
    p:last-child {
      font-size: 12px;
      margin-top: 5px;
    }
  }
}
.menubox {
  width: 240px;
  height: 100vh;
  .menubox_item {
    height: calc(100vh - 62px);
    background-color: #0d3756;
    overflow-y: auto;
    /deep/.el-menu-vertical-demo {
      width: 240px;
    }
    /deep/.el-submenu__title {
      text-align: left;
    }
    /deep/.el-submenu__title:hover {
      background-color: #490eff !important;
    }
    /deep/.is-opened > .el-submenu__title {
      background-color: #490eff !important;
    }
    /deep/.el-menu-item {
      text-align: left;
      // padding-left: 53px !important;
      background-color: rgba(0, 0, 0, 0.3) !important;
    }
    .el-menu-item2 {
      background-color: transparent !important;
    }
    /deep/.el-menu-item:hover {
      background-color: #490eff !important;
    }
    /deep/.el-menu-item-group__title {
      display: none;
    }
    .firstmenu {
      text-align: left;
      padding-left: 20px !important;
      background-color: #0d3756 !important;
    }
    /deep/.is-active {
      background-color: #490eff !important;
    }
  }
  /*滚动条样式*/
  ::-webkit-scrollbar {
    width: 6px;
    /*height: 4px;*/
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.1);
  }
  ::-webkit-scrollbar-track {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    // border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
  }
}
.contentbox {
  width: calc(100% - 240px);
  .contentbox_top {
    display: flex;
    justify-content: space-between;
    height: 62px;
    box-shadow: 0 2px 3px -1px rgb(224, 219, 219); //底部阴影
    .index_title {
      line-height: 62px;
      font-size: 18px;
      padding-left: 20px;
      font-weight: 700;
    }
    .index_out {
      display: flex;
      line-height: 62px;
      p:last-child {
        margin: 0 15px;
      }
    }
  }
  .contentbox_crumbs {
    width: 95%;
    margin: 15px auto;
    /deep/.el-breadcrumb {
      padding: 0 !important;
      background-color: transparent !important;
    }
  }
  .contentbox_box {
    width: 98%;
    height: calc(100vh - 104px);
    // background-color: chartreuse;
    margin: 15px auto 0;
    overflow-y: auto;
  }
}
</style>