<!-- 农林植保 -->
<template>
  <el-container style="height: 100%">
    <el-header height="80px">
      <div class="headMenu">
        <!-- logo -->
        <div class="logoinfo">
          <img :src="$imghost + logoIcon" width="40" alt v-if="loginInfo.role_logo" />
          <img :src="loginInfo.role_logo" v-else />
          <!-- <span>{{ loginInfo.role_header || "河南省高标准农田管理系统" }}</span> -->
          <span>河南省高标准农田管理系统</span>
        </div>
        <!-- 菜单 -->
        <ul class="topMenu">
          <li
            v-for="(item,index) in menuList"
            :key="item.index"
            :class="{'active':item.name==currTopMenuId}"
            :id="'nav' + index"
            v-trigger="(that)"
            @click="topMenuClick(item,index)"
          >
            <div class="navContent">
              <div class="a1">
                <div class="blueMenu">
                  <img src="../../static/images/indexTab.png" alt="">
                </div>
              </div>
              <div class="a2">
                <div class="blueMenu indexTabActive">
                  <img src="../../static/images/indexTabActive.png" alt="">
                </div>
              </div>
              
              <div class="navTxt">{{item.name}}</div>
            </div>
          </li>
          <!-- <li
            v-for="(item,index) in menuList"
            :key="item.index"
            :class="{'active':item.name==currTopMenuId}"
            :id="'nav' + index"
            v-trigger
            @click="topMenuClick(item,index)"
          >
            <img v-if="item.id" :src="iconimgs[item.id]" alt />
            <div>{{item.name}}</div>
          </li> -->
        </ul>
        <div class="userInfo">
          欢迎您！ {{username}}　
          <!-- <el-dropdown >
            <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>个人中心</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->
          <div class="exit">
            <i class="el-icon-edit"></i>
          </div>
          <!-- <div> -->
          <!-- <button></button> -->
          <!-- <el-button type="primary" icon="el-icon-search">搜索</el-button> -->
          <!-- </div> -->
        </div>
      </div>
    </el-header>
    <el-container style="overflow: auto">
      <el-aside width="85px">
        <ul class="leftMenu">
          <li
            v-for="(item, index) in leftMenuList"
            :key="item.path"
            :class="{'active':item.name==currLeftMenuId}"
            @click="leftMenuClick(item,index)"
          >
            <img v-if="item.id" :src="iconimgs[item.id]" alt />
            <div>{{item.name}}</div>
          </li>
        </ul>
      </el-aside>
      <el-main>
        <div class="tabsNav">
          <el-tabs v-model="menuTabsValue" type="card" closable @tab-click="clickTab" @tab-remove="removeTab">
            <el-tab-pane
              v-for="(item, index) in menuTabs"
              :key="item.path"
              :label="item.name"
              :name="item.name"
            ></el-tab-pane>
          </el-tabs>
        </div>
        <div class="content">
            <!-- <div>{{menuTabsValue}}</div> -->
            <!-- <keep-alive> -->
              <router-view></router-view>
            <!-- </keep-alive> -->
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      that: this,
      logoIcon: "/images/logo.png",
      menuList: [
        // {
        //   name: "数据监测",
        //   id: "1",
        //   children: [
        //     {
        //       name: "设备列表",
        //       path: "/page1",
        //       id: "11"
        //     },
        //   ]
        // },
        // {
        //   name: "可视化系统",
        //   id: "8",
        //   children: [
        //     {
        //       name: "可视化系统",
        //       path: "/monitor",
        //       id: "88"
        //     }
        //   ]
        // },
        // {
        //   name: "智能灌溉系统",
        //   id: "2",
        //   children: [
        //     {
        //       name: "系统管理",
        //       path: "/page3",
        //       id: "22"
        //     }
        //   ]
        // },
        // {
        //   name: "农业水价改革",
        //   id: "3",
        //   children: [
        //     {
        //       name: "设备列表",
        //       path: "/page1"
        //     }
        //   ]
        // },
        // {
        //   name: "农业地理信息",
        //   id: "4",
        //   children: [
        //     {
        //       name: "设备列表",
        //       path: "/page1"
        //     }
        //   ]
        // },
        // {
        //   name: "农产品追溯",
        //   id: "5",
        //   children: [
        //     {
        //       name: "设备列表",
        //       path: "/page1"
        //     }
        //   ]
        // },
        // {
        //   name: "系统管理",
        //   id: "6",
        //   children: [
        //     {
        //       name: "用户管理",
        //       path: "/page4",
        //       id: "22"
        //     },
        //     {
        //       name: "角色管理",
        //       path: "/page6",
        //       id: "22"
        //     },
        //     {
        //       name: "主题定制",
        //       path: "/page7",
        //       id: "22"
        //     },
        //   ]
        // },
        // {
        //   name: "设备管理",
        //   id: "6",
        //   children: [
        //     {
        //       name: "设备管理",
        //       path: "/page8",
        //       id: "22"
        //     }
        //   ]
        // }
      ],
      leftMenuList: [],
      currTopMenuId: '数据监测',
      currLeftMenuId: '设备列表',
      iconimgs: {
        "1": require("@/assets/images/home/home02/scd.png"),
        "2": require("@/assets/images/home/home02/scd.png"),
        "3": require("@/assets/images/home/home02/scd.png"),
        "4": require("@/assets/images/home/home02/scd.png"),
        "5": require("@/assets/images/home/home02/scd.png"),
        "6": require("@/assets/images/home/home02/scd.png"),
        "7": require("@/assets/images/home/home02/scd.png"),
        "8": require("@/assets/images/home/home02/scd.png"),
        "9": require("@/assets/images/home/home02/scd.png"),
        "10": require("@/assets/images/home/home02/scd.png"),
        "11": require("@/assets/images/home/home02/scd.png"),
        "12": require("@/assets/images/home/home02/scd.png"),
        "13": require("@/assets/images/home/home02/scd.png"),
        "14": require("@/assets/images/home/home02/scd.png"),
        "15": require("@/assets/images/home/home02/scd.png"),
        "16": require("@/assets/images/home/home02/scd.png"),
        "17": require("@/assets/images/home/home02/scd.png"),
        "18": require("@/assets/images/home/home02/scd.png"),
        "19": require("@/assets/images/home/home02/scd.png"),
      },
      //动态标签
      // menuTabs:[{ "path": "/plantGuard/page1", "name": "设备列表", "par": "数据监测", "order": 0 } ],
      menuTabs:[],
      menuTabsValue:'',
      username:"",
      // 用户信息
      loginInfo:{},
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    '$route' (to, from) {
      let flag = false
      for (let item of this.menuTabs) {
        if (item.name === to.meta.navname) {
          this.menuTabsValue = to.meta.navname
          flag = true
          break
        }
      }

      if (!flag) {
        console.log(to)
        this.add_tabs({path: to.path, name: to.meta.navname,par:to.meta.title,order:to.meta.order})
        this.menuTabsValue = to.meta.navname
      }

      sessionStorage.setItem("menuTabs", JSON.stringify(this.menuTabs));
      sessionStorage.setItem("menuTabsValue", this.menuTabsValue);
      
    }
  },
  //vue自定义指令
  directives: {
    trigger: {
      inserted(el, binging) {
        var menuTabsValue = sessionStorage.getItem("menuTabsValue");
        var menuTabs = sessionStorage.getItem("menuTabs");
        if(menuTabs){
          binging.value.that.menuTabs = JSON.parse(menuTabs)
          binging.value.that.menuTabsValue = menuTabsValue
        }else{
          el.id == "nav0" ? el.click() : null; // 只点击第一个，id是在循环中手动添加的
        }
      },
    },
  },
  //方法集合
  methods: {
    topMenuClick(item, index) {
      this.currTopMenuId = item.name;
      this.leftMenuList = item.children;
      this.currLeftMenuId = item.children[0].name;
      this.$router.push({ path: '/plantGuard'+item.children[0].path });
    },
    leftMenuClick(item, index) {
      this.currLeftMenuId = item.name;
      console.log('234')
      console.log(item)
      this.$router.push({ path: '/plantGuard'+item.path });
    },
    //添加tab标签
    add_tabs (data) {
      this.menuTabs.push(data)
      console.log(data);
    },
    //移除tab标签
    removeTab(targetName) {
        let tabs = this.menuTabs;
        let activeName = this.menuTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
                this.$router.push({ path: nextTab.path });
                this.leftMenuList = this.menuList[nextTab.order].children;
                this.currTopMenuId=nextTab.par;
                this.currLeftMenuId=nextTab.name;
              }
            }
          });
        }
        
        this.menuTabsValue = activeName;
        this.menuTabs = tabs.filter(tab => tab.name !== targetName);
    },
    //切换标签
    clickTab(tab) {
      console.log('tab')
      console.log(tab)
      this.$router.push({path: this.menuTabs[tab.index].path})
      this.leftMenuList = this.menuList[this.menuTabs[tab.index].order].children;
      this.menuTabsValue = this.menuTabs[tab.index].name
      this.currTopMenuId=this.menuTabs[tab.index].par;
      this.currLeftMenuId=this.menuTabs[tab.index].name;
      // sessionStorage.setItem("menuTabsValue", this.menuTabsValue);
    
    },
    // 获取用户主题
    getUserInfo() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=home.homes.user_theme",
      }).then((res) => {
        if (res.data.message == "") {
          this.loginInfo = res.data.data[0];
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    // 获取用户菜单列表
    getNavList() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=user.login.user_login_info",
      }).then((res) => {
        if (res.data.message == "") {
          var menuLists=[
            {
                  "name": "数据监测",
                  "id": "1",
                  "children": [
                     {
                     "name": "设备列表",
                     "path": "/page1",
                     "id": "2"
                     },
                     {
                     "name": "项目列表",
                     "path": "/baseAll",
                     "id": "19"
                     },
                  ]
               },
               {
                  "name": "可视农业",
                  "id": "3",
                  "children": [
                     {
                     "name": "可视化系统",
                     "path": "/monitor",
                     "id": "4"
                     }
                  ]
               },
               {
                  "name": "智能灌溉",
                  "id": "5",
                  "children": [
                     {
                     "name": "系统管理",
                     "path": "/page3",
                     "id": "6"
                     }
                  ]
               },
               {
                  "name": "水价管理",
                  "id": "7",
                  "children": [
                     {
                     "name": "地图展示",
                     "path": "/page9",
                     "id": "20"
                    },
                    {
                     "name": "水井信息",
                     "path": "/page10",
                     "id": "21"
                    },
                    {
                     "name": "用户信息",
                     "path": "/page11",
                     "id": "22"
                    },
                  ]
               },
               {
                  "name": "农业地理信息",
                  "id": "9",
                  "children": [
                     {
                     "name": "设备列表",
                     "path": "/page1",
                     "id": "10"
                    }
                  ]
               },
               {
                  "name": "农产品追溯",
                  "id": "11",
                  "children": [
                     {
                     "name": "设备列表",
                     "path": "/page1",
                     "id": "12"
                    }
                  ]
               },
               {
                  "name": "系统管理",
                  "id": "13",
                  "children": [
                     {
                     "name": "用户管理",
                     "path": "/page4",
                     "id": "14"
                     },
                     {
                     "name": "角色管理",
                     "path": "/page6",
                     "id": "15"
                     },
                     {
                     "name": "主题定制",
                     "path": "/page7",
                     "id": "16"
                     },
                  ]
               },
               {
                  "name": "设备管理",
                  "id": "17",
                  "children": [
                     {
                     "name": "设备列表",
                     "path": "/page8",
                     "id": "18"
                     }
                  ]
               }
          ];
          
          let userType = res.data.data.myuser_type; //用户类型
          let userName = res.data.data.username; //用户名
          let myuid = res.data.data.myuid; //用户id
          
          sessionStorage.setItem("myuser_type", userType);
          sessionStorage.setItem("myuid", myuid);

          if(menuLists[0].name=='数据监测'){
            if(userType == 4){
              menuLists[0].children= [
                {
                  "name": "设备列表",
                  "path": "/page1",
                  "id": "2"
                }
              ]
            }else{
              menuLists[0].children= [
                {
                  "name": "项目列表",
                  "path": "/baseAll",
                  "id": "19"
                },
              ]
            }
          }
          this.menuList = menuLists;
        }
      });
    },
    beforeunloadHandler (e) {
      //  alert(1)
       console.log(e);
       
      // e = e || window.event
      // if (e) {
      //   e.returnValue = '关闭提示'
      // }
      // return '关闭提示'
    }

  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getNavList();
    this.getUserInfo();
    this.username = localStorage.getItem("cUsername");
    // window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {
    // window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
  }, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
