<!-- 环境看板 -->
<script name="environmentBoard" lang="ts" setup>
import dayjs from 'dayjs'
import temperatureTrend from './components/environment/temperature.vue'
import humidityTrend from './components/environment/humidity.vue'
import smokeTrend from './components/environment/smoke.vue'
import electricityTrend from './components/environment/electricity.vue'
import oxygenTrend from './components/environment/oxygen.vue'
import upsTrend from './components/environment/UPS.vue'
import deviceAlarm from './components/environment/deviceAlarm.vue'
import content from './components/environment/content.vue'
import { getDictByCode } from '@/api/system/dict'
import { getUerDeptLab } from '@/api/business/taskMeasure/measureData'
// 日期查询条件
const current = ref('当日')
const selectCurrentTime = ref()
const menu = ref(['当日', '近7日', '近14天', '自定义时间'])
const dateRef = ref()
const clickBtn = (event: any) => {
  const select = event.target.value
  if (select && select === '自定义时间') {
    dateRef.value.focus()
  }
}
// dateRef
// 实验室
const labCode = ref('')
const labCodeList = ref<{ name: string;id: string;value: string }[]>([])
getDictByCode('labDept').then((response) => {
  labCodeList.value = response.data
  // 获取当前用户所在实验室，用来展示对应实验室数据
  getUerDeptLab().then((res) => {
    labCode.value = (labCodeList.value.filter(item => item.name === res.data)[0] || labCodeList.value[0]).value
  })
})
// 当前时间
const currentTime = ref('1999-01-01 00:00:00')
const currentTimer = ref()
const openTimer = () => {
  currentTimer.value = setInterval(() => {
    currentTime.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
  }, 1000)
}
openTimer()
onBeforeUnmount(() => {
  // 清空定时器
  clearInterval(currentTimer.value)
  currentTimer.value = null
})
// getLocationList 地点
// 展示区域高度
const showContentHeight = ref(800)
function calcBlockSize() { // 36是消息滚动栏的高度
  showContentHeight.value = document.body.clientHeight - 60 - 40
  console.log(showContentHeight.value, 'bodyHeight')
}
calcBlockSize()
const resizePage = () => {
  setTimeout(() => {
    const resize = new Event('resize')
    window.dispatchEvent(resize)
  }, 500)
}
resizePage()
</script>

<template>
  <!-- 日期等查询条件 -->
  <div class="seach-date">
    <div class="btns">
      <el-radio-group v-model="current" @click="clickBtn">
        <el-radio-button v-for="item in menu" :key="item" :label="item">
          {{ item }}
        </el-radio-button>
      </el-radio-group>
      <!-- 自定义时间选择  --移花接木 -->
      <el-date-picker
        ref="dateRef"
        v-model="selectCurrentTime"
        type="daterange"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        class="time-daterange"
        style="position: absolute;top: 0;left: 40px;z-index: -1;opacity: 0;"
      />
    </div>
    <div class="label">
      <el-select v-model="labCode">
        <el-option v-for="item in labCodeList" :key="item.id" :label="item.name" :value="item.value" />
      </el-select>
    </div>
    <div class="current">
      {{ currentTime }}
    </div>
  </div>
  <!-- 展示区域 -->
  <div class="show-content" :style="`height:${showContentHeight}px`">
    <!-- 左侧 -->
    <div class="left-show">
      <!-- 温度变化趋势 -->
      <temperature-trend />
      <!-- 湿度变化趋势 -->
      <humidity-trend />
      <!-- 烟雾值报警趋势 -->
      <smoke-trend />
    </div>
    <!-- 中间 -->
    <div class="middle-show">
      <!-- 主题内容 -->
      <content />
      <!-- 设备报警列表 -->
      <device-alarm />
    </div>
    <!-- 右侧 -->
    <div class="right-show">
      <!-- 电量变化趋势 -->
      <electricity-trend />
      <!-- 氧气浓度变化趋势 -->
      <oxygen-trend />
      <!-- UPS电源间变化趋势 -->
      <ups-trend />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.seach-date {
  display: flex;
  position: relative;
  top: 8px;
  // right: 10% !important;
  left: 60%;
  width: 38%;
  z-index: 999;
  justify-content: space-around;

  .current {
    font-size: 18px;
    font-weight: 700;
    height: 32px;
    line-height: 32px;
  }
}

.show-content {
  display: flex;
  padding-top: 20px;

  .left-show,
  .right-show,
  .middle-show {
    width: 30%;
    padding: 5px;
    margin: 5px;
    // display: flex;
  }

  .middle-show {
    width: 60%;
  }

  // CEDAF6
}
</style>