<!--
  Description: 综合大屏-信息窗体
  Author: 李亚光
  Date: 2024-07-18
 -->
<script lang="ts" setup name="infoWindow">
import district from './districtInfo.vue'
import demonstration from './demonstration.vue'

import { mapData } from './mapData'
const dialogFormVisible = ref(false)
const overlay = ref()
const infoWindow = ref()
// 弹窗展示数据信息
const info = ref()
// 弹窗展示的内容
const flag = ref('')
// 初始化
const initDialog = (e: any) => {
  console.log(e, '信息窗体接收的数据')
  overlay.value = e.overlay
  infoWindow.value = e.infoWindow
  info.value = e.info
  flag.value = e.flag
  const result = mapData.filter((item: any) => item.name === info.value.name)
  if (result.length) {
    info.value = result[0]
  }
  dialogFormVisible.value = true
}

// 关闭
const close = () => {
  infoWindow.value.close()
}

defineExpose({ initDialog, close })
</script>

<template>
  <div v-show="dialogFormVisible" class="container" @mouseleave="() => { }">
    <div class="header">
      <span @click="close">x</span>
    </div>
    <!-- 展示的具体内容 -->
    <!-- 行政区或九五示范区详细信息 -->
    <district v-if="flag === 'administration'" :data="info" />
    <demonstration v-if="flag === 'demonstration'" :data="info" />
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 360px;
  padding: 0 10px;
  background: rgba($color: #0d263b, $alpha: 95%);
  border: 2px solid #79b5e6;
  position: relative;

  .header {
    float: right;
    color: #4875a0;
    font-size: 18px;
    font-weight: 700;

    &:hover {
      cursor: pointer;
      color: #658eb4;
    }
  }
}
</style>