<template>
  <div class="aside">
    <div class="noLogin" v-show="!now_userState">登录后获取目录</div>
    <div class="logged_content has-system" v-show="now_userState">
      <el-menu class="first_menu">
        <el-submenu v-for="(item, index) in list" :key="index" :index="index + ''" :class="'index' + index + ''">
          <template slot="title">
            <span>{{ item.name }}</span>
          </template>
          <div class="second_menu">
            <el-menu-item v-for="(item_1, index_1) in item.models" :key="index + '-' + index_1"
              :index="index + '-' + index_1" @click="jumpMetadataList(item, index, item_1, index_1)"
              :title="item_1.title">{{ item_1.title }}</el-menu-item>
          </div>
        </el-submenu>
      </el-menu>
    </div>
    <div class="authorityManagement" @click="jumpAuthor" v-if="userRole == 0 && now_userState">权限管理</div>
    <div class="classificationSettings" @click="jumpClassification" v-if="userRole == 0 && now_userState">图层管理</div>
  </div>
</template>

<script>
import api from "@/api/model";

export default {
  props: {
    jump: {
      type: Function,
    }
  },
  data() {
    return {
      list: null,
      userRole: 0,
      geometryType: {
        Point: 0,
        Polyline: 1,
        Polygon: 2,
      },
    };
  },
  methods: {
    // 获取列表
    getMenu() {
      let that = this;
      api
        .getMenu()
        .then(function (result) {
          if (result.code == 200) {
            // that.list = result.content;
            that.$store.commit("setMenuDataList", result.content);
          } else {
            // 提示获取失败
            checkRequestCode(result)
          }
        })
        .catch((err) => {
          // 提示获取失败
          that.$message({
            type: "error",
            message: err
          })
        });
    },
    jumpMetadataList(parentItem, parentIndex, item, index) {
      this.jump(1, {
        modelId: item.id,
        type: this.geometryType[item.geometryType],
      })
    },
    jumpClassification() {
      let that = this;
      if (!this.now_userState) {
        this.$message({
          message: "请登录后进行操作",
          type: "warning",
        });
        return;
      }
      this.jump(2)
    },
    jumpAuthor() {
      let that = this;
      if (!this.now_userState) {
        this.$message({
          message: "请登录后进行操作",
          type: "warning",
        });
        return;
      }
      this.jump(3)
    },
  },
  computed: {
    now_userState() {
      return this.$store.state.userState;
    },
    menuData() {
      return this.$store.state.menuDataList;
    },
  },
  watch: {
    // now_userState: {
    //   immediate: true,
    //   handler: function (newVal, oldVal) {
    //     if (newVal) {
    //       // 获取列表数据
    //       this.getMenu();
    //     } else {
    //       // 列表数据清空
    //       this.list = null;
    //     }
    //   },
    // },
    now_userState(newVal, oldVal) {
      if (newVal) {
        // 获取列表数据
        this.getMenu();
      } else {
        // 列表数据清空
        this.list = null;
      }
    },
    menuData(newVal, oldVal) {
      this.list = newVal;
    },
  },
};
</script>

<style lang='less' scoped>
.aside {
  width: @aside_width;
  height: 100%;
  position: relative;
  background: #001e3b;
  // border-top-right-radius: 4px;
  color: #ffffff;

  .noLogin {
    width: 100%;
    height: @menu_item_height;
    line-height: 60px;
    font-size: @menu_item_fontSize;
    text-align: center;
    cursor: pointer;
  }

  .logged_content {
    overflow: hidden;
    overflow-y: auto;

    &.has-system {
      height: calc(100% - 120px);
    }

    &.no-system {
      height: calc(100% - 1px);
    }

    .breadcrumb {
      height: @menu_item_height;
      text-align: center;
      padding: 0 12px;
      border-bottom: 1px solid #1f3953;

      .el-breadcrumb__item {
        display: inline-block;
        height: 100%;
        line-height: @menu_item_height;

        /deep/ .el-breadcrumb__inner {
          display: inline-block;
          max-width: 60px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        /deep/ .el-breadcrumb__inner span {
          cursor: pointer;
          color: #ffffff;
        }

        /deep/ .el-breadcrumb__inner span:hover {
          text-decoration: underline;
        }

        /deep/ .el-breadcrumb__separator {
          vertical-align: top;
          margin-top: 24px;
          color: #ffffff !important;
        }

        /deep/ i {
          vertical-align: top;
          margin-top: 24px;
          color: #ffffff !important;
        }
      }
    }
  }

  .first_menu {
    width: 100% !important;
  }

  .first_menu,
  .second_menu {
    background: transparent;

    /deep/ .el-submenu__title {
      font-size: 16px;
      font-weight: bold;
      color: #ffffff;
      border-bottom: 1px solid #1f3953;
      text-align: left;
      text-indent: 40px;
      line-height: 51px;

      i {
        color: #ffffff;
      }

      .el-submenu__icon-arrow {
        text-indent: 0px;
      }
    }

    .el-submenu {
      text-align: center;
      line-height: 60px;
      margin: 10px 10px;
      margin-left: 0px;

      // background-color: #084a8eff;
      &:first-child {
        border-top-right-radius: 4px;
      }
    }

    .el-submenu /deep/ .el-menu {
      background: transparent;
    }

    /deep/ .el-menu-item {
      font-size: 16px;
      padding-left: 40px !important;
      padding-right: 20px !important;
      color: #ffffff;
      background: transparent;
      border-bottom: 1px solid #1f3953;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /deep/ .el-menu-item:hover {
      background: #3ba1ff;
    }
  }

  .second_menu {
    /deep/ i {
      float: right;
      font-size: 12px;
      color: #ffffff;
      position: absolute;
      top: 50%;
      right: 20px;
      margin-top: -7px;
    }
  }

  .index0 /deep/.el-submenu__title {
    background: url(../assets/img/menu/1.png) no-repeat 20px center;
  }

  .index1 /deep/.el-submenu__title {
    background: url(../assets/img/menu/2.png) no-repeat 20px center;
  }

  .index2 /deep/.el-submenu__title {
    background: url(../assets/img/menu/3.png) no-repeat 20px center;
  }

  .index3 /deep/.el-submenu__title {
    background: url(../assets/img/menu/4.png) no-repeat 20px center;
  }

  .index4 /deep/.el-submenu__title {
    background: url(../assets/img/menu/5.png) no-repeat 20px center;
  }

  .classificationSettings {
    position: absolute;
    bottom: 0;
    width: calc(100% - 20px);
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    background: url(../assets/img/menu/6.png) no-repeat 20px center;
    background-color: #084a8eff;
    padding-left: 20px;
    text-indent: 35px;
    color: #ffffff;

    &:hover {
      background-color: #697c8e;
    }
  }

  .authorityManagement {
    position: absolute;
    bottom: 60px;
    width: calc(100% - 20px);
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    background: url(../assets/img/menu/6.png) no-repeat 20px center;
    background-color: #084a8eff;
    padding-left: 20px;
    text-indent: 35px;
    color: #ffffff;

    &:hover {
      background-color: #697c8e;
    }
  }
}
</style>