<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
  import menu from "./util/menuList";

  export default {
    name: "App",
    data() {
      return {};
    },
    mounted() {
      // 权限验证 动态路由
      if (window.location.href.indexOf("login") < 0) {
        let permission = this.$store.state.progressList;
        // console.log(this.$store.state);
        let menuList = [];
        this.$router.options.routes[0].children = [];
        let routerUserDetail = {
          path: "/userDetail/:id",
          name: "userDetail",
          component: e => require(["@/components/userDetail"], e)
        };
        let routerTeacherDetail = {
          path: "/teacher/:id",
          name: "teacherDetail",
          component: e => require(["@/components/teacherDetail"], e)
        };
        menu.forEach(i => {
          let p = false;
          let t = [];
          i.list.forEach(j => {
            let find = permission.find(x => {
              return x.cover === j.cover;
            });
            if (find) {
              j.router.meta = {};
              j.router.meta.readonly = !!find.readonly;
              j.router.meta.delete = !!find.delete;
              j.router.meta.export = !!find.export;
              j.router.meta.refund = !!find.refund;
              j.router.meta.distribution = !!find.distribution;
              j.router.meta.classManage = !!find.classManage;
              j.router.meta.editWatch = !!find.editWatch;
              j.router.meta.classManageUnlimited = !!find.classManageUnlimited;
              j.router.meta.classTakeUnlimited = !!find.classTakeUnlimited;
              j.router.meta.exportFinish = !!find.exportFinish;
              j.router.meta.promoter = !!find.promoter;
              j.router.meta.import = !!find.import;
              t.push(j);
              if (find.cover === "3-1") {
                routerTeacherDetail.meta = {};
                routerTeacherDetail.meta.readonly = find.readonly;
                routerTeacherDetail.meta.delete = !!find.delete;
                this.$router.options.routes[0].children.push(routerTeacherDetail);
              }
              if (find.cover === "3-2") {
                routerUserDetail.meta = {};
                routerUserDetail.meta.readonly = find.readonly;
                routerUserDetail.meta.delete = !!find.delete;
                this.$router.options.routes[0].children.push(routerUserDetail);
              }
              this.$router.options.routes[0].children.push(j.router);
              p = true;
            }
          });
          if (p) {
            i.list = t;
            menuList.push(i);
          }
        });
        this.$router.addRoutes([this.$router.options.routes[0]]); //调用add;
        this.$store.dispatch("setMenu", menuList);
      }
    }
  };
</script>

<style lang="less">
  #app {
    height: 100%;
  }

  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }

  ol, ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .el-collapse-item__arrow {
    margin-left: 0;
  }

  .fl {
    float: left;
  }

  .fr {
    float: right;
  }

  .clearfix {
    *zoom: 1;
  }

  .clearfix:after {
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
  }

  .page-div {
    padding-top: 20px;
  }

  .cell-link {
    /*color: #409EFF;*/
    text-decoration: underline;
    cursor: pointer;
    user-select: none;
  }

  .el-table {
    /*padding: 0 20px;*/
  }

  @gutterSize: 10px;

  .admin-refresh {
    .section-search {
      margin-bottom: 10px;
      padding: @gutterSize @gutterSize 0 @gutterSize;
      background-color: #fff;
      border-bottom: solid 1px #ebeef5;

      &.search-single {
        font-size: 0; // 去掉空隙
        /*.el-form-item__content {
          font-size: 0; // 去掉空隙
        }*/

        .el-form-item {
          margin-bottom: 0;
        }
      }

      .el-form {
        font-size: 0;
      }

      .el-form--inline, &.el-form--inline {
        .el-form-item {
          margin-right: @gutterSize;
          margin-bottom: @gutterSize;

          & + .el-form-item {
            //margin-left: @gutterSize;
          }
        }
      }

      .search-btn-wrapper {
        display: flex;
      }
    }

    .page-div {
      padding: 0;
    }

    .el-pagination {
      padding: @gutterSize 0;
      background-color: #fff;
      border-bottom: solid 1px #ebeef5;
    }
  }

  // cascader 支持多行
  .refresh-cascader-multi {
    &.width-480 .el-cascader-menu {
      max-width: 480px;
    }

    &.width-520 .el-cascader-menu {
      max-width: 520px;
    }

    &.width-560 .el-cascader-menu {
      max-width: 560px;
    }

    .el-cascader-menu {
      .el-cascader-menu__wrap {
        height: 360px;

        ul {
          li {
            padding: 5px 20px 5px 20px;
            height: auto;
            line-height: 24px;

            .el-cascader-node__label {
              white-space: normal;
            }
          }
        }
      }
    }
  }

  // select 支持多行
  .refresh-select-multi {
    &.width-320 {
      max-width: 320px;
    }

    &.width-360 {
      max-width: 360px;
    }

    &.width-400 {
      max-width: 400px;
    }

    &.width-480 {
      max-width: 480px;
    }

    &.width-520 {
      max-width: 520px;
    }

    &.width-560 {
      max-width: 560px;
    }

    .el-select-dropdown__wrap {
      max-height: 360px;

      ul {
        li {
          padding: 5px 20px 5px 20px;
          height: auto;
          line-height: 24px;

          span {
            white-space: normal;
          }
        }
      }
    }
  }

  .el-dialog {
    .el-form {
      .el-form-item:last-child {
        margin-bottom: 0;
      }
    }
  }

  .el-table {
    .f-c > div {
      display: flex !important;
      flex-flow: row;
      justify-content: flex-start;
      align-items: center;
    }

    .avatar {
      width: 50px;
      margin-right: 8px;
      border-radius: 50%;
      height: 50px;
    }

    .table-refresh-header {
      display: inline-block;
      cursor: help;
      i {
        color: #409eff;
      }
    }

    .cell-link {
      display: inline-block;
      margin: 0 -6px;
      padding: 0px 8px;
      border-radius: 3px;
      text-decoration: underline;
      transition: color 240ms, background-color 240ms;
      color: #444;
      & + .cell-link {
        margin-left: 0;
      }
      a {
        color: #444;
        transition: color 240ms, background-color 240ms;
      }
      &:hover {
        background-color: #cce4ff;
        color: #007fff;
        a {
          color: #007fff;
        }
      }
    }
  }

  .update-time {
    margin-top: -12px;
    padding-bottom: 8px;
    padding-right: 12px;
    line-height: 20px;
    text-align: right;
    font-size: 14px;
    color: #606266;
  }

  .tabs-refresh {
    margin-top: 10px;
    &.el-tabs--card > .el-tabs__header {
      margin-bottom: 10px;
      /*margin-top: 10px;*/
      margin-left: 10px;
      /*padding-left: 10px;*/
      /* background-color: #fff; */
      /*padding-top: 10px;*/
      padding-bottom: 1px;
    }

    &.el-tabs--card > .el-tabs__header .el-tabs__nav {
      overflow: hidden;
    }

    &.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
      background-color: #fff;
    }
  }

  // 修复样式
  .el-tree-node__content {
    .el-checkbox {
      margin-right: 8px !important;
    }
  }

  .custom-table {
    margin-top: 20px;
    width: 100%;
    border: solid 1px #EBEEF5;
    border-spacing: 0;
    border-collapse: collapse;
    thead {
      color: #909399;
      font-weight: 500;
      th {
        padding: 12px 10px;
        border: 1px solid #EBEEF5;
      }
    }
    tbody {
      tr {
        transition: background-color 240ms;
        &:hover {
          background-color: #F5F7FA;
        }
        td {
          padding: 12px 10px;
          border: 1px solid #EBEEF5;
        }
      }
    }
  }
</style>
