<template>
  <div class="ueScreen">
    <Header :isFull="isFull" @changePage="handleChangePage" />
    <div class="content_box">
      <LeftPage class="left" :style="{ left: isHideOther ? '-25vw' : '1vw' }" />
      <RightPage class="right" :style="{ right: isHideOther ? '-25vw' : '1vw' }" />
    </div>
  </div>
</template>

<script setup lang="ts">
declare var ue5: any;

import Header from './components/header.vue';
import LeftPage from './components/leftPage.vue';
import RightPage from './components/rightPage.vue';
import { getToken } from '@/utils/auth';
import { useUserStoreHook } from '@/store/modules/user';
import usePermissionStore from '@/store/modules/permission';
import to from 'await-to-js';

const userStore = useUserStoreHook();
const isHideOther = ref(false);
const isFull = ref(false);

/**
 * 切换中心页面全屏
 */
const handleChangePage = () => {
  if (isFull.value) {
    isFull.value = false;
    isHideOther.value = false;
  } else {
    isFull.value = true;
    isHideOther.value = true;
    ue5('openUEUI');
  }
};

// 调用静默登录接口
const silentLogin = async (isExpired = false) => {
  const token = getToken();
  if (token && !isExpired) return true;

  try {
    await to(
      userStore.login({
        username: 'admin',
        password: 'admin123',
        tenantId: '000000',
        clientId: undefined,
        grantType: undefined
      })
    );
  } catch (e) {
    ElMessage.error('无法获取数据，请联系管理员');
    return false;
  }
  await to(userStore.getInfo());
  await usePermissionStore().generateRoutes();
  return true;
};

const initPage = async () => {
  const logged = await silentLogin();
  if (!logged) return;
};

onMounted(() => {
  initPage();
  window['silentLogin'] = silentLogin;
});
</script>

<style scoped lang="scss">
$vm_base: 1920;
$vh_base: 1080;

// 计算vw
@function vw($px) {
  @return calc(($px / $vm_base) * 100vw);
}

// 计算vh
@function vh($px) {
  @return calc(($px / $vh_base) * 100vh);
}

.ueScreen {
  width: 100vw;
  height: 100vh;
  // background-image: url('@/assets/ueimg/bj.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  color: #fff;
  overflow: hidden;
}

.content_box {
  position: relative;
  width: 100vw;
  height: calc(100vh - 8vh);
}

.left {
  position: absolute;
  top: 0;
  left: vw(20);
  width: 25vw;
  height: 100%;
  transition: all 0.5s ease;
}

.right {
  position: absolute;
  top: 0;
  right: vw(20);
  width: 25vw;
  height: 100%;
  transition: all 0.5s ease;
}
</style>
