<template>
  <div class="screen-window">
    <dv-full-screen-container id="dv-full-screen">
      <ScreenHeader title="总装车间看板" />
      <div class="screen-content" style="flex-direction: column">
        <div class="top-container">
          <dv-border-box-8 class="top-container-box top-left">
            <component :is="workTOP01" moduleId="workTOP01" />
          </dv-border-box-8>
          <dv-border-box-12 class="top-container-box top-middle">
            <component :is="workTOP02" moduleId="workTOP02" />
          </dv-border-box-12>
          <div class="top-container-box top-right">
            <component :is="workTOP03" moduleId="workTOP03" />
          </div>
        </div>
        <div class="vertical-space"></div>
        <div class="bottom-container">
          <div class="bottom-container-box bottom-left">
            <component :is="workBottom01" moduleId="workBottom01" />
          </div>

          <div class="bottom-container-box bottom-right">
            <component :is="workBottom02" moduleId="workBottom02" />
          </div>
        </div>
      </div>
    </dv-full-screen-container>
    <SelectComponents />
  </div>
</template>

<script lang="ts" setup>
import { getComponetnByName } from "@/views/screens/configs/components";
import SelectComponents from "@/views/screens/configs/SelectComponents.vue";
import { useCommonStore } from "@/store";
import ScreenHeader from "@/views/screens/headers/screenHeader.vue";

const commonS = useCommonStore();

const workTOP01 = computed(() => {
  return getComponetnByName(commonS.workTOP01);
});
const workTOP02 = computed(() => {
  return getComponetnByName(commonS.workTOP02);
});

const workTOP03 = computed(() => {
  return getComponetnByName(commonS.workTOP03);
});
const workBottom01 = computed(() => {
  return getComponetnByName(commonS.workBottom01);
});
const workBottom02 = computed(() => {
  return getComponetnByName(commonS.workBottom02);
});
</script>

<style lang="scss" scoped>
.top-container {
  height: 45%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .top-container-box {
    height: 100%;
    //border: 1px solid yellow;
    //padding: 25px;
    padding: 8px;
  }

  .top-left {
    width: 27%;
  }

  .top-middle {
    width: 46%;
  }

  .top-right {
    width: 27%;
  }
}

.vertical-space {
  height: 15px;
  width: 100%;
}

.bottom-container {
  height: calc(55% - 15px);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .bottom-container-box {
    height: 100%;
    //border: 1px solid yellow;
  }

  .bottom-left {
    width: 73%;
  }

  .bottom-right {
    width: 27%;
  }
}
</style>
