<!--
  Description: 高德地图信息窗体
  Author: 李亚光
  Date: 2023-05-10
 -->
<script lang="ts" setup name="infoWindow">
import gas from './components/gas.vue'
import car from './components/car.vue'
import taskDetail from './components/taskDetail.vue'
import analyse from './components/analyse.vue'
import recognition from './components/recognition.vue'
import database from './components/database.vue'
const overlay = ref()
const infoWindow = ref()
// 节点信息
const info = ref()
// 弹窗类型
const type = ref()
// 初始化
const initialize = (e) => {
  overlay.value = e.overlay
  infoWindow.value = e.infoWindow
  // 节点信息
  info.value = e.info
  // 弹窗类型
  type.value = e.info.dialog
}
defineExpose({ initialize })
// 关闭
const close = () => {
  infoWindow.value.close()
}
</script>

<template>
  <div class="container" :class="type">
    <div class="title">
      <div class="text">
        <!-- 这是一个弹窗 -->
      </div>
      <div class="close" @click="close">
        x
      </div>
    </div>
    <gas v-if="type === 'gas'" :info="info" />
    <car v-if="type === 'car'" :info="info" />
    <task v-if="type === 'task'" :info="info" />
    <task-detail v-if="type === 'taskDetail'" :info="info" />
    <analyse v-if="type === 'analyse'" :info="info" />
    <recognition v-if="type === 'recognition'" :info="info" />
    <database v-if="type === 'database'" :info="info" />
  </div>
</template>

<style lang="scss" scoped>
.gas {
  width: 470px !important;
  height: 200px !important;
}

.car {
  width: 300px !important;
  height: 200px !important;
}

.task {
  width: 470px !important;
  height: 200px !important;
}

.taskDetail {
  height: 200px !important;
}

.analyse {
  width: 350px !important;
  height: 140px !important;
}

.recognition {
  width: 350px !important;
  height: 280px !important;
}

.database {
  width: 840px !important;
  height: 270px !important;
}

.container {
  color: #fff;
  width: 470px;
  height: 510px;
  padding: 10px;
  // background-color: #fff;
  background-color: rgba($color: #6692be, $alpha: 80%);
  border: 1px solid #6d9ece;
  border-radius: 8px;

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

    .close {
      // color: #ccc;

      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>