<!--  -->
<template>
  <div class="projectbox">
    <div class="projectbox_top">
      <div class="projectbox_top_left">
        <img src="../../../static/images/index/logo.png" alt="" />
        <p>病虫害监测系统</p>
      </div>
      <div class="projectbox_top_right">
        <div class="lingdangbox">
          <img
            src="../../../static/images/index/xxld.png"
            alt=""
            class="lingdang"
            @click="towarn"
          />
          <p class="lingdang_dian" v-show="warningtf"></p>
        </div>
        <p class="right_line"></p>
        <p>{{ username }}</p>
        <p class="tuichu">
          <i class="el-icon-switch-button" @click="quit"></i>
        </p>
      </div>
    </div>
    <div class="projectbox_textbox">
      <div class="projectbox_menu">
        <el-menu
          :style="{ width: '100%' }"
          :default-openeds="menuOpeneds"
          :default-active="menuActiveId"
          :collapse-transition="false"
          class="el-menu-vertical-demo"
          unique-opened
          active-text-color="#4f71ff"
        >
          <template v-if="menuList1.length">
            <div v-for="item in menuList1" :key="item.pur_id">
              <el-submenu
                :style="{
                  width: '100%',
                }"
                :index="item.pur_id.toString()"
                class="Othermenu"
                v-if="item.children"
              >
                <template slot="title">
                  <img :src="iconObj[item.pur_id]" alt="" />
                  <span>{{ item.purview_name }}</span>
                </template>
                <el-menu-item
                  v-for="subItem in item.children"
                  @click="subMenuClick(subItem.menu, item, subItem.pur_id)"
                  :key="subItem.pur_id"
                  :index="subItem.pur_id.toString()"
                >
                  <template slot="title">
                    <span>{{ subItem.purview_name }}</span>
                  </template>
                </el-menu-item>
              </el-submenu>
              <el-menu-item
                :index="item.pur_id.toString()"
                @click="homepage(item.menu)"
                v-else
              >
                <img :src="iconObj[item.pur_id]" alt="" />
                <span slot="title">{{ item.purview_name }}</span>
              </el-menu-item>
            </div>
          </template>
        </el-menu>
      </div>
      <div class="projectbox_content">
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </div>
    </div>
  </div>
