<template>
  <div
    v-if="visible"
    class="plot-popup"
    :style="{ left: position.x + 'px', top: position.y + 'px' }"
  >
    <el-card shadow="always" class="popup-card">
      <h4>{{ data.name }}</h4>
      <p>类型：{{ data.type }}</p>
      <p>面积：{{ data.area }} ha</p>
      <p>采集人员：{{ data.collector }}</p>
      <p>优势树种：{{ data.species }}</p>

      <!-- 图片与视频轮播 -->
      <el-carousel
        height="220px"
        indicator-position="outside"
        :interval="4000"
        arrow="always"
        v-if="mediaItems.length"
      >
        <el-carousel-item
          v-for="(item, index) in mediaItems"
          :key="index"
          class="carousel-item"
        >
          <template v-if="item.type === 'image'">
            <img :src="item.src" class="media" />
          </template>
          <template v-else-if="item.type === 'video'">
            <video controls class="media">
              <source :src="item.src" type="video/mp4" />
            </video>
          </template>
        </el-carousel-item>
      </el-carousel>

      <!-- 操作按钮 -->
      <div class="popup-actions">
        <el-button type="primary" size="small" @click="$emit('enter-sample')">
          进入样地
        </el-button>
        <el-button type="success" size="small" @click="$emit('enter-side')">
          进入四旁树
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { ElCard, ElButton, ElCarousel, ElCarouselItem } from "element-plus";
import "element-plus/es/components/card/style/css";
import "element-plus/es/components/button/style/css";
import "element-plus/es/components/carousel/style/css";
import "element-plus/es/components/carousel-item/style/css";

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

const mediaItems = computed(() => {
  const imgs = Array.isArray(props.data.images) ? props.data.images : [];
  const vids = Array.isArray(props.data.videos) ? props.data.videos : [];
  return [
    ...imgs.map((src) => ({ type: "image", src })),
    ...vids.map((src) => ({ type: "video", src })),
  ];
});
</script>

<style scoped>
.plot-popup {
  position: absolute;
  z-index: 999;
  transform: translate(-50%, -100%);
}

.popup-card {
  width: 280px;
  font-size: 13px;
}

.media {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
}

.popup-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}
</style>
