<template>
  <div>
    <v-header
      :user-name="userName"
      :auth-list="authList"
    />
    <v-slidebar
      v-if="systemType"
      :token-value="token"
      :system-type="systemType"
    />
    <el-container>
      <div
        id="body-content"
        class="content"
      >
        <transition
          name="router-fade"
          mode="out-in"
        >
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive" />
          </keep-alive>
        </transition>
        <transition
          name="router-fade"
          mode="out-in"
        >
          <router-view v-if="!$route.meta.keepAlive" />
        </transition>
        <v-footer />
      </div>
    </el-container>
    <chat
      :show-chat="showChat"
      :current-chat="currentChat"
    />
    <diagnoseAdvice :show-advice="showAdvice" />
  </div>
</template>
<script>
  import VHeader from './components/header.vue';
  import VSlidebar from './components/slidebar.vue';
  import VFooter from './components/footer.vue';
  import chat from '@/components/IM/chat';
  import DiagnoseAdvice from '@/components/common/diagnoseAdvice.vue';
  import { createNamespacedHelpers } from 'vuex';
  const { mapState, mapActions, mapGetters } = createNamespacedHelpers('main');
  import {
    base64decode,
    isNotEmptyUtils,
    getUrlParamsMap,
    ssoLogin,
    bindDragHeader,
  } from '@/utils/utils.js';
  import { loginHeader } from '@/api/layout';
  import { getInnerLoginUrl } from '@/utils/index';
  let vm = null;
  export default {
    components: {
      VHeader,
      VSlidebar,
      VFooter,
      chat,
      DiagnoseAdvice,
    },
    data() {
      return {
        token: '',
        userName: '',
        authList: [],
        systemType: 0,
      };
    },
    computed: {
      ...mapState({
        showChat: (state) => state.showChat,
        currentChat: (state) => state.currentChat,
        showAdvice: (state) => state.showAdvice,
      }),
      ...mapGetters(['_token']),
    },
    created() {
      console.log('this.$store.state', this.showChat);
      vm = this;
      vm.getToken();
      window._VM = vm;
    },
    mounted() {
      setTimeout(function () {
        bindDragHeader('.c-header', '.chat-wrap');
      }, 1000);
    },
    methods: {
      // 修改token
      ...mapActions(['changeToken']),
      // 解密token
      getToken() {
        const href = window.location.href;
        const offset = href.indexOf('?');
        if (offset !== -1) {
          const paramStr = href.substring(offset + 1, href.length);
          const pars = base64decode(paramStr);
          const paramMap = getUrlParamsMap(pars, '&');
          if (
            isNotEmptyUtils(paramMap['token']) &&
            isNotEmptyUtils(paramMap['ssoOrigin'])
          ) {
            vm.token = paramMap['token'];
            localStorage.setItem('token', vm.token);
            ssoLogin(href, paramMap);
          // vm.$router.push({ path: 'home' })
          } else {
            if (!localStorage.getItem('token')) {
              window.location.href = getInnerLoginUrl(); // 没有token返回登录页面
              return;
            }
          }
        } else {
          if (!localStorage.getItem('token')) {
            window.location.href = getInnerLoginUrl(); // 没有token返回登录页面
            return;
          }
        }
        vm.changeToken(vm.token);
        vm.getUserAuth();
      },

      // 获取用户权限
      getUserAuth() {
        let req = null;
        req = {
          system_type: '26',
        };
        loginHeader(req).then((res) => {
          if (res.code == '000000') {
            let systemType = 0;
            const authList = res.data.systemInfoList;
            const s = authList.find((item) => {
              return item.systemNameAbbreviation == 'diagnose';
            });
            if (s) {
              systemType = s.id;
            }
            this.systemType = systemType;
            this.showSlidebar = true;
            vm.userName = res.data.userName;
            vm.authList = authList;
          }
        });
      },
      closeGlobalMsgNotice() {},
    },
  };
</script>
<style lang="scss">
@import '@/styles/global.scss';
@import '@/styles/mixin.scss';
.router-fade-enter-active,
.router-fade-leave-active {
  transition: opacity 0.1s;
}
.router-fade-enter,
.router-fade-leave-active {
  opacity: 0;
}
.el-container {
  margin-left: 255px;
  overflow: hidden;
  .content {
    background: #f0f2f5;
    position: absolute;
    left: 215px;
    right: 0;
    top: 64px;
    bottom: 0;
    width: auto;
    box-sizing: border-box;
    overflow-y: scroll;
  }
}
</style>
