<template>
  <div style="display: flex; justify-content: space-evenly; align-items: center;">
    <!-- <div class="topTip">
    <toptip ref="toptip1"></toptip>
  </div> -->
    <div style="display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center;" ref="verticalboxref">
      <!-- <verticalNum ref="verticalNum1" :title="'锅炉房燃气检测'"></verticalNum>
    <verticalNum ref="verticalNum2" :title="'食堂燃气检测'"></verticalNum> -->
      <verticalNum ref="verticalNum3" :title="`喷漆${t('messages.gasDetection')}`"></verticalNum>
      <verticalNum ref="verticalNum4" :title="t('messages.flameDetection')"></verticalNum>
      <verticalNum ref="verticalNum5" :title="t('messages.smokeDetection')"></verticalNum>
      <verticalNum ref="verticalNum6" :title="`${t('messages.JingShiRoom')}(${t('messages.CH2Ojiance')})`"></verticalNum>
      <verticalNum ref="verticalNum7" :title="`${t('messages.JingShiRoom')}TVOC`"></verticalNum>
    </div>
    <div>
      <pipe ref="pipe1" :title="t('messages.PipelinePressure_Mpa')"></pipe>
    </div>

  </div>
</template>

<script setup lang="ts">
import pressure from "./chart/pressure.vue"
import pipe from "./chart/pipe.vue"
// import toptip from "./chart/toptip.vue"
import { onMounted, ref, watch } from "vue"
import { calcWH } from "@/components/ts/selfAdaption";
import verticalNum from './chart/verticalNum.vue'
// import { getPressureData,getSafeWarningData } from "@/http/environment";
import { getPressureData, getSafeWarningData, getpipeData } from "@/http/realtimeSecurity";
import { useSocketStore } from "@/store/moduleSocketjixie";
import { gettime, clacendTime } from "@/utils/time"
import { useI18n } from 'vue-i18n'
let { t } = useI18n();
const store = useSocketStore()
let props = defineProps<{
  width: number,
  height: number,
}>()
watch(() => props, (newVal, oldVal) => {
  //监听父组件宽高变化，随时重置本组件尺寸    
  reset(newVal)
}, { immediate: true, deep: true, flush: 'post' })

// let toptip1=ref()
// let perssure1=ref()
// let perssure2=ref()
let pipe1 = ref()
let verticalboxref = ref()
// let verticalNum1=ref()
// let verticalNum2=ref()
let verticalNum3 = ref()
let verticalNum4 = ref()
let verticalNum5 = ref()
let verticalNum6 = ref()
let verticalNum7 = ref()


function reset(val: any) {
  //宽高为0时跳出该方法
  console.log(val);

  if (!val.width && !val.height) return

  //重置盒子尺寸
  // PressureBox(val.width,val.height)
  pipeBox(val.width, val.height)
  verticalNumBox(val.width, val.height)
  // toptip1.value.setchartWH()
}
// const PressureBox=(width:any,height:any)=>{
//   let a=calcWH(height,width,1,24,0)
//   //修改高度
//   perssure1.value.setchartWH(a.oWidth,a.oHeight*2)
//   perssure2.value.setchartWH(a.oWidth,a.oHeight*2)
// }

const pipeBox = (width: any, height: any) => {
  let a = calcWH(height, width, 1, 24, 0)
  a.oHeight = a.oHeight - 30
  //修改高度
  pipe1.value.setchartWH(a.oWidth * 12, a.oHeight - 20)
  // pipe1.value.setchartWH(a.oWidth*12,a.oHeight)
}

const verticalNumBox = (width: any, height: any) => {
  let a = calcWH(height, width, 2, 24, 0)
  a.oHeight = a.oHeight - 10
  //修改高度
  // verticalNum1.value.setchartWH(a.oWidth,a.oHeight)
  // verticalNum2.value.setchartWH(a.oWidth,a.oHeight)
  verticalboxref.value.style.width = a.oWidth * 12 + "px"
  verticalNum3.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 10)
  verticalNum4.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 10)
  verticalNum5.value.setchartWH(a.oWidth * 4 - 20, a.oHeight - 10)
  verticalNum6.value.setchartWH(a.oWidth * 6 - 25, a.oHeight - 10)
  verticalNum7.value.setchartWH(a.oWidth * 6 - 25, a.oHeight - 10)
}



