<!--
  Description: 设备和人员信息窗体
  Author: 李亚光
  Date: 2023-05-17
 -->
<script lang="ts" setup name="infoWindow">
import dialog1 from './callDialog.vue'
import videoPage from '@/views/device/callDialog.vue'
const dialogFormVisible = ref(false)
const overlay = ref()
const infoWindow = ref()
const info = ref()
const flag = ref()
const dialogRef = ref()
// 初始化
const initDialog = (e) => {
  overlay.value = e.overlay
  infoWindow.value = e.infoWindow
  info.value = e.info
  flag.value = e.flag
  dialogFormVisible.value = true
}
defineExpose({ initDialog })
// 关闭
const close = () => {
  infoWindow.value.close()
}
// 通话
const call = (flag: string) => {
  dialogRef.value.initDialog(flag, info.value)
}
const show = ref(false)
const callTree = () => {
  show.value = true
}
const close1 = () => {
  show.value = false
}
</script>

<template>
  <div v-show="dialogFormVisible">
    <video-page v-if="show" @close="close1" />
    <div v-if="flag === 'device'" class="container">
      <div class="title">
        <div class="text">
          安全树设备-{{ info?.deviceCode }}
        </div>
        <div class="close" @click="close">
          x
        </div>
      </div>
      <div :title="info?.location" class="item text-hidden">
        位置: {{ info?.location }}
      </div>
      <div class="item">
        <span>时间: {{ info?.time }}</span>
      </div>
      <div class="item">
        <span :class="{ alarm: info?.alarmFlag ? true : false }">甲烷浓度: {{ info?.gasValue }}</span>
      </div>
      <div style="position: absolute; right: 20px; top: 60px;">
        <div class="img-container hover" @click="callTree()">
          <img src="../icon/视频.png" width="24" height="24">
          <div>视频通话</div>
        </div>
      </div>
    </div>
    <div v-else class="container" style="height: 240px;width: 360px;">
      <div class="title">
        <div class="text" style="width: 95%;" :class="{ alarm: info?.alarmFlag ? true : false }">
          {{ info?.workerName }}-{{ info?.hatCode }}
        </div>
        <div class="close" @click="close">
          x
        </div>
      </div>
      <div class="content">
        <div style="width: 100%;">
          <div :title="info?.location" class="item text-hidden">
            位置: {{ info?.location }}
          </div>
          <div class="item">
            时间: {{ info?.time }}
          </div>
          <div class="item" style="font-weight: 700;">
            <div style="width: 60%;">
              心率: {{ info?.heartRate }}
            </div>
            <div style="width: 40%;">
              血氧: {{ info?.bloodOxygen }}
            </div>
          </div>
          <div class="item" style="font-weight: 700;">
            <div style="width: 60%;">
              一氧化碳: {{ info?.co }}
            </div>
            <div style="width: 40%;">
              甲烷: {{ info?.gas }}
            </div>
          </div>
          <div class="item" style="font-weight: 700;">
            <div style="width: 60%;">
              硫化氢: {{ info?.h2s }}
            </div>
            <div style="width: 40%;">
              氧气: {{ info?.o2 }}
            </div>
          </div>
        </div>
        <!-- <div style="width: 30%;display:flex;justify-content: space-around;padding-top: 50px;">
          <div class="img-container">
            <img src="../icon/信号.png" width="24" height="24">
            <div>信号</div>
            <div>{{ info?.signal }}</div>
          </div>
          <div class="img-container">
            <img src="../icon/电量.png" width="24" height="24">
            <div>电量</div>
            <div>{{ info?.cell }}</div>
          </div>
        </div> -->
      </div>
      <div style="width: 100%;display: flex;justify-content: space-around;padding-top: 5px;">
        <div class="img-container hover" @click="call('video')">
          <img src="../icon/视频.png" width="24" height="24">
          <div>视频通话</div>
        </div>
        <div class="img-container hover" @click="call('voice')">
          <img src="../icon/语音.png" width="24" height="24">
          <div>语音对讲</div>
        </div>
      </div>
    </div>
    <dialog1 ref="dialogRef" />
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 360px;
  height: 120px;
  padding: 0;
  background-color: #fff;
  border: 1px solid #6d9ece;

  .text-hidden {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .content {
    display: flex;
  }

  .hover {
    &:hover {
      cursor: pointer;
    }
  }

  .img-container {
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .alarm {
    color: red;
  }

  .title {
    font-size: 16px;
    font-weight: 700;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    background-color: #ccc;

    .close {
      // color: #ccc;
      // margin-left: 10px;

      &:hover {
        cursor: pointer;
      }
    }
  }

  .item {
    padding: 0 5px;
    color: #111213;
    font-size: 14px;
    margin: 10px;
    // border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
  }
}
</style>