<template>
  <div :class="$style['container']">
    <div class="header">
      <div class="title">
        <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'传感器24H趋势图'" :titleTip="[]" :typeFun="['time']"
          :alarmType="[]"></header2>
      </div>
    </div>
    <div class="content">
      <lineChart v-for="(calc, index) in calcArr" :style="{width:width+'px',height:height+'px','min-width':'calc(25% - 20px)'}" :calc="calc">
      </lineChart>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted, onUnmounted } from "vue"
import Header2 from "@/components/headerBox/header2.vue"
import lineChart from "./lineChart.vue";
type calcType = {
  name: string,
  type: string,
  max: number,
  min: number,
  avg: number,
  data: any[]
}
let calcArr = ref<calcType[]>()
let width = ref(1500)
let height = ref(700)
function ajax() {
  setTimeout(() => {
    let data = []
    let length = 2
    let element = {
        name: '甲醛',
        type: 'CH2O',
        max: 0.1,
        min: 0.01,
        avg: 0.05,
        data: [
          ['2021-06-01 00:00:00', 10],
          ['2021-06-01 00:00:10', 20],
          ['2021-06-01 00:00:40', 50],
          ['2021-06-01 00:01:20', 90],
          ['2021-06-01 00:01:30', 100],
          ['2021-06-01 00:01:40', 110],
          ['2021-06-01 00:01:50', 120],
          ['2021-06-01 00:02:30', 160],
          ['2021-06-01 00:02:40', 170],
          ['2021-06-01 00:03:10', 200],
          ['2021-06-01 00:03:20', 210],
          ['2021-06-01 00:03:30', 220],
          ['2021-06-01 00:04:20', 270]
        ]
      }
    for (let index = 0; index < length; index++) {
      data.push(element)
      
    }
    calcArr.value = data
    if (data.length<=4) {
      width.value = 1900 / data.length-(data.length-1)*20;
    } else if (data.length>4&&data.length<=8) {
      width.value = width.value / 4-3*20;
      height.value = 950 / 2-40;
    } else {
      width.value = width.value / 4-3*20;
      height.value = 950 / 3-60;
    }
  })
}
onMounted(() => {
  ajax()
})
</script>
<style module>
.container {
  height: 1080px;
  width: 1920px;
  color: #20aec5;
  background-color: #100c2a;
  box-sizing: border-box;
}
</style>
<style scoped>
.content {
  height: 980px;
  width: 1920px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 5px;
}
</style>

