<template>
  <div class="section_root">
    <div class="section_header">
      <div class="module_list">
        <router-link tag="div" to="/platform/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="/platform/regionManage"
              class="drop_down_list_item"
              >区域管理</router-link
            >
            <router-link
              @click.native="routeDropdownChange()"
              tag="div"
              to="/platform/adminManage"
              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="/platform/whitelistLibrary"
              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="/platform/deviceExport"
              class="drop_down_list_item"
              >设备导出</router-link
            >
          </div>
        </div>
        <router-link tag="div" to="/platform/notice" class="module_item">
          <span>公告</span>
        </router-link>
      </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("/platform/regionManage") ||
        this.$route.path.includes("/platform/adminManage")
      );
    },
    // 网络管理路由选中
    networkManageSelected() {
      return this.$route.path.includes("/platform/whitelistLibrary");
    },
    // 日志路由选中
    logSelected() {
      return this.$route.path.includes("/platform/deviceExport");
    }
  },
  methods: {
    routeDropdownChange() {
      this.routeDropdown = false;
      setTimeout(() => {
        this.routeDropdown = true;
      }, 500);
    }
  }
};
</script>

<style lang="less" scoped>
.section_root {
  width: 100%;
  height: 100%;
  overflow: auto;
  .section_header {
    display: flex;
    justify-content: flex-start;
    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;
        }
      }
    }
  }
  .section_main {
    position: relative;
    width: 100%;
    height: calc(100% - 80px);
    overflow: auto;
  }
}
</style>
