<template>
  <div id="admin">
    <header class="header">
      <div class="header-left">
        <div class="logo-bar">
          <img src="@/assets/logo-3.png" class="logo">
        </div>
      </div>
      <div class="header-right">
        <!-- <user-bar /> -->
      </div>
    </header>
    <!-- 菜单 -->
    <section class="wrapper">
      <el-container>
        <el-container>
          <!-- <el-header></el-header> -->
          <el-main class="admin-main-box">
            <router-view></router-view>
          </el-main>
          <el-footer style="height:44px" v-if="aside">
            <Footer ></Footer>
          </el-footer>
        </el-container>
      </el-container>
    </section>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
// import UserBar from "./components/UserBar";
import { webSocket } from "./mixins";
import Footer from "../components/footer/footer.vue";
export default {
  components: {
    // UserBar,
    Footer
  },
  mixins: [webSocket],
  data() {
    return {
      isCollapse: true,
      activeMenu: this.$route.meta.active
    }
  },
  watch: {
    // $route(to) {
    //   this.activeMenu = to.meta.active
    // }
  },
  computed: {
    ...mapGetters(['webSocket'])
  },
  created() {
    // this.getPermissionList()
  },
  async mounted() {
  //   this.$store.commit('SET_PREFIX', '/admin')
  //  await this.getUserinfo()

    // this.getSelect()
  },
  methods: {
    changePermission() {
      this.webSocket.onmessage = (e) => {
        if (JSON.parse(e.data).code == '903') {
          this.getPermissionList()
        }
      }
    },
    getPermissionList() {
      var code = "6a8d3f4d1d5f11eda41c00163e2f0200;5051395c24e311eda41c00163e2f0200;2ca26abd37e211eda41c00163e2f0200"
      this.$api.getPermissionList({ code: code }).then(response => {
        // localStorage.permission =JSON.stringify(JSON.parse(response.data).data) 
        this.$store.commit('SET_ADMIN_PERMISSION', response.data)
        // console.log(response.data)
      }).catch(error => {
        this.$store.commit('SET_ADMIN_PERMISSION', [])
      })
    },
    getSelect() {
      this.$api.getDict().then(response => {
        this.$store.commit('SET_ADMIN_DICTIONARIES', response.data)
        localStorage.TENANT_TYPE = JSON.stringify(response.data.TENANT_TYPE)
      })
    },
    handleSelect(index, path) {
      this.$router.push({
        path: '/admin/' + index
      })
    },
   async getUserinfo() {
     await this.$api.getUserInfo().then(response => {
        // console.log(response)
        localStorage.tenant = response.data.tenantId
        this.$store.commit('SET_ADMIN_USERINFO', response.data)
        this.connectWebSocket( response.data.id)
      })
    },
  }
}
</script>
<style lang="scss">
.tenant .el-input__inner {
  height: 32px;
  line-height: 32px;
}

.role .el-icon-close {
  display: none;
}

.el-table .el-button-group .el-button--primary:first-child {
  padding: 0;

  p {
    margin: 0;
    width: 50px;
    line-height: 30px;
    height: 30px;
  }
}
</style>
<style lang="scss">
#admin {
  width: 100%;
  height: 100%;

  .header {
    height: 60px;
    background: #fff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
    border-bottom: 1px solid #d8dce5;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;

    .logo-bar {
      font-size: 20px;
      font-weight: bold;
      display: flex;
      align-items: center;

      .logo {
        margin-right: 10px;
        width: 135px;
        height: 35px;
      }
    }
  }

  .header-left {
    display: flex;
    align-items: center;
    padding-left: 20px;
  }

  .header-right {
    display: flex;
    align-items: center;
  }

  .wrapper {
    width: 100%;
    height: calc(100% - 71px);

    .el-menu-item.is-active {
      background: #ecf5ff !important;
      color: #409EFF !important;
    }

    .admin-main-box {
      background: #fff !important;
      padding: 10px 10px 45px 10px !important;
    }
  }
}
</style>
