<template>
  <div id="admin">
    <header class="header">
      <div class="header-left">
        <div class="logo-bar">
          <img src="@/assets/logo-3.png" class="logo" @click="imgBtn">
        </div>
      </div>
      <div class="header-right">
        <user-bar />
      </div>
    </header>
    <!-- 菜单 -->
    <section class="wrapper">
      <el-container>
        <el-aside v-if="!aside" width="210px" style="overflow:hidden" class="patent-articles-menu">
          <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
  <el-radio-button :label="false">展开</el-radio-button>
  <el-radio-button :label="true">收起</el-radio-button>
</el-radio-group> -->
          <el-menu class="theme-dark" :default-active="activeMenu" @select="handleSelect">

            <el-menu-item index="rManage" >
              <i class="el-icon-film"></i>
              <span slot="title">报告管理</span>
            </el-menu-item>
            <el-submenu index=''>
              <!-- 一级菜单 -->
              <template slot="title">
                <i class="el-icon-s-order"></i>
                <span>任务管理</span>
              </template>
              <!-- 二级菜单 -->
                <el-menu-item v-for="(item,index) in menuList" :index="item.path" :key="index">
                  <!-- <i class="el-icon-film"></i> -->
                  <span >{{item.title}}</span>
                </el-menu-item>
            </el-submenu>

          </el-menu>
        </el-aside>
        <el-container>
          <el-header></el-header>
          <el-main class="admin-main-box">
            <router-view style=""></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: {
    Footer,
    UserBar,
  },
  mixins: [webSocket],
  data() {
    return {
      isCollapse: true,
      activeMenu: this.$route.meta.active,
      aside:false,
      menuList: [
          { title: '我发起的', path:"task/MyInitiate"}, 
          { title: '我处理的', path:"task/MyHandle"}, 
      ],
    }
  },
  watch: {
    $route(to) {
      this.aside = this.$route.meta.aside || false
      this.activeMenu = to.meta.active
    }
  },
  computed: {
     ...mapGetters(['webSocket','userinfo'])
  },
  async created(){
    this.getPermissionList()
    await this.getUserinfo()
  },
  async mounted() {
    this.aside = this.$route.meta.aside || false
    this.$store.commit('SET_PATENT_CONTRAST', [])
    this.$store.commit('SET_PREFIX', '/admin')
    // await this.getUserinfo()
    this.DictMessage()
    // this.getSelect()
  },
  methods: {
  changePermission(){
      this.webSocket.onmessage = (e) => {
            if(JSON.parse(e.data).code=='903' ){
              this.getPermissionList()
            }
          }
  },
  getPermissionList(){
    var code = "6a8d3f4d1d5f11eda41c00163e2f0200;5051395c24e311eda41c00163e2f0200;2ca26abd37e211eda41c00163e2f0200"
    // console.log(code)
   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) {
      console.log(index, path);
      this.$router.push({
        path: '/admin/' + index
      })
    },
   async getUserinfo() {
      const response = await this.$api.getUserInfo()
      this.$store.commit('SET_ADMIN_USERINFO', response.data)
      this.connectWebSocket(response.data.id)
    // 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)
    //   })
    },
    DictMessage() {//获取字典项
      this.$api.DictMessage().then(response => {
        console.log("response", response);
        this.$store.commit("SET_DictMessage",response.data)
      })
    },
    imgBtn() {
      this.$router.push({
        path: "/admin/rManage",
      })
    },
  }
}
</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);
    // height: 100%;

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

    .admin-main-box {
      // height: calc(100% - 50px);
      background: #fff !important;
      padding: 10px !important;
    }
  }
}
</style>
