<!--
 * @Author: chris
 * @Date: 2025-08-22 10:10:51
 * @LastEditors: chris
 * @LastEditTime: 2025-09-04 17:51:53
-->
<script setup>
import ScreenHeader from './components/ScreenHeader.vue'
import OrchardBriefInfo from './components/OrchardBriefInfo.vue'
import WeatherInfo from './components/WeatherInfo.vue';
import PestInfo from './components/PestInfo.vue';
import WarningInfo from './components/WarningInfo.vue';
import SoilInfo from './components/SoilInfo.vue';
import AerialPhoto from './components/AerialPhoto.vue';
import TimeBox from './components/TimeBox.vue';
import { BorderBox12, Loading } from '@kjgl77/datav-vue3'
import useDraw from '@/hooks/useDraw';
import mock from './mock';

const loading = ref(false)

const { screenRef, calcRate, windowDraw, unWindowDraw } = useDraw()


onMounted(() => {
  calcRate()
  windowDraw()
})

onUnmounted(() => {
  unWindowDraw()
})
</script>

<template>
  <div class="orchard-screen">
    <!-- 背景 -->
    <div class="bg" ref="screenRef">
      <!-- 加载动画 -->
      <loading v-if="loading">
        <div color-white>
          正在加载...
        </div>
      </loading>
      <div class="screen-body" v-else>
          <!-- 头部 -->
        <div class="screen-header">
          <ScreenHeader />
        </div>
        <TimeBox />
        <div class="screen-content">
          <!-- 内容-左 -->
          <div class="screen-content-left">
            <div class="content-left-top">
              <border-box-12>
                <orchard-brief-info :info="mock.info"/>
              </border-box-12>
            </div>
            <div class="content-left-bottom">
              <border-box-12>
                <weather-info />
              </border-box-12>
            </div>
          </div>
          <!-- 内容-右 -->
          <div class="screen-content-right">
            <div class="content-right-top">
              <border-box-12>
                <pest-info class="pest-info-module" />
                <warning-info class="warning-info-module" />
              </border-box-12>
            </div>
            <div class="content-right-bottom">
              <border-box-12>
                <soil-info />
              </border-box-12>
              <border-box-12>
                <aerial-photo />
              </border-box-12>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.orchard-screen {
  color: #d3d6dd;
  height: 100%;
  width: 100%;
  background-color: #000;
  overflow: hidden;
  .bg {
    width: 1920px;
    height: 1080px;
    padding: 14px;
    background-image: url('@/assets/images/screen/orchard-bg.png');
    background-size: cover;
    background-position: center center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: left top;
    transition: all 0.5s ease;
    overflow: hidden;
  }
}

.screen-body {
  @apply h-full;
}

.screen-header {
  @apply w-full h-50px m-b-20px;
}

.screen-content {
  @apply flex h-[calc(100%-50px-20px)];
}

.screen-content-left {
  @apply w-25% h-full;

  .content-left-top {
    @apply h-40%;
  }

  .content-left-bottom {
    @apply h-60%;
  }
}

.screen-content-right {
  @apply flex-1 h-full;

  .content-right-top {
    @apply h-62%;

    :deep(.border-box-content) {
      @apply flex flex-col;
    }
  }

  .content-right-bottom {
    @apply flex h-38%;
    
    > :nth-child(1) {
      flex: 4;
    }

    > :nth-child(2) {
      flex: 5;
    }
  }
}

.pest-info-module {
  @apply h-60%;
}

.warning-info-module {
  @apply flex-1;
}
</style>
