<template>
  <div class="screen-window">
    <dv-full-screen-container id="dv-full-screen">
      <ScreenHeader title="综合监控大屏" />
      <div class="screen-content">
        <dv-border-box-9 class="zhleft screen-common-box">
          <component
            :is="ChengPinRKQKJ"
            moduleId="mainSL001"
            style="height: 32%; width: 100%"
          />
          <dv-decoration-2 style="height: 2%" />
          <component
            :is="BanZucqtj"
            moduleId="BanZucqtj"
            style="height: 32%; width: 100%"
          />
          <dv-decoration-2 style="height: 2%" />
          <component
            :is="WeiDianZCJGG"
            moduleId="WeiDianZCJGG"
            style="height: 32%; width: 100%"
          />
        </dv-border-box-9>
        <div class="spsace"></div>
        <div class="zhright">
          <div class="progress-bar">
            <component :is="mainLeftTop" moduleId="mainLeftTop" />
          </div>
          <div class="vertical-space"></div>
          <div class="column-item-middle" style="justify-content: start">
            <div
              style="
                width: 80%;
                height: 100%;
                position: relative;
                top: 0;
                left: 0;
              "
            >
              <component
                :is="ShengChanJHQK"
                moduleId="mainS076"
                style="
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 140%;
                  height: 100%;
                "
              />
            </div>
          </div>
          <div class="vertical-space"></div>
          <div class="column-item-bottom">
            <dv-border-box-12 class="screen-common-box">
              <component :is="mainS077" moduleId="mainS077" />
            </dv-border-box-12>
            <!--            <dv-border-box-4-->
            <!--              :color="['red', 'green']"-->
            <!--              :reverse="true"-->
            <!--              class="item-right screen-common-box"-->
            <!--            >-->
            <!--              <component :is="mainS078" moduleId="mainS078" />-->
            <!--            </dv-border-box-4>-->
          </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 mainSL001 = computed(() => {
  return getComponetnByName(commonS.mainSL001);
});

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

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

const mainLeftTop = computed(() => {
  return getComponetnByName(commonS.mainLeftTop);
});
const BanZucqtj = computed(() => {
  return getComponetnByName(commonS.BanZucqtj);
});
const ShengChanJHQK = computed(() => {
  return getComponetnByName(commonS.ShengChanJHQK);
});
const ChengPinRKQKJ = computed(() => {
  return getComponetnByName(commonS.ChengPinRKQKJ);
});
const WeiDianZCJGG = computed(() => {
  return getComponetnByName(commonS.WeiDianZCJGG);
});
</script>

<style lang="scss" scoped>
.zhleft {
  width: 750px;
  height: 100%;
}

.spsace {
  width: 15px;
}

.zhright {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .vertical-space {
    height: 2%;
  }

  .progress-bar {
    height: 100px;
  }

  .column-item-middle {
    //flex: 1;
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    //height: 100%;
    //border: 2px solid white;
  }
  .column-item-bottom {
    //flex: 1;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    //height: 100%;
    //border: 2px solid white;
  }

  .item-left {
    width: 65%;
    height: 100%;
  }

  .item-right {
    width: 35%;
    height: 100%;
  }
}
</style>
