<template>
    <div
      v-if="visible"
      class="sample-popup"
      :style="{ left: position.x + 'px', top: position.y + 'px' }"
    >
      <el-card shadow="always" class="popup-card">
        <!-- 🟢 样地信息 -->
        <template v-if="!selectedTree">
          <h3 class="plot-title">{{ data.name }}</h3>
          <p>面积：{{ data.area }} ha</p>
          <p>采集人员：{{ data.collector }}</p>
          <p>样木数量：{{ trees.length }}</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>
  
          <!-- 🌳 样木列表 -->
          <h4 class="section-title">样木列表</h4>
          <ul class="tree-list">
            <li
              v-for="(tree, i) in trees"
              :key="i"
              class="tree-item"
              @click="selectTree(tree)"
            >
              <div class="tree-info">
                <span class="tree-id">#{{ tree.id }}</span>
                <span class="tree-species">{{ tree.species }}</span>
              </div>
              <el-icon class="tree-arrow">
                <i class="el-icon-arrow-right" />
              </el-icon>
            </li>
          </ul>
        </template>
  
        <!-- 🟣 样木详情 -->
        <template v-else>
          <div class="tree-header">
            <el-button
              type="primary"
              link
              size="small"
              icon="el-icon-arrow-left"
              @click="selectedTree = null"
            >
              返回样地
            </el-button>
            <h3>样木 {{ selectedTree.id }}</h3>
          </div>
  
          <p>树种：{{ selectedTree.species }}</p>
          <p>胸径：{{ selectedTree.dbh }} cm</p>
          <p>树高：{{ selectedTree.height }} m</p>
  
          <el-carousel
            height="220px"
            indicator-position="outside"
            :interval="4000"
            arrow="always"
            v-if="treeMedia.length"
          >
            <el-carousel-item
              v-for="(item, index) in treeMedia"
              :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>
        </template>
      </el-card>
    </div>
  </template>
  
  <script setup>
import { ref, computed } from "vue";
import {
  ElCard,
  ElButton,
  ElCarousel,
  ElCarouselItem,
  ElIcon,
} 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";
import "element-plus/es/components/icon/style/css";

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

const selectedTree = ref(null);

// 样地内样木列表
const trees = computed(() => props.data.trees || []);

// 样地媒体
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 })),
  ];
});

// 当前选中样木媒体
const treeMedia = computed(() => {
  if (!selectedTree.value) return [];
  const imgs = selectedTree.value.images || [];
  const vids = selectedTree.value.videos || [];
  return [
    ...imgs.map((src) => ({ type: "image", src })),
    ...vids.map((src) => ({ type: "video", src })),
  ];
});

function selectTree(tree) {
  selectedTree.value = tree;
}
</script>
  
  <style scoped>
.sample-popup {
  position: absolute;
  z-index: 999;
  transform: translate(-50%, -100%);
}

.popup-card {
  width: 300px;
  font-size: 13px;
  border-radius: 10px;
  overflow: hidden;
}

.plot-title {
  font-size: 16px;
  font-weight: bold;
  color: #2e7d32;
}

.section-title {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #1976d2;
}

/* === 样木列表 === */
.tree-list {
  list-style: none;
  padding: 0;
  margin: 5px 0;
  max-height: 130px;
  overflow-y: auto;
}

.tree-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #e3f2fd;
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.tree-item:hover {
  background: #bbdefb;
  transform: translateY(-1px);
}

.tree-info {
  display: flex;
  flex-direction: column;
}

.tree-id {
  font-weight: bold;
  color: #1565c0;
}

.tree-species {
  font-size: 12px;
  color: #444;
}

.tree-arrow {
  color: #1565c0;
}

/* 滚动条优化 */
.tree-list::-webkit-scrollbar {
  width: 6px;
}
.tree-list::-webkit-scrollbar-thumb {
  background-color: #90caf9;
  border-radius: 3px;
}
.tree-list::-webkit-scrollbar-thumb:hover {
  background-color: #64b5f6;
}

/* 图片与视频 */
.media {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
}

/* 样木详情页头部 */
.tree-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
  