<template>
  <div class="section_root">
    <div class="section_header">
      <div class="module_list">
        <router-link tag="div" to="/region/home" class="module_item">
          <span>首页</span>
        </router-link>
        <div
          :class="[
            'module_item drop_down',
            platformManageSelected ? '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="/region/regionManage"
              class="drop_down_list_item"
              >区域管理</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/region/schoolManage"
              class="drop_down_list_item"
              >学校管理</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/region/adminManage"
              class="drop_down_list_item"
              >管理员</router-link
            >
          </div>
        </div>
        <div
          :class="[
            'module_item drop_down',
            applicationManageSelected ? '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="/region/applicationGroup"
              class="drop_down_list_item"
              >应用分组</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/region/applicationManage"
              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="/region/whitelistLibrary"
              class="drop_down_list_item"
              >白名单库</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/region/whitelist"
              class="drop_down_list_item"
              >网址白名单</router-link
            >
          </div>
        </div>
        <div
          :class="[
            'module_item drop_down',
            setManageSelected ? '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="/region/settingWallpaper"
              class="drop_down_list_item"
              >壁纸</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/region/settingLogo"
              class="drop_down_list_item"
              >LOGO</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/region/settingDevice"
              class="drop_down_list_item"
              >设备设置</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/region/settingPowerUp"
              class="drop_down_list_item"
              >开机设置</router-link
            >
          </div>
        </div>
        <div
          :class="[
            'module_item drop_down',
            searchManageSelected ? '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="/region/searchAllUsers"
              class="drop_down_list_item"
              >搜索所有用户</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/region/searchDeviceUsers"
              class="drop_down_list_item"
              >搜索设备用户</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/region/searchDevice"
              class="drop_down_list_item"
              >搜索设备</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/region/searchAllApps"
              class="drop_down_list_item"
              >搜索所有应用</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/region/searchAllWhitelists"
              class="drop_down_list_item"
              >搜索所有白名单</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/region/searchDeviceModel"
              class="drop_down_list_item"
              >搜索设备型号</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/region/searchClientVersion"
              class="drop_down_list_item"
              >搜索客户端版本</router-link
            >
          </div>
        </div>
        <div
          :class="[
            'module_item drop_down',
            logManageSelected ? '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="/region/adminLog"
              class="drop_down_list_item"
              >管理员日志</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/region/devicePushLog"
              class="drop_down_list_item"
              >设备推送日志</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/region/deviceLocationLog"
              class="drop_down_list_item"
              >设备位置日志</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/region/deviceEventsLog"
              class="drop_down_list_item"
              >设备事件日志</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/region/violatingDeviceLog"
              class="drop_down_list_item"
              >违规设备日志</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/region/applicationDownloadLog"
              class="drop_down_list_item"
              >应用下载日志</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/region/appLaunchLog"
              class="drop_down_list_item"
              >应用启动日志</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/region/deviceInstallationLog"
              class="drop_down_list_item"
              >设备已安装应用</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/region/deviceExport"
              class="drop_down_list_item"
              >设备导出</router-link
            >
          </div>
        </div>
        <router-link tag="div" to="/region/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: {
    // 区域管理路由选中
    platformManageSelected() {
      return (
        this.$route.path.includes("/region/regionManage") ||
        this.$route.path.includes("/region/adminManage") ||
        this.$route.path.includes("/region/schoolManage")
      );
    },
    // 应用路由选中
    applicationManageSelected() {
      return (
        this.$route.path.includes("/region/applicationGroup") ||
        this.$route.path.includes("/region/applicationManage")
      );
    },
    // 网络管理路由选中
    networkManageSelected() {
      return (
        this.$route.path.includes("/region/whitelistLibrary") ||
        this.$route.path.includes("/region/whitelist")
      );
    },
    // 设置路由选中
    setManageSelected() {
      return (
        this.$route.path.includes("/region/settingWallpaper") ||
        this.$route.path.includes("/region/settingLogo") ||
        this.$route.path.includes("/region/settingDevice") ||
        this.$route.path.includes("/region/settingPowerUp")
      );
    },
    // 搜索路由选中
    searchManageSelected() {
      return (
        this.$route.path.includes("/region/searchAllUsers") ||
        this.$route.path.includes("/region/searchDeviceUsers") ||
        this.$route.path.includes("/region/searchDevice") ||
        this.$route.path.includes("/region/searchAllApps") ||
        this.$route.path.includes("/region/searchAllWhitelists") ||
        this.$route.path.includes("/region/searchDeviceModel") ||
        this.$route.path.includes("/region/searchClientVersion")
      );
    },
    // 日志路由选中
    logManageSelected() {
      return (
        this.$route.path.includes("/region/adminLog") ||
        this.$route.path.includes("/region/devicePushLog") ||
        this.$route.path.includes("/region/deviceLocationLog") ||
        this.$route.path.includes("/region/deviceEventsLog") ||
        this.$route.path.includes("/region/violatingDeviceLog") ||
        this.$route.path.includes("/region/applicationDownloadLog") ||
        this.$route.path.includes("/region/appLaunchLog") ||
        this.$route.path.includes("/region/deviceInstallationLog") ||
        this.$route.path.includes("/region/deviceExport")
      );
    }
  },
  methods: {
    // 选中菜单后隐藏下拉
    routeDropdownChange() {
      this.routeDropdown = false;
      setTimeout(() => {
        this.routeDropdown = true;
      }, 500);
    },
    // 退出到上一级
    exitToPreviousLevel() {
      this.$router.push("/platform/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>
