<template>
  <div id="work-platform" v-if="show">
    <header class="header">
      <div class="header-left">
        <div class="logo-bar" @click="handleClick">
          <img src="@/assets/logo-3.png" class="logo">
        </div>
      </div>
      <div class="header-right">
        <div class="padding-right_10">
          <el-button v-if="button.indexOf('e') !== -1" size="small" type="primary" @click="handleVisual">可视化平台</el-button>
          <el-button v-if="button.indexOf('d') !== -1 && $r(projectId, [2])" type="primary" size="small" @click="handleExport" :loading="btnLoading">专题库数据导出</el-button>
        </div>
        <user-bar/>
      </div>
    </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-backtop></el-backtop>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import UserBar from "./components/UserBar";
import { webSocket } from "./mixins";

export default {
  components: {
    UserBar,
  },
  mixins: [webSocket],
  data() {
    return {
      id: this.$route.query.id,
      key: this.$route.query.key,
      button: [],
      show: false,
      btnLoading: false
    }
  },
  watch: {
    $route() {
      this.button = this.$route.meta.button || []
    }
  },
  computed: {
    ...mapGetters(['projectId', 'userinfo']),
  },
  created() {
    this.$store.commit('SET_PREFIX', '')
  },
  async mounted() {
    console.log(this,'99999999');
    this.show = false
    this.button = this.$route.meta.button || []
    await this.getUserinfo()
    await 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)
    }
    this.show = true
  },
  methods: {
    async getUserinfo() {
      const response = await this.$api.getUserInfo()
      this.$store.commit('SET_USERINFO', response.data)
      this.connectWebSocket(this.userinfo.id)
    },
    async getPermissions() {
      const response = await this.$api.getPermissions()
      this.$store.commit('SET_PERMISSIONS', response.data)
    },
    handleVisual() {
      const router = this.$router.resolve({
        path: '/visual'
      })
      window.open(router.href, '_blank')
    },
    handleExport() {
      const params = this.$store.state.patent.params
      this.btnLoading = true
      this.$api.saveSelectPatent(params).then(response => {
        this.btnLoading = false
        this.$router.push({
          path: '/workspace/folder/export/data',
          query: {
            id: this.id,
            key: response.data
          }
        })
      })
    },
    close() {

    },
    handleClick() {
      this.$router.push({
      //   path: '/workspace/workspace'
     path: '/workspace'
      })
    }
  }
}
</script>

<style lang="scss">
#work-platform {
  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;
    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% - 71px);
    #view {
      height: calc(100% - 0px)
    }
  }
}
</style>
