<template>
  <Teleport to="body">
    <div v-if="visible" class="feature-popup-overlay" @click.self="close">
      <div class="feature-popup" :style="{ top: y + 'px', left: x + 'px' }">
        <div class="popup-header">
          <span class="popup-title">{{ title }}</span>
          <el-icon class="popup-close" @click="close"><Close /></el-icon>
        </div>
        <div class="popup-body">
          <div v-for="(v, k) in attributes" :key="k" class="popup-row">
            <span class="popup-label">{{ k }}</span>
            <span class="popup-value">{{ formatValue(v) }}</span>
          </div>
          <div v-if="!attributes || !Object.keys(attributes).length" class="popup-empty">
            无详细数据
          </div>
        </div>
        <div class="popup-actions" v-if="actions && actions.length">
          <el-button v-for="act in actions" :key="act.label" size="small"
            @click="act.handler(attributes)">{{ act.label }}</el-button>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)
const title = ref('')
const attributes = ref({})
const actions = ref([])
const x = ref(200)
const y = ref(100)

const show = (opts) => {
  title.value = opts.title || '要素信息'
  attributes.value = opts.attributes || {}
  actions.value = opts.actions || []
  x.value = Math.min(opts.x || 200, window.innerWidth - 380)
  y.value = Math.min(opts.y || 100, window.innerHeight - 400)
  visible.value = true
}

const close = () => { visible.value = false }

const formatValue = (v) => {
  if (v === null || v === undefined) return '-'
  if (typeof v === 'number') return v.toFixed(v % 1 ? 6 : 0)
  return String(v)
}

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

<style scoped>
.feature-popup-overlay { position: fixed; inset: 0; z-index: 1000; }
.feature-popup {
  position: absolute; width: 360px; max-height: 500px;
  background: #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.25);
  display: flex; flex-direction: column; overflow: hidden;
}
.popup-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; background: #409EFF; color: #fff; font-size: 14px; font-weight: 500;
}
.popup-close { cursor: pointer; }
.popup-body { flex: 1; overflow-y: auto; padding: 8px 14px; }
.popup-row {
  display: flex; justify-content: space-between; padding: 4px 0;
  border-bottom: 1px dashed #eee; font-size: 13px;
}
.popup-label { color: #888; min-width: 80px; }
.popup-value { color: #333; text-align: right; word-break: break-all; }
.popup-empty { color: #999; text-align: center; padding: 20px; }
.popup-actions { padding: 8px 14px; border-top: 1px solid #eee; display: flex; gap: 8px; }
</style>
