<!--
  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: 'deptName',
    align: 'center',
  },
  {
    text: '场站类型',
    value: 'wellTypeName',
    align: 'center',
  },
  {
    text: '详细位置',
    value: 'position',
    align: 'center',
  },
  {
    text: '场站状态',
    value: 'onStateName',
    align: 'center',
  },
  {
    text: '负责人',
    value: '',
    align: 'center',
  },
  {
    text: '标签',
    value: 'marker',
    align: 'center',
  },
  {
    text: '监控状态',
    value: 'monitorStateName',
    align: 'center',
  },
  {
    text: '',
    value: '',
    align: 'center',
  },
  {
    text: '当前浓度',
    value: '',
    align: 'center',
  },
  // {
  //   text: '场站名称',
  //   value: 'ledgerName',
  //   align: 'center',
  // },
  // {
  //   text: '场站位号',
  //   value: 'tagNumber',
  //   align: 'center',
  // },

  // {
  //   text: '产权单位',
  //   value: 'propertyOwner',
  //   align: 'center',
  // },
  // {
  //   text: '联系人',
  //   value: 'propertyPerson',
  //   align: 'center',
  // },
  // {
  //   text: '联系方式',
  //   value: 'propertyPhone',
  //   align: 'center',
  // },

  // {
  //   text: '管理方式',
  //   value: 'manageTypeName',
  //   align: 'center',
  // },
  // {
  //   text: '所在区域',
  //   value: 'area',
  //   align: 'center',
  // },

  // {
  //   text: '经度',
  //   value: 'lngGaode',
  //   align: 'center',
  // },
  // {
  //   text: '纬度',
  //   value: 'latGaode',
  //   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) => {
    console.log(res.data, '123')
    detailInfo.value = res.data
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}

// 关闭
const close = () => {
  infoWindow.value?.close()
}
// 详情
const $router = useRouter()
const goDetail = () => {
  $router.push({
    path: '/station/detial',
    query: {
      id: detailInfo.value.id,
    },
  })
}
const currentVideo = ref('一号云台')
const changeVideo = (name: string) => {
  currentVideo.value = name
}
defineExpose({ initDialog, close })
</script>

<template>
  <div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
    <div class="header">
      <div style="display: flex;align-items: center;">
        <el-tooltip
          class="box-item" effect="dark" :content="`${baseInfo.ledgerCode} | ${baseInfo.ledgerName}`"
          placement="top"
        >
          <span class="title">{{ baseInfo.ledgerCode }} | {{ baseInfo.ledgerName }}</span>
        </el-tooltip>
        <el-button size="small" style="margin-left: 10px;" @click="goDetail">
          详情
        </el-button>
      </div>
      <span class="close" @click="close">x</span>
    </div>
    <!-- 云台视频 -->
    <div class="video">
      <div class="video-menu">
        <div
          v-for="item in ['一号云台', '二号云台']" :key="item" class="menu-item"
          :class="item === currentVideo ? 'active' : ''" @click="changeVideo(item)"
        >
          {{ item }}
        </div>
      </div>
      <div class="video-container">
        <div class="video-control">
          <div style="width: 50%;display: flex;justify-content: center;">
            <el-button type="primary" round size="small">
              预览
            </el-button>
            <el-button round size="small">
              回放
            </el-button>
            <el-button round size="small">
              报警
            </el-button>
          </div>
        </div>
        <div class="video-player">
          <video src="" autoplay muted controls />
        </div>
      </div>
    </div>
    <div class="body">
      <div class="descriptions">
        <div v-for="item in descriptionsList" :key="item.text" class="descriptions-item">
          <div class="label">
            {{ item.text }}
          </div>
          <div v-if="item.text !== '当前浓度'" class="value" :title="detailInfo[item.value] || ''">
            {{ detailInfo[item.value] || '' }}
          </div>
          <div v-if="item.text === '当前浓度'" class="value">
            <span>0%LEL</span>
            <el-button size="small" style="margin-left: 10px;">
              更多
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 600px;
  background: #fff;
  position: relative;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  overflow: hidden;
  box-shadow: 0 0 12px rgb(0 0 0 / 12%);

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

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

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

      &:hover {
        cursor: pointer;
        color: #ccc;
      }
    }
  }

  .video {
    width: 100%;
    display: flex;
    padding: 10px;
    height: 240px;
    margin-bottom: 8px;

    .video-menu {
      width: 20%;
      height: 200px;
      padding-top: 30px;
      box-sizing: border-box;

      .menu-item {
        font-size: 18px;
        height: 24px;
        text-align: center;
        line-height: 24px;
        margin: 5px 0;

        &:hover {
          cursor: pointer;
        }
      }

      .active {
        background-color: rgba($color: #9ebfff, $alpha: 50%);
      }
    }

    .video-container {
      width: 79%;
      height: 200px;

      .video-control {
        display: flex;
        justify-content: center;
      }
    }

    .video-player {
      margin-top: 10px;

      video {
        width: 100%;
        height: 200px;
      }
    }
  }

  .body {
    width: 100%;

    .descriptions {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      padding: 6px 0;
      padding-left: 10px;

      .descriptions-item {
        width: 48%;
        margin: 4px 5px;
        box-sizing: border-box;
        display: flex;
        padding: 0 3px;

        .label-no {
          width: 28% !important;
        }

        .label {
          width: 30%;
          box-sizing: border-box;
          padding: 0 1px;
          font-size: 15px;
          text-align: justify;
          text-align-last: justify;
        }

        .value {
          padding-left: 5px;
          width: 68%;
          box-sizing: border-box;
          white-space: nowrap;
          font-size: 15px;
          color: #a39f9f;

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

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

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