</template>

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

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      menuOpeneds: [],
      menuList1: [],
      menuList2: [],
      menuActiveId: "",
      iconObj: {
        1: "../../../static/images/index/sy.png",
        2: "../../../static/images/index/gis.png",
        3: "../../../static/images/index/hjjc.png",
        4: "../../../static/images/index/sqjc.png",
        5: "../../../static/images/index/ccjc.png",
        6: "../../../static/images/index/ksny.png",
        7: "../../../static/images/index/bhjc.png",
        8: "../../../static/images/index/xxgl.png",
        10: "../../../static/images/index/zjzd.png",
        11: "../../../static/images/index/jdgl.png",
        12: "../../../static/images/index/yjxx.png",
        13: "../../../static/images/index/user.png",
        14: "../../../static/images/index/base.png",
      },
      username: "",
      warningtf: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    "$route.path": function (newVal) {
      // console.log(newVal)
      this.getpath();
    },
  },
  //方法集合
  methods: {
    getNavList() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=user.login.user_login_info",
        data: this.qs.stringify({
          // pp_token:""
        }),
      }).then((res) => {
        console.log(res.data);
        var data = res.data.data.children;
        this.username = res.data.data.username;
        this.menuList1 = [];
        for (let i = 0; i < data.length; i++) {
          this.menuList1.push(data[i]);
        }
        localStorage.setItem("menu", JSON.stringify(this.menuList1));
        this.getpath();
      });
    },
    homepage(menu) {
      this.$router.push("/index/" + menu);
    },
    subMenuClick(menu) {
      this.$router.push("/index/" + menu);
    },
    getpath() {
      var path = String(this.$route.path); //获取当前页面路由
      // console.log(path);
      var indexnum = path.indexOf("/", 1); //第一个/的位置
      // console.log(indexnum);
      var indexnum2 = path.indexOf("/", indexnum + 1); //带有参数是第二个/位置
      // console.log(indexnum2);
      var newpath = "";
      if (indexnum2 == -1) {
        newpath = path.slice(indexnum + 1); //获取当前页面路由名称
      } else {
        newpath = path.slice(indexnum + 1, indexnum2); //获取当前页面路由名称
      }
      console.log(newpath);
      for (var i = 0; i < this.menuList1.length; i++) {
        if (newpath == this.menuList1[i].menu) {
          this.menuActiveId = this.menuList1[i].pur_id.toString();
          // console.log(this.menuActiveId)
        } else {
          console.log(this.menuList1[i].children);
          if (this.menuList1[i].children) {
            var data = this.menuList1[i].children;
            for (var j = 0; j < data.length; j++) {
              console.log(data[j].menu);
              if (newpath == data[j].menu) {
                this.menuActiveId = data[j].pur_id.toString();
                console.log(this.menuActiveId);
              }
            }
          }
        }
      }
    },
    towarn() {
      this.$router.push("/index/earlywarning");
    },
    quit() {
      localStorage.removeItem("menu");
      localStorage.removeItem("keys");
      this.$router.push("/login");
    },
    //预警提示
    getwarningread() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=device.device_picture.warning_read",
        data: this.qs.stringify({}),
      }).then((res) => {
        console.log(res);
        this.warningtf = res.data.data;
      });
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getNavList();
    this.getwarningread();
  },
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // this.getNavList();
    setInterval(()=>{
      this.getwarningread();
    },600000)
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
p {
  margin: 0;
}
li {
  list-style-type: none;
}
.projectbox {
  width: 100%;
  height: 100%;
  background-color: #f2f2f7;
  min-width: 1500px;
  .projectbox_top {
    width: 100%;
    height: 60px;
    line-height: 40px;
    background-color: #4f71ff;
    padding: 10px 30px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    .projectbox_top_left {
      display: flex;
      img {
        width: 27px;
        height: 27px;
        vertical-align: middle;
        margin-top: 5px;
        margin-right: 15px;
      }
    }
    .projectbox_top_right {
      display: flex;
      .right_line {
        height: 40%;
        width: 1px;
        background-color: #fff;
        margin-top: 12px;
        margin-right: 10px;
      }
      .lingdangbox {
        position: relative;
        .lingdang {
          width: 27px;
          height: 27px;
          vertical-align: middle;
          margin-right: 10px;
        }
        .lingdang_dian{
          width: 8px;
          height: 8px;
          background-color: red;
          border-radius: 8px;
          position: absolute;
          top: 8px;
          right: 12px;
        }
      }
      .tuichu {
        margin-left: 10px;
      }
    }
  }
  .projectbox_textbox {
    width: 100%;
    height: calc(100vh - 60px);
    display: flex;

    .projectbox_menu {
      width: 200px;
      height: 100%;
      overflow-y: auto;
      background-color: #fff;
      /deep/.el-menu-vertical-demo {
        border: 0px;
      }
      /deep/.el-menu-item {
        height: 48px;
        line-height: 48px;
      }
      /deep/.el-submenu__title {
        height: 48px;
      }
      /deep/.is-active {
        background-color: rgba(40, 100, 238, 0.08);
        border-right: 3px solid #4f71ff;
        color: #303133 !important;
      }
      /deep/.el-submenu {
        background-color: transparent;
        border-right: 0;
      }
    }
    .projectbox_content {
      width: calc(100% - 200px);
      height: 100%;
      padding: 20px;
      box-sizing: border-box;
      overflow-y: auto;
    }
  }
}
/deep/.el-dialog__header {
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5;
  padding: 15px 20px;
  .el-dialog__title {
    font-weight: 700;
  }
}
/deep/.el-dialog__body {
  padding: 32px 16px;
  .el-button--primary {
    background-color: #4f71ff;
    border-color: #4f71ff;
  }
}
/deep/.el-dialog__footer {
  border-top: 1px solid #e5e5e5;
  padding: 10px 20px;
  .el-button--default {
    background-color: #fff;
    border-color: #4f71ff;
    color: #4f71ff;
  }
  .el-button--primary {
    background-color: #4f71ff;
    border-color: #4f71ff;
  }
}
/deep/.el-button {
  background-color: #4f71ff;
  border-color: #4f71ff;
}
</style>