<template>
  <div class="section_root">
    <div class="section_header">
      <div class="module_list">
        <router-link tag="div" to="/school/home" class="module_item">
          <span>首页</span>
        </router-link>
        <div
          :class="[
            'module_item drop_down',
            appManageSelected ? 'selected' : ''
          ]"
        >
          <span class="module_title">应用管理</span>
          <Icon class="arrow_dropdown" type="md-arrow-dropdown" :size="20" />
          <div class="drop_down_list" v-if="routeDropdown">
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/school/applicationList"
              class="drop_down_list_item"
              >应用列表</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/school/greenBrowser"
              class="drop_down_list_item"
              >绿色浏览器访问网址</router-link
            >
          </div>
        </div>
        <router-link tag="div" to="/school/userManage" class="module_item">
          <span>用户管理</span>
        </router-link>
        <div
          :class="['module_item drop_down', strategySelected ? 'selected' : '']"
        >
          <span class="module_title">策略</span>
          <Icon class="arrow_dropdown" type="md-arrow-dropdown" :size="20" />
          <div class="drop_down_list" v-if="routeDropdown">
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/school/strategyManage"
              class="drop_down_list_item"
              >策略管理</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/school/strategyTemplate"
              class="drop_down_list_item"
              >策略模版</router-link
            >
          </div>
        </div>
        <router-link
          tag="div"
          to="/school/applicationStrategy"
          class="module_item"
        >
          <span>应用策略</span>
        </router-link>
        <div
          :class="[
            'module_item drop_down',
            deviceManageSelected ? 'selected' : ''
          ]"
        >
          <span class="module_title">设备管理</span>
          <Icon class="arrow_dropdown" type="md-arrow-dropdown" :size="20" />
          <div class="drop_down_list" v-if="routeDropdown">
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/school/deviceManage"
              class="drop_down_list_item"
              >设备管理</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/school/breakRuleDevice"
              class="drop_down_list_item"
              >违规设备</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/school/outControlDevice"
              class="drop_down_list_item"
              >疑似脱管设备</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/school/removeControlDevice"
              class="drop_down_list_item"
              >解除管控设备</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/school/parentControlDevice"
              class="drop_down_list_item"
              >家长管控设备</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/school/inLineDevice"
              class="drop_down_list_item"
              >在线设备</router-link
            >
          </div>
        </div>
        <div
          :class="[
            'module_item drop_down',
            networkManageSelected ? 'selected' : ''
          ]"
        >
          <span class="module_title">网络管理</span>
          <Icon class="arrow_dropdown" type="md-arrow-dropdown" :size="20" />
          <div class="drop_down_list" v-if="routeDropdown">
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/school/whitelistLibrary"
              class="drop_down_list_item"
              >白名单库</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/school/whitelist"
              class="drop_down_list_item"
              >网址白名单</router-link
            >
          </div>
        </div>
        <div
          :class="['module_item drop_down', settingSelected ? 'selected' : '']"
        >
          <span class="module_title">设置</span>
          <Icon class="arrow_dropdown" type="md-arrow-dropdown" :size="20" />
          <div class="drop_down_list" v-if="routeDropdown">
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/school/wallpaper"
              class="drop_down_list_item"
              >壁纸</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/school/logo"
              class="drop_down_list_item"
              >LOGO</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/school/deviceSetting"
              class="drop_down_list_item"
              >设备设置</router-link
            >
          </div>
        </div>
        <div :class="['module_item drop_down', logSelected ? 'selected' : '']">
          <span class="module_title">日志</span>
          <Icon class="arrow_dropdown" type="md-arrow-dropdown" :size="20" />
          <div class="drop_down_list" v-if="routeDropdown">
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/school/admin"
              class="drop_down_list_item"
              >管理员日志</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/school/devicePush"
              class="drop_down_list_item"
              >设备推送日志</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/school/deviceLocation"
              class="drop_down_list_item"
              >设备位置日志</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/school/deviceEvents"
              class="drop_down_list_item"
              >设备事件日志</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/school/violatingDevice"
              class="drop_down_list_item"
              >违规设备日志</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/school/applicationDownload"
              class="drop_down_list_item"
              >应用下载日志</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/school/appLaunch"
              class="drop_down_list_item"
              >应用启动日志</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/school/deviceInstallation"
              class="drop_down_list_item"
              >设备已安装应用</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/school/deviceExport"
              class="drop_down_list_item"
              >设备导出</router-link
            >
          </div>
        </div>
        <router-link tag="div" to="/school/notice" class="module_item">
          <span>公告</span>
        </router-link>
      </div>
      <div class="out_region" @click="exitToPreviousLevel()">退出学校</div>
    </div>
    <div class="section_main">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      routeDropdown: true
    };
  },
  computed: {
    // 应用管理路由选中
    appManageSelected() {
      return (
        this.$route.path.includes("/school/applicationList") ||
        this.$route.path.includes("/school/greenBrowser")
      );
    },
    // 策略路由选中
    strategySelected() {
      return (
        this.$route.path.includes("/school/strategyManage") ||
        this.$route.path.includes("/school/strategyTemplate")
      );
    },
    // 设备管理路由选中
    deviceManageSelected() {
      return (
        this.$route.path.includes("/school/deviceManage") ||
        this.$route.path.includes("/school/breakRuleDevice") ||
        this.$route.path.includes("/school/outControlDevice") ||
        this.$route.path.includes("/school/removeControlDevice") ||
        this.$route.path.includes("/school/parentControlDevice") ||
        this.$route.path.includes("/school/inLineDevice")
      );
    },
    // 网络管理路由选中
    networkManageSelected() {
      return (
        this.$route.path.includes("/school/whitelistLibrary") ||
        this.$route.path.includes("/school/whitelist")
      );
    },
    // 设置路由选中
    settingSelected() {
      return (
        this.$route.path.includes("/school/wallpaper") ||
        this.$route.path.includes("/school/logo") ||
        this.$route.path.includes("/school/deviceSetting")
      );
    },
    // 日志路由选中
    logSelected() {
      return (
        this.$route.path.includes("/school/admin") ||
        this.$route.path.includes("/school/devicePush") ||
        this.$route.path.includes("/school/deviceLocation") ||
        this.$route.path.includes("/school/deviceEvents") ||
        this.$route.path.includes("/school/violatingDevice") ||
        this.$route.path.includes("/school/applicationDownload") ||
        this.$route.path.includes("/school/appLaunch") ||
        this.$route.path.includes("/school/deviceInstallation") ||
        this.$route.path.includes("/school/deviceExport")
      );
    }
  },
  methods: {
    // 选中菜单后隐藏下拉
    routeDropdownChange() {
      this.routeDropdown = false;
      setTimeout(() => {
        this.routeDropdown = true;
      }, 500);
    },
    // 退出到上一级
    exitToPreviousLevel() {
      this.$router.push("/region/home");
    }
  }
};
</script>

