<!--
  Description: 高德地图信息窗体 - 用热
  Author: 李亚光
  Date: 2023-05-10
 -->
<script lang="ts" setup name="infoWindow">
import trendChart from './trendChart.vue'
const overlay = ref()
const infoWindow = ref()
const info = ref()
const trendRef = ref()
// 初始化
const initialize = (e) => {
  overlay.value = e.overlay
  infoWindow.value = e.infoWindow
  info.value = e.info
  trendRef.value.expand = true
  trendRef.value.range = 'day'
}
defineExpose({ initialize })
// 关闭
const close = () => {
  infoWindow.value.close()
  trendRef.value.expand = true
}
const expand = computed(() => {
  return trendRef.value?.expand
})
</script>

<template>
  <div class="container" :style="`height: ${expand ? '230px' : '455px'}`">
    <div class="title">
      <div class="text">
        {{ info?.deviceName }}
      </div>
      <div class="close" @click="close">
        x
      </div>
    </div>
    <div class="item">
      <span>设备编号 : {{ info?.deviceNo }}</span>  <span>设备类型 : {{ info?.deviceTypeName }}</span>
    </div>
    <div class="item">
      <span>所属分区 : {{ info?.ptnName }}</span>  <span>监测对象 : {{ info?.monitorObjName }}</span>
    </div>
    <div class="item">
      <span>监测值 : {{ info?.monitorVal }}</span>  <span>监测单位 : {{ info?.monitorUnit }}</span>
    </div>
    <div class="item">
      <span>碳势 : {{ info?.en }} gCO2/KJ</span>  <span>采集时间 : {{ info?.uploadTime }}</span>
    </div>
    <div class="item">
      <span>安装位置 : {{ info?.installLocaltion }}</span>  <span>安装时间 : {{ info?.installTime }}</span>
    </div>
    <trend-chart ref="trendRef" :width="400" :height="200" :device-id="info?.id" :device-type="info?.deviceType" />
  </div>
</template>

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

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

    .close {
      color: #ccc;

      &: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>