<!-- 查看详情弹窗 -->
<template>
  <el-dialog
    v-model="visible"
    title="IP详情"
    width="800px"
    :close-on-click-modal="false"
    :append-to-body="true"
  >
    <el-descriptions :column="2" border>
      <el-descriptions-item label="IP序号">{{ detail.id }}</el-descriptions-item>
      <el-descriptions-item label="IP标题">{{ detail.name }}</el-descriptions-item>
      <el-descriptions-item label="发布时间">{{ detail.time }}</el-descriptions-item>
      <el-descriptions-item label="类型">{{ detail.type }}</el-descriptions-item>
      <el-descriptions-item label="来源">{{ detail.source }}</el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag type="success" v-if="detail.status === 1">已启用</el-tag>
        <el-tag type="danger" v-else>已禁用</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="浏览量">{{ detail.views }}</el-descriptions-item>
      <el-descriptions-item label="点赞数">{{ detail.likes }}</el-descriptions-item>
      <el-descriptions-item label="分享次数">{{ detail.shares }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ detail.createTime }}</el-descriptions-item>
      <el-descriptions-item label="IP简介" :span="2">
        {{ detail.description || '暂无简介' }}
      </el-descriptions-item>
    </el-descriptions>

    <template #footer>
      <el-row justify="center">
        <el-button @click="visible = false">关闭</el-button>
        <el-button type="primary" @click="handleShare">分享</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

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

const emit = defineEmits(['share']);

// 弹窗可见性
const visible = ref(false);

// 详情数据
const detail = reactive({
  id: '',
  name: '',
  time: '',
  type: '',
  source: '',
  status: 0,
  views: 0,
  likes: 0,
  shares: 0,
  createTime: '',
  description: ''
});

// 打开弹窗
const openDialog = (row) => {
  visible.value = true;
  // 复制行数据到详情对象
  Object.assign(detail, row);
};

// 处理分享
const handleShare = () => {
  emit('share', detail);
  visible.value = false;
};

// 向外暴露方法
defineExpose({
  openDialog
});
</script>

<style lang="scss" scoped>
:deep(.el-dialog__body) {
  padding: 20px;
}
</style>
