<!--
  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') {
    setTimeout(() => {
      wellRef.value.initDialog(e)
    }, 1)
  }
}

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

}

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

<template>
  <div v-show="dialogFormVisible" class="container" :class="flag === 'well' ? 'well' : ''"
    :style="{ padding: flag === 'well' ? '0' : '0 10px' }" @mouseleave="() => { }">
    <div class="header" style="">
      <span style="font-size: 18px;" @click="close">×</span>
    </div>
    <!-- 展示的具体内容 -->
    <!-- 行政区或九五示范区详细信息 -->
    <district v-if="flag === 'administration'" :data="info" />
    <demonstration v-if="flag === 'demonstration'" :data="info" />
    <well-detil-dialog v-if="flag === 'well'" ref="wellRef" />
  </div>
</template>

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

  ::v-deep(.container) {
    border: none;
    border-radius: 0;
    width: 100%;
    padding-left: 0 !important;
    padding-bottom: 8px;

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

      // .title {
      //   width: 80%;
      // }
      div {
        width: 90% !important;
      }

      .el-button {
        display: none;
      }

      .close {
        display: none;
      }
    }

    .body {
      color: #a8d6f2;
      .custom-descriptions{
        .value1{
          color: #a8d6f2;
        }
        .value2{
          color: #a8d6f2;
        }
      }
      .descriptions {
        .descriptions-item {
          width: 47%;

          .label {
            font-size: 16px;
          }

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

          }
        }

        .descriptions-item2 {
          .label {
            width: 42% !important;
          }
        }
      }
    }

    .dirver {
      // #578ad1
      background-image: linear-gradient(to right, rgba(87,138,209, 0.27), rgba(87,138,209, 0.9), rgba(87,138,209, 0.27));
    }

    .gas {
      color: #fff !important;
    }
  }
}

.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;
    position: absolute;
    top: 0;
    z-index: 9;
    width: 100%;
    display: flex;
    justify-content: end;
    padding-right: 10px;

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