watch(
  () => store.newVerticalNum,
  (newVal, oldVal) => {
    newVal.forEach((item: any, index: number) => {
      if (item.value != oldVal[index].value) {
        if (item.type == 'TVOC') {
          verticalNum7.value.setData(item.value, 'icon-TVOC-Outlined', item.limit, "mg/m3")
        }
        if (item.type == 'Smoke') {
          verticalNum5.value.setData(item.value, 'icon-yanwubaojingqi', item.limit, "")
        }
        if (item.type == 'Methane') {
          verticalNum3.value.setData(item.value, 'icon-ranqi', item.limit, "")
        }
        if (item.type == 'CH2O') {
          verticalNum6.value.setData(item.value, 'icon-app_icons--', item.limit, "mg/m3")
        }
        if (item.type == 'FIRE') {
          verticalNum4.value.setData(item.value, 'icon-weibiaoti1', item.limit, "")
        }

      }
    })
  },
  { deep: true, flush: "post" }
)
const verticalType = {
  'TVOC': { icon: 'icon-TVOC-Outlined', title: t('messages.TVOCDetection'), unit: 'mg/m³' },
  'Smoke': { icon: 'icon-yanwubaojingqi', title: t('messages.smokeDetection'), unit: null },
  'Methane': { icon: 'icon-ranqi', title: t('messages.gasDetection'), unit: null },
  'CH2O': { icon: 'icon-app_icons--', title: t('messages.CH2ODetection'), unit: 'mg/m³' },
  'FIRE': { icon: 'icon-weibiaoti1', title: t('messages.flameDetection'), unit: null },
}

async function getSafeWarningDatafun() {
  let result: any = await getSafeWarningData({ deptIds: '6,7,9,10,11' })
  if (result.code == 200) {
    let datetime = new Date().getTime();
    let handle_vertical = result.data.map((item: any) => {
      item.value.forEach(element => {

        if (element.val > item.limit) {
          element.date = gettime(element.ts),
            element.time = element.ts || datetime
          element.continuous = clacendTime(datetime, element.ts)
        } else {
          element.date = null
          element.time = null
          element.continuous = null
        }
      });
      return {
        type: item.type,
        icon: verticalType[item.type].icon,
        title: verticalType[item.type].title,
        limit: item.limit,
        unit: verticalType[item.type].unit,
        value: item.value
      }
    })

    //console.log(result.data,'安全预警----------');
    store.setNewVerticalNum(handle_vertical)




    handle_vertical.forEach(res => {
      if (res.type == 'TVOC') {
        verticalNum7.value.setData(res.value, 'icon-TVOC-Outlined', res.limit, "mg/m3")
      }
      if (res.type == 'Smoke') {
        verticalNum5.value.setData(res.value, 'icon-yanwubaojingqi', res.limit, "")
      }
      if (res.type == 'Methane') {

        verticalNum3.value.setData(res.value, 'icon-ranqi', res.limit, "")


      }
      if (res.type == 'CH2O') {
        verticalNum6.value.setData(res.value, 'icon-app_icons--', res.limit, "mg/m3")
      }
      if (res.type == 'FIRE') {
        verticalNum4.value.setData(res.value, 'icon-weibiaoti1', res.limit, "")
      }
    })
    // let handle_vertical = result.data.map((item:any)=>{
    //   return {
    //     type:item.type,
    //     icon:verticalType[item.type].icon,
    //     title:verticalType[item.type].title,
    //     limit:item.limit,
    //     unit:verticalType[item.type].unit,
    //     value:item.value
    //   }
    // })

    // store.setNewVerticalNum(handle_vertical)





  }
}
watch(
  () => store.pipe,
  (newVal, oldVal) => {
    //动态更新echarts
    //泵房气压
    pipe1.value.setData(newVal, 2)
  },
  { deep: true, flush: "post" }
);
async function getpipeDatafun() {
  let pageValue = '6,7,9,10,11'
  let result: any = await getpipeData({ deptIds: pageValue })

  if (result.code == 200) {
    console.log(result);
    //设置组件样式
    pipe1.value.setData({ listData: result.data.listData, top: result.data.top }, 1)

    //将数据存入pinia
    store.changePipe({ listData: result.data.listData, top: result.data.top })
  }
}

onMounted(() => {
  // getPressureDatafun()
  getSafeWarningDatafun()
  getpipeDatafun()
})

</script>

<style scoped>
.topTip {
  width: 100%;
  height: 150px;
}
</style>