<style lang="less" scoped>
.section_root {
  width: 100%;
  height: 100%;
  overflow: auto;
  .section_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 16px;
    padding: 13px 20px;
    border: 1px solid #e9f0f9;
    border-radius: 15px;
    background-color: #fff;
    .module_list {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .module_item {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 16px;
        padding: 6px 10px;
        font-size: 16px;
        line-height: 20px;
        cursor: pointer;
        &.drop_down {
          position: relative;
          cursor: default;
          .drop_down_list {
            display: none;
            position: absolute;
            top: 32px;
            left: 0;
            padding: 10px 0;
            min-width: 100px;
            color: #253a70;
            font-size: 14px;
            font-weight: normal;
            border-radius: 4px;
            background: #ffffff;
            box-shadow: 0 8px 30px 0 #bcc9e380;
            z-index: 999;
            .drop_down_list_item {
              margin: 0 6px;
              padding: 0 10px;
              white-space: nowrap;
              line-height: 35px;
              border-radius: 4px;
              color: #798cb5;
              cursor: pointer;
              &.router-link-active,
              &:hover {
                color: #339dff;
                background-color: #f3f4fc;
              }
            }
          }
          &:hover {
            .drop_down_list {
              display: block;
            }
          }
        }
        &.router-link-active,
        &.selected {
          background-color: #339dff;
          color: #fff;
          border-radius: 8px;
        }
        &:hover {
          .arrow_dropdown {
            transform: rotate(180deg);
          }
        }
        .arrow_dropdown {
          transition: all 0.2s ease-in-out;
        }
        .module_title {
          margin-right: 4px;
          line-height: 20px;
        }
      }
    }
    .out_region {
      line-height: 32px;
      font-size: 16px;
      cursor: pointer;
    }
  }
  .section_main {
    position: relative;
    width: 100%;
    height: calc(100% - 80px);
    overflow: auto;
  }
}
</style>
