<!--
  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'
import wellDetilDialog from '@/views/home/well/components/detailInfoDialog.vue'
const dialogFormVisible = ref(false)
const overlay = ref()
const infoWindow = ref()
// 弹窗展示数据信息
const info = ref()
const wellRef = 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
  // console.log(e.flag, 'e.flag')
  if (e.flag === 'well' || (e.flag === 'demonstration' && info.value.type === '阀门')) {
    setTimeout(() => {
      wellRef.value.initDialog(e)
    }, 1)
  }
}

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

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

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

<style lang="scss" scoped>
.well {
  width: 580px !important;
  padding: 0 6px !important;

  ::v-deep(.container) {
    border: none;
    border-radius: 0;
    width: 100%;

    .header {
      // padding-top: 10px;
      color: #a8d6f2;
      border-bottom: 2px solid #578ad1;
      padding-bottom: 10px;
      background-color: transparent;

      .el-button {
        display: none;
      }
    }

    .body {
      color: #8491a6;

      .descriptions {
        .descriptions-item {
          width: 47%;

          .label {
            font-size: 16px;
          }

          .value {
            color: #fff;
            font-size: 16px;
          }
        }
      }
    }
  }
}

.container {
  width: 370px;
  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>