<template>
  <div id="work-platform">
    <el-container>
      <el-header> 
         <div class="header">
          <div class="header-left">
            <div class="logo-bar" @click="handleClick">
              <img src="@/assets/logo-3.png" class="logo">
            </div>
            <div v-if="showProjectName" style="margin-left:30px;color:black">
              <p><span>专题库名称：</span>{{ projectName }}</p>
            </div>
          </div>
          <div class="header-right">
            <user-bar/>
          </div>
        </div>
      </el-header>
      <el-main style="padding:0;padding-top:15px;overflow:auto;background:white">
        <!-- <el-header style="height:30px;color:brown;">
            <marquee behavior="scroll" direction="left" scrollamount="5" scrolldelay="100" hspace="10" vspace="10" align="middle" face="" color="white" size="">{{ text }}</marquee>
          </el-header> -->
        <section class="wrapper">
          <!-- <keep-alive>
            <router-view id="view" v-if="$route.meta.keepAlive"></router-view>
          </keep-alive> -->
          <router-view id="view" v-if="!$route.meta.keepAlive"></router-view>
        </section>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import UserBar from "./components/UserBar";
import { webSocket } from "./mixins";
export default {
  components: {
    UserBar,
  },
  mixins: [webSocket],
  data() {
    return {
      showProjectName:false,
      projectName:'',
      id: this.$route.query.id,
      key: this.$route.query.key,
      button: [],
      show: false,
      btnLoading: false,
      text:''
    }
  },
  watch: {
    $route() {
      this.button = this.$route.meta.button || []
      this.showProjectName = this.$route.meta.showProjectName
    },
    showProjectName(val){
      this.projectName = this.$s.getSession('projectName')
    }
  },
  computed: {
    ...mapGetters(['projectId', 'userinfo','webSocket']),
  },
  created(){
    this.getPermissionList()
  },
  async mounted() {
    this.$store.commit('SET_PREFIX', '/')
    this.getUserInfo()
    this.getRouter()
    this.DictMessage()
    this.getPermissions() 
    if (this.id) {
      this.$store.commit('SET_PROJECT_ID', parseInt(this.id))
    }
    if (this.key) {
      this.$store.commit('SET_PATENT_KEY', this.key)
      await this.$store.dispatch('getCustomField', this.projectId)
      await this.$store.dispatch('getSystemField', this.projectId)
    }
  },
  methods: {
    //获取专题库权限
    async getPermissions() {
      const response = await this.$api.getPermissions()
      this.$store.commit('SET_PERMISSIONS', response.data)
    },
    //获取字典项
    DictMessage() {
      this.$api.DictMessage().then(response => {
        // console.log("response", response);
        this.$store.commit("SET_DictMessage",response.data)
      })
    },
    //获取路由信息
    getRouter(){
      this.button = this.$route.meta.button || []
      this.showProjectName = this.$route.meta.showProjectName
    },
    //点击图标
    handleClick(){
      this.$router.push({
        path: '/home'
      })
    },
    //修改权限
  changePermission(){
    this.webSocket.onmessage = (e) => {
      if(JSON.parse(e.data).code=='903' ){
        this.getPermissionList()
      }
    }
  },
  //获取权限
  getPermissionList(){
    var code = "6a8d3f4d1d5f11eda41c00163e2f0200;5051395c24e311eda41c00163e2f0200;a97c468b924111ed905500163e2f0200"
   this.$api.getPermissionList({code:code}).then(response=>{
        this.$store.commit('SET_ADMIN_PERMISSION', response.data)
      }).catch(error=>{
        this.$store.commit('SET_ADMIN_PERMISSION', [])
      })
    },
    
//获取个人信息
    getUserInfo() {
      this.$api.getUserInfo().then(response => {
        localStorage.tenant = response.data.tenantId
        this.text = `欢迎${response.data.name}登录本系统`
        this.$store.commit('SET_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;
	}
</style>
<style lang="scss">
#work-platform {
  width: 100%;
  height: 100%;

  .header {
    width: 100%;
    height: 60px;
    background: #fff;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
    color: #fff;
    display: flex;
    justify-content: space-between;
    .logo-bar {
      font-size: 20px;
      font-weight: bold;
      display: flex;
      align-items: center;
      cursor: pointer;
      .logo {
        margin-right: 10px;
        // width: 140px;
        height: 40px;
      }
    }
  }

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

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

  .wrapper {
    width: 100%;
    height: calc(100%);
    background: white;
    #view {
      height: calc(100% - 0px)
    }
  }
}
</style>