@keyframes step {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    to {
        -webkit-transform: translate3d(-3330px, 0, 0);
        transform: translate3d(-3330px, 0, 0)
    }
}
.el-header {
  background-color: #182037;
  color: #eee;
  z-index: 3500;
  .headMenu {
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .logoinfo {
      img {
        vertical-align: top;
      }
      span {
        font-size: 24px;
        letter-spacing: 3px;
        margin-left: 10px;
      }
    }
    .topMenu {
      height: 80px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      li {
        cursor: pointer;
        // padding: 10px 0;
        // width: 100px;
        width: 111px;
        // text-align: center;
        margin: 0 10px;
        // line-height: 20px;

        height: 100%;
        // background: red;
        .navContent{
          position: relative;
          margin-top: 20px;
        }
        .blueMenu{
          position: absolute;
          width: 100%;
          height: 39px;
          overflow: hidden;
          // background: url(../../../static/images/indexTab.png);
          img{
            animation: step 5s steps(30) infinite;
          }
        }
        // .indexTabActive{
        //   display: none;
        // }
        .a2{
          // display: none;
          visibility:hidden
        }
        .navTxt{
          line-height: 39px;
          padding-left: 30px;
          font-size: 14px;
        }
      }
      .active {
        // background: #0195ff;
        .a1{
          // display: none;
          visibility:hidden
        }
        .a2{
          // display: block;
          visibility:visible
        }
      }
      li:hover {
        .a1{
          // display: none;
          visibility:hidden
        }
        .a2{
          // display: block;
          visibility:visible
        }
        // background: #003e66;
      }
    }
    .userInfo {
      font-size: 14px;
      .el-dropdown {
        color: #fff;
        cursor: pointer;
        margin-right: 10px;
      }
      .exit {
        display: inline-block;
        font-size: 24px;
        border-left: 1px solid #727272;
        padding-left: 15px;
        cursor: pointer;
      }
    }
  }
}

.el-aside {
  background-color: #182037;
  color: #eee;
  .leftMenu {
    text-align: center;
    li {
      padding: 10px 0;
      cursor: pointer;
      line-height: 22px;
    }
    li:hover {
      background: #000;
    }
    .active {
      background: #000;
    }
  }
}

.el-main {
  background-color: #fff;
  color: #333;
  padding: 0!important;
  .tabsNav{
    position: fixed;
    background: #fff;
    z-index: 3000;
    width: 100%;
  }
  .content{
    padding-top: 56px;
    height: calc(100vh - 136px);
    .innerMargin{
      padding: 0px 20px 20px;
    }
  }
}
/deep/.el-tabs__nav .el-tabs__item:nth-child(1) span{
      display: none;
  }




  /deep/.el-tabs__item.is-active,
  /deep/.el-tabs__item:hover{
    color: #0295ff;
  }
  /deep/.el-radio__input.is-checked .el-radio__inner{
    border-color: #0195ff;
    background: #0195ff;
  }
  /deep/.el-radio__input.is-checked + .el-radio__label {
    color: #0195ff;
  }
</style>