<template>
  <div class="layout">
    <header class="navbar">
      <div class="brand">{{ dynamicTitle }}</div>
      <div class="control-buttons">
<!--        <button -->
<!--          v-show="!isFullscreenState" -->
<!--          @click="enterFullscreen" -->
<!--          class="hidBtn fullscreen-btn"-->
<!--        >-->
<!--          全屏-->
<!--        </button>-->
<!--        <button -->
<!--          v-show="isFullscreenState" -->
<!--          @click="exitFullscreen" -->
<!--          class="hidBtn exit-btn"-->
<!--        >-->
<!--          退出-->
<!--        </button>-->
      </div>
    </header>
    <main class="content">
      <component :is="currentComponent" />
    </main>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import Inbound from './views/Inbound.vue';
import Outbound from './views/Outbound.vue';
import PickP1 from './views/PickP1.vue';
import Stacker from "@/views/Stacker.vue";
import PickP2 from "@/views/PickP2.vue";
import PickP3 from "@/views/PickP3.vue";
import InboundP2 from "@/views/InboundP2.vue";
import InboundP3 from "@/views/InboundP3.vue";

const debounce = (fn, delay) => {
  let timer = null;
  return function () {
    let context = this;
    let args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
};
const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
  constructor(callback) {
    callback = debounce(callback, 16);
    super(callback);
  }
};

export default {
  name: 'App',
  components: {
    Inbound,
    InboundP2,
    InboundP3,
    PickP1,
    PickP2,
    PickP3
  },
  setup() {
    const route = useRoute();
    const isFullscreenState = ref(false);

    // 获取当前standId
    const currentStandId = computed(() => {
      const params = new URLSearchParams(window.location.search);
      return params.get('standId');
    });

    // 动态标题映射
    const titleMapping = {
      '1': '  1 号入库',
      '2': '  2 号入库',
      '3': '  3 号入库',
      '4': 'P1 站台拣选',
      '5': 'P2 站台拣选',
      '6': 'P3 站台拣选',
    };

    // 动态标题
    const dynamicTitle = computed(() => {
      const standId = currentStandId.value;
      if (!standId) {
        // 没有standId时，显示默认标题，立库和状态之间留出两个字空格空间
        return '丰尚立库　　状态一览表';
      }
      const operation = titleMapping[standId];
      if (operation) {
        return `丰尚立库  ${operation}  状态一览表`;
      }
      // 如果standId不在映射中，显示默认标题
      return '丰尚立库　状态一览表';
    });

    // 根据standId动态选择组件
    const currentComponent = computed(() => {
      const standId = currentStandId.value;
      if (standId === '1') return 'Inbound';
      if (standId === '2') return 'InboundP2';
      if (standId === '3') return 'InboundP3';
      if (standId === '4') return 'PickP1';
      if (standId === '5') return 'PickP2';
      if (standId === '6') return 'PickP3';
      return 'Inbound'; // 默认显示入库组件
    });

    function isFullscreen() {
      return !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
    }

    async function requestFS(el) {
      if (el.requestFullscreen) return el.requestFullscreen();
      if (el.webkitRequestFullscreen) return el.webkitRequestFullscreen();
      if (el.mozRequestFullScreen) return el.mozRequestFullScreen();
      if (el.msRequestFullscreen) return el.msRequestFullscreen();
    }

    async function exitFS() {
      if (document.exitFullscreen) return document.exitFullscreen();
      if (document.webkitExitFullscreen) return document.webkitExitFullscreen();
      if (document.mozCancelFullScreen) return document.mozCancelFullScreen();
      if (document.msExitFullscreen) return document.msExitFullscreen();
    }

    async function enterFullscreen() {
      try {
        await requestFS(document.documentElement);
        isFullscreenState.value = true;
      } catch (err) {
        console.error('Error attempting to enable full-screen mode:', err);
      }
    }

    async function exitFullscreen() {
      try {
        await exitFS();
        isFullscreenState.value = false;
      } catch (err) {
        console.error('Error attempting to exit full-screen mode:', err);
      }
    }

    function handleFullscreenChange() {
      isFullscreenState.value = isFullscreen();
    }

    onMounted(() => {
      isFullscreenState.value = isFullscreen();
      document.addEventListener('fullscreenchange', handleFullscreenChange);
      document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
      document.addEventListener('mozfullscreenchange', handleFullscreenChange);
      document.addEventListener('MSFullscreenChange', handleFullscreenChange);
    });

    onUnmounted(() => {
      document.removeEventListener('fullscreenchange', handleFullscreenChange);
      document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
      document.removeEventListener('mozfullscreenchange', handleFullscreenChange);
      document.removeEventListener('MSFullscreenChange', handleFullscreenChange);
    });

    return {
      dynamicTitle,
      currentComponent,
      isFullscreenState,
      enterFullscreen,
      exitFullscreen
    };
  }
};
</script>

<style>
@import './assets/board-styles.css';



/* 增大标题字体大小 */
.navbar .brand {
  font-size: 50px !important;
  font-weight: 700;
}

/* 增加标题与内容区域的间距 */
.navbar {
  color: #000000; /* 黑色字体 */
  margin-bottom: 30px;
}

.navbar::after {
  display: none !important;
}

/* 或者增加品牌标题的上下边距 */
.navbar .brand {
  color: #000000; /* 黑色字体 */
  font-size: 50px !important;
  font-weight: 700;
  margin: 0 35px;
  white-space: nowrap; /* 防止换行 */
  width: fit-content; /* 根据内容调整宽度 */
  min-width: 800px; /* 设置最小宽度确保足够显示 */
  text-align: center; /* 居中对齐 */
}

</style>


