<template>
  <teleport to="body">
    <transition name="fade">
      <div 
        v-if="isVisible" 
        class="im-hover-card"
        :style="cardStyle"
        @mouseenter="clearTimer"
        @mouseleave="hide"
      >
        <div class="card-inner">
          <div class="user-profile">
            <div class="info-text">
              <h4 class="nickname">{{ currentUser.name }}</h4>
              <p class="detail-item">
                <span class="label">微信号：</span>
                <span class="value">{{ currentUser.id }}</span>
              </p>
              <p class="detail-item">
                <span class="label">地　区：</span>
                <span class="value">{{ currentUser.region || '未知' }}</span>
              </p>
            </div>
            <img :src="currentUser.avatar" class="avatar-square" />
          </div>

          <div class="user-bio">
            <p class="bio-text">{{ currentUser.bio || '暂无签名' }}</p>
          </div>

          <div class="card-footer">
            <button class="action-btn primary" @click="onChat">发消息</button>
            <button v-if="!currentUser.isFriend" class="action-btn secondary" @click="onAdd">添加好友</button>
          </div>
        </div>
      </div>
    </transition>
  </teleport>
</template>

<script setup>
import { ref, reactive } from 'vue';

const isVisible = ref(false);
const currentUser = ref({});
const cardStyle = reactive({
  position: 'fixed',
  top: '0px',
  left: '0px'
});

let timer = null;

const show = (el, data) => {
  clearTimer();
  currentUser.value = data;
  
  const rect = el.getBoundingClientRect();
  // IM 习惯：通常在头像右侧或下方弹出
  // 这里设置为在头像中心水平对齐，下方弹出
  cardStyle.top = `${rect.bottom + 8}px`;
  cardStyle.left = `${rect.left}px`;
  
  isVisible.value = true;
};

const hide = () => {
  timer = setTimeout(() => {
    isVisible.value = false;
  }, 300);
};

const clearTimer = () => {
  if (timer) clearTimeout(timer);
};

const onAdd = () => {
  console.log('申请添加好友:', currentUser.value.id);
  // 这里写你的逻辑
};

const onChat = () => {
  console.log('跳转聊天窗口:', currentUser.value.id);
  isVisible.value = false;
};

defineExpose({ show, hide });
</script>

<style scoped>
.im-hover-card {
  z-index: 9999;
  width: 280px;
  background: #ffffff;
  border-radius: 4px; /* IM 通常是小圆角或直角 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid #ebeef5;
  color: #333;
  font-family: "Microsoft YaHei", sans-serif;
}

.card-inner {
  padding: 20px;
}

/* 头部布局：文字在左，头像在右（典型微信名片风） */
.user-profile {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.nickname {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 600;
  color: #000;
}

.detail-item {
  margin: 4px 0;
  font-size: 13px;
  display: flex;
}

.detail-item .label {
  color: #999;
  width: 55px;
}

.detail-item .value {
  color: #555;
}

.avatar-square {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  object-fit: cover;
}

/* 签名区 */
.user-bio {
  padding: 15px 0;
  border-top: 1px solid #f2f2f2;
  margin-bottom: 10px;
}

.bio-text {
  margin: 0;
  font-size: 13px;
  color: #888;
  line-height: 1.6;
}

/* 底部按钮：去掉花哨渐变，改用纯色或文字链接感 */
.card-footer {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding-top: 10px;
  border-top: 1px solid #f2f2f2;
}

.action-btn {
  background: transparent;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 12px;
  transition: color 0.2s;
}

.action-btn.primary {
  color: #576b95; /* 经典的微信蓝/链接色 */
}

.action-btn.primary:hover {
  color: #3e4d6d;
}

.action-btn.secondary {
  color: #576b95;
}

/* 动画：简单的淡入 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.2s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>