<script name="BigScreenView" setup>
/**
 * 大屏主页面
 * 采用缩放的形式进行适配，搭配rem
 *  */
import { computed, defineComponent, getCurrentInstance, onActivated, onMounted, reactive, ref, toRef, watch } from 'vue'
import { useRoute } from 'vue-router'
import autoScalContainer from './components/autoScalContainer.vue'
import deptDangerTable from './components/deptDangerTable.vue'
import ViewHead from './components/viewHead.vue'
import { setRem } from './common/rem.js'
import bg from './assets/bg.png'
import boxBg from './assets/boxBg.png'
import Box_2 from './components/box_2.vue'
import Box_3 from './components/box_3.vue'
import Box_4 from './components/box_4.vue'
import Box_5 from './components/box_5.vue'
const route = useRoute()
const dataContainer = reactive({
  loading: false,
  img: {
    bg,
    boxBg,
  },
})
// contain : 被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。使内容全部可见。
// cover : 被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框
const fit = ref('contain') // 缩放模式
/**
 * 缩放计算事件
 *  */
function handleResizeScreen(rect) {
  rect = rect || {}
  /**
   * 计算缩放倍数 1920 * 1080
   * 根据设计图自己配置
   *  */
  const baseSize = 16 // 基础大小，相当于1rem = 16像素
  const scale = rect.width / 1920
  const fontSize = `${Math.round(baseSize * scale * 100) / 100}px`
  setRem(fontSize)
}
</script>

<template>
  <div class="big-screen-view">
    <auto-scal-container
      :ratio="1920 / 1080"
      :fit="fit"
      @on-resize-screen="handleResizeScreen"
    >
      <div
        class="big-screen-view-container"
        :style="{
          '--bg-img': `url(${dataContainer.img.bg})`,
          '--boxBg-img': `url(${dataContainer.img.boxBg})`,
        }"
      >
        <div class="head">
          <view-head title="安全生产智慧监管平台" />
        </div>
        <div class="content">
          <div class="content">
            <div class="left">
              <div class="box">
                <!-- <Box_2></Box_2> -->
                <!-- <Box_3></Box_3> -->
                <!-- <dept-danger-table /> -->
              </div>
              <div class="box">
                <!-- <Box_2></Box_2> -->
                <dept-danger-table />
              </div>
              <div class="box">
                <!-- <Box_3></Box_3> -->
                <dept-danger-table />
              </div>
            </div>
            <div class="right">
              <div class="box">
                <dept-danger-table />
                <!-- <Box_4></Box_4> -->
              </div>
              <div class="box">
                <dept-danger-table />
                <!-- <Box_4></Box_4> -->
              </div>
              <div class="box">
                <dept-danger-table />
                <!-- <Box_5></Box_5> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </auto-scal-container>
  </div>
</template>

<style lang="scss" scoped>
.big-screen-view {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #031045c7;
    .big-screen-view-container {
        width: 100%;
        height: 100%;
        background-color: rgb(169, 169, 169);
        display: flex;
        flex-direction: column;
        background-image: var(--bg-img);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
        > .head {
            height: 5.688rem;
        }
        > .content {
            display: flex;
            flex-direction: column;
            flex: 1 1 0;
            width: 100%;
            height: 0;
            > .top {
                width: 100%;
                height: 12.438rem;
            }
            > .content {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                flex: 1 1 0;
                width: 100%;
                height: 0;
                padding: 0 0.938rem 0.938rem 0.938rem;
                box-sizing: border-box;
                > .left,
                > .right {
                    display: flex;
                    flex-direction: column;
                    > .box {
                        width: 100%;
                        flex: 1 1 0;
                        height: 0;
                        background-image: var(--boxBg-img);
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                        background-position: center;
                        margin: 0 0 0.938rem 0;
                        &:last-child {
                            margin: 0;
                        }
                    }
                }
                > .left {
                    height: 100%;
                    width: 24.375rem;
                }
                > .right {
                    height: 100%;
                    width: 24.375rem;
                }
            }
        }
    }
}
</style>