<template>
  <div
    v-if="visible"
    class="plot-popup"
    :style="{ left: position.x + 'px', top: position.y + 'px' }"
  >
    <el-card shadow="always" class="popup-card" :body-style="{ padding: '10px', position: 'relative' }">
      
      <span class="close-btn" @click="$emit('close')">×</span>

      <div class="popup-header">
        <span class="title">小班号：{{ data.nyxbh || '无编号' }}</span>
        <el-tag size="small" :type="data.status === '1' ? 'success' : 'info'">
          {{ data.status === '1' ? '已采集' : '未完成' }}
        </el-tag>
      </div>

      <div class="info-grid">
        <div class="info-item">
          <span class="label">位置：</span>
          <span class="value">{{ data.zlwz || data.cun || '-' }}</span>
        </div>
        <div class="info-item">
          <span class="label">面积：</span>
          <span class="value">{{ Number(data.xbmj).toFixed(2) }} 亩</span>
        </div>
        <div class="info-item">
          <span class="label">优势树种：</span>
          <span class="value">{{ data.szzc || '-' }}</span> </div>
        <div class="info-item">
          <span class="label">林种/地类：</span>
          <span class="value">{{ data.linZhong || data.diLei || '-' }}</span>
        </div>
        <div class="info-item">
          <span class="label">采集人员：</span>
          <span class="value">{{ data.collectorName || data.collector || '-' }}</span>
        </div>
        <div class="info-item">
          <span class="label">更新时间：</span>
          <span class="value">{{ formatDate(data.updateTime || data.createTime) }}</span>
        </div>
      </div>

      <div class="media-container" v-if="mediaItems.length > 0">
        <el-carousel
          height="180px"
          indicator-position="none"
          :interval="5000"
          arrow="hover"
        >
          <el-carousel-item
            v-for="(item, index) in mediaItems"
            :key="index"
          >
            <template v-if="item.type === 'image'">
              <el-image 
                :src="item.src" 
                class="media-content" 
                fit="cover"
                :preview-src-list="allImages"
                :initial-index="item.imgIndex"
                preview-teleported
                @click.stop
              />
            </template>
            <template v-else-if="item.type === 'video'">
              <video controls class="media-content">
                <source :src="item.src" type="video/mp4" />
                您的浏览器不支持视频播放。
              </video>
            </template>
          </el-carousel-item>
        </el-carousel>
        <div class="media-count">{{ mediaItems.length }} 个附件</div>
      </div>
      <div v-else class="no-media">
        暂无现场照片/视频
      </div>

      <div class="popup-actions">
        <el-button type="primary" size="small" plain @click="$emit('enter-sample')">
          查看样地详情
        </el-button>
        <el-button type="success" size="small" plain @click="$emit('enter-side')">
          四旁树
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { computed } from "vue";
// 不需要引入 ElIcon 或 Close，直接用原生 CSS
import { ElCard, ElButton, ElCarousel, ElCarouselItem, ElTag, ElImage } from "element-plus";

const props = defineProps({
  visible: Boolean,
  data: { type: Object, default: () => ({}) },
  position: { type: Object, default: () => ({ x: 0, y: 0 }) },
});

defineEmits(['enter-sample', 'enter-side', 'close']);

// 格式化日期，只显示 YYYY-MM-DD
const formatDate = (dateStr) => {
  if (!dateStr) return '-';
  return dateStr.split(' ')[0];
};

// 整合图片和视频，用于轮播展示
const mediaItems = computed(() => {
  const imgs = Array.isArray(props.data.images) ? props.data.images : [];
  const vids = Array.isArray(props.data.videos) ? props.data.videos : [];
  
  let imgCounter = 0;

  return [
    ...imgs.map((src) => ({ type: "image", src, imgIndex: imgCounter++ })),
    ...vids.map((src) => ({ type: "video", src })),
  ];
});

// 单独提取所有图片用于大图预览
const allImages = computed(() => {
  return Array.isArray(props.data.images) ? props.data.images : [];
});
</script>

<style scoped>
.plot-popup {
  position: absolute;
  z-index: 2000;
  /* 调整弹窗位置锚点，使其位于点击点的上方居中 */
  transform: translate(-50%, -100%);
  margin-top: -15px; /* 留一点间距，别挡住点击点 */
  pointer-events: auto; /* 确保弹窗可交互 */
}

/* 加上小三角箭头 */
.plot-popup::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
}

.popup-card {
  width: 300px; /* 稍微加宽一点 */
  border-radius: 8px;
  overflow: visible; /* 允许箭头显示 */
}

/* ✅ 2. 新增：关闭按钮样式 */
.close-btn {
  position: absolute;
  top: 6px;       /* 距离顶部 */
  right: 12px;    /* 距离右边 */
  font-size: 24px; /* 字体大一点，方便点击 */
  font-weight: 300; /* 细一点更好看 */
  color: #909399;
  cursor: pointer;
  z-index: 100;
  line-height: 1; 
  transition: color 0.2s;
  user-select: none;
}

.close-btn:hover {
  color: #f56c6c; /* 悬停变红 */
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
  /* ✅ 给标题栏右侧留出空间，防止标题文字太长挡住关闭按钮 */
  padding-right: 25px; 
}

.title {
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

/* 属性网格布局：两列显示 */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  font-size: 12px;
  margin-bottom: 10px;
}

.info-item {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
}

.info-item .label {
  color: #909399;
  flex-shrink: 0;
}

.info-item .value {
  color: #303133;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 媒体区域 */
.media-container {
  position: relative;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
}

.media-content {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持比例 */
  background-color: #000;
  display: block;
}

.media-count {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
}

.no-media {
  height: 60px;
  background: #f5f7fa;
  color: #c0c4cc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border-radius: 4px;
}

.popup-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed #eee;
}

.popup-actions .el-button {
  flex: 1;
}
</style>