<!--
  Description: 闸井管理-信息窗体
  Author: 李亚光
  Date: 2024-07-18
 -->
<script lang="ts" setup name="infoWindow">
import { getWellDetail } from '@/api/home/well/well'
const dialogFormVisible = ref(false)
const overlay = ref()
const infoWindow = ref()

// 基本数据
const baseInfo = ref({
  ledgerCode: '', // 闸井编号
  ledgerName: '', // 闸井名称
  lngGaode: '',
  latGaode: '',
})
// 详细信息
const detailInfo = ref<{ [key: string]: string }>({})
// 描述列表数据
const descriptionsList = ref([
  {
    text: '闸井名称',
    value: 'ledgerName',
    align: 'center',
  },
  {
    text: '闸井位号',
    value: 'tagNumber',
    align: 'center',
  },
  {
    text: '使用状态',
    value: 'onStateName',
    align: 'center',
  },
  {
    text: '产权单位',
    value: 'propertyOwner',
    align: 'center',
  },
  {
    text: '联系人',
    value: 'propertyPerson',
    align: 'center',
  },
  {
    text: '联系方式',
    value: 'propertyPhone',
    align: 'center',
  },
  {
    text: '管理单位',
    value: 'deptName',
    align: 'center',
  },
  {
    text: '管理方式',
    value: 'manageTypeName',
    align: 'center',
  },
  {
    text: '所在区域',
    value: 'area',
    align: 'center',
  },
  {
    text: '详细位置',
    value: 'position',
    align: 'center',
  },
  {
    text: '经度',
    value: 'lngGaode',
    align: 'center',
  },
  {
    text: '纬度',
    value: 'latGaode',
    align: 'center',
  },
  {
    text: '标签',
    value: 'marker',
    align: 'center',
  },
])
// 初始化
const loading = ref(true)
const initDialog = (e: any) => {
  console.log(e, '信息窗体接收的数据')
  overlay.value = e.overlay
  infoWindow.value = e.infoWindow
  baseInfo.value = e.info.row
  dialogFormVisible.value = true
  if (e.map) {
    e.map.setZoom(15)
  }
  // 获取详细信息
  loading.value = true
  getWellDetail(e.info.id).then((res) => {
    baseInfo.value = res.data
    detailInfo.value = res.data
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}

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

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

<template>
  <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
    <div class="header">
      <el-tooltip
        class="box-item" effect="dark" :content="`${baseInfo.ledgerCode} | ${baseInfo.ledgerName}`"
        placement="top"
      >
        <span class="title">{{ baseInfo.ledgerCode }} | {{ baseInfo.ledgerName }}</span>
      </el-tooltip>
      <span class="close" @click="close">x</span>
    </div>
    <div class="body">
      <el-descriptions v-loading="loading" :column="2" border>
        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
          <template #label>
            <span class="label">
              {{ item.text }}
            </span>
          </template>
          <span class="nowrap">
            {{ detailInfo[item.value] || '' }}
          </span>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<style lang="scss" scoped>
::v-deep(.el-descriptions__cell) {
  padding: 0 !important;

  ::v-deep(.is-bordered-label) {
    width: 100px !important;
  }

  ::v-deep(.el-descriptions__label) {
    width: 100px !important;
  }

  ::v-deep(.el-descriptions__content) {
    width: 170px !important;
  }

  ::v-deep(.is-bordered-content) {
    width: 170px !important;
  }
}

.nowrap {
  width: 170px;
  white-space: nowrap;

  /* 确保文本在一行内显示 */
  overflow: hidden;

  /* 超出容器部分隐藏 */
  text-overflow: ellipsis;

  /* 文字溢出显示省略号 */
}

.container {
  // width: 500px;
  // padding: 0 10px;
  background: rgba($color: #feffff, $alpha: 95%);
  border: 1.5px solid #79b5e6;
  position: relative;

  .header {
    float: right;
    background-color: #ccc;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 2px 10px;
    align-items: center;

    .title {
      font-weight: 700;
      display: inline-block;
      width: 90%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .close {
      color: #4875a0;
      font-size: 22px;
      font-weight: 700;
      text-align: right;
      padding-right: 10px;

      &:hover {
        cursor: pointer;
        color: #658eb4;
      }
    }
  }

  .body {
    // padding: 10px;
    // display: flex;
    // flex-wrap: wrap;
    width: 100%;

    .name {
      width: 30%;
    }

    .value {
      width: 70%;
    }
  }
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
</style>