<!-- 环境看板 -->
<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 { getLocationList, getUerDeptLab } from '@/api/business/taskMeasure/measureData'
import { getPlaceList } from '@/api/dataManagement/environmentBoard'
// 日期查询条件
const current = ref('')
setTimeout(() => {
  current.value = '当日'
})
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()
  }
}
// 实验室
const labCode = ref('')
const labCodeList = ref<string[]>([])

getDictByCode('labDept').then((response) => {
  labCodeList.value = response.data.map((item: any) => item.name)
  // 获取当前用户所在实验室，用来展示对应实验室数据
  getUerDeptLab().then((res) => {
    labCode.value = labCodeList.value.filter(item => item === res.data)[0] || labCodeList.value[0]
  })
})
// 当前时间
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
})

// 地点列表
const positionAllList = ref<{ [key: string]: any[] }>({
  1: [],
  2: [],
  3: [],
  4: [],
  5: [],
  6: [],
})
// 获取地点状态loading(主要作用通知子组件结束loading)
const placeLoading = ref(true)
// 获取地点数据
const fetchData = () => {
  placeLoading.value = true
  getPlaceList({
    labName: (labCodeList.value.filter(item => item === labCode.value)[0] || labCodeList.value[0]),
    deviceTypeList: [1, 2, 3, 4, 5, 6],
  }).then((res) => {
    positionAllList.value = res.data
    for (const i in positionAllList.value) {
      positionAllList.value[i] = positionAllList.value[i].map((item: { id: string; locationName: string; temperature: string; humidity: string }) => ({
        id: item.id,
        name: item.locationName, // 地点名称
      }))
    }
    placeLoading.value = false
  })
    .catch(() => {
      placeLoading.value = false
    })
}
watch(() => labCode.value, (newVal) => {
  if (newVal) {
    // fetchPosition()
    fetchData()
  }
})

// 展示区域高度
const showContentHeight = ref(800)
function calcBlockSize() { // 36是消息滚动栏的高度
  showContentHeight.value = document.body.clientHeight - 60 - 40
}
calcBlockSize()
// 页面resize(主要用来调整echarts图表)
window.addEventListener('resize', () => {
  calcBlockSize()
})
const startTime = ref()
const calendarChange = (e: any) => {
  startTime.value = e[0].getTime()
}
const pickerOptions = (time: any) => {
  if (startTime.value) {
    const timeRange = 1 * 24 * 60 * 60 * 1000 // 1天时间戳
    const minTime = startTime.value - timeRange * 2
    const maxTime = startTime.value + timeRange * 15
    return time.getTime() <= minTime || time.getTime() >= maxTime || time.getTime() === startTime.value
  }
  else {
    return false
  }
}
</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;"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        :disabled-date="pickerOptions" @calendar-change="calendarChange "
      />
    </div>
    <div class="label">
      <el-select v-model="labCode">
        <el-option v-for="item in labCodeList" :key="item" :label="item" :value="item" />
      </el-select>
    </div>
    <div class="current">
      {{ currentTime }}
    </div>
  </div>
  <!-- 展示区域 -->
  <div class="show-content" :style="`height:${showContentHeight}px`">
    <!-- 左侧 -->
    <div class="left-show">
      <!-- 温度变化趋势 -->
      <temperature-trend :lab="labCode" :date-type="current" :time-rang="selectCurrentTime" :position="positionAllList['1'] || []" :place-loading="placeLoading" />
      <!-- 湿度变化趋势 -->
      <humidity-trend :lab="labCode" :date-type="current" :time-rang="selectCurrentTime" :position="positionAllList['2'] || []" :place-loading="placeLoading" />
      <!-- 烟雾值报警趋势 -->
      <smoke-trend :lab="labCode" :date-type="current" :time-rang="selectCurrentTime" :position="positionAllList['3'] || []" :place-loading="placeLoading" />
    </div>
    <!-- 中间 -->
    <div class="middle-show">
      <!-- 主题内容 -->
      <content :lab="labCode" />
      <!-- 设备报警列表 -->
      <device-alarm :lab="labCode" />
    </div>
    <!-- 右侧 -->
    <div class="right-show">
      <!-- 电量变化趋势 -->
      <electricity-trend :lab="labCode" :date-type="current" :time-rang="selectCurrentTime" :position="positionAllList['4'] || []" :place-loading="placeLoading" />
      <!-- 氧气浓度变化趋势 -->
      <oxygen-trend :lab="labCode" :date-type="current" :time-rang="selectCurrentTime" :position="positionAllList['5'] || []" :place-loading="placeLoading" />
      <!-- UPS电源间变化趋势 -->
      <ups-trend :lab="labCode" :date-type="current" :time-rang="selectCurrentTime" :position="positionAllList['6'] || []" :place-loading="placeLoading" />
    </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>