<!-- PersonNewsCard.vue -->
<template>
  <div class="person-news-card">
    <!-- 左侧：头像 -->
    <div class="avatar">
      <img :src="person.image_url" alt="人物头像" />
    </div>

    <!-- 事件列表 -->
    <div class="events">
      <!-- 头部区域 -->
      <div class="header">
        <!-- 右侧：信息 -->
        <div class="info" style="display: flex; width: 100%; justify-content: space-between">
          <div>
            <h2>{{ person.name }}</h2>
            <p class="title">{{ person.title }}</p>
          </div>

          <div class="source-tag">{{ source }}</div>
        </div>
      </div>
      <div class="line"></div>

      <div style="height: 289px; width: 688px">
        <el-timeline style="margin-top: 14px">
          <el-timeline-item placement="top" v-for="(activity, index) in events" :key="index" type="primary"
            :hollow="true">
            <template #dot>
              <div style="
									display: flex;
									justify-content: space-between;
									width: 688px;
									text-align: center;
									align-items: center;
									margin-bottom: 12px;
								">
                <div style="display: flex">
                  <img src="../assets/images/dot1.png" alt="" style="width: 10px; height: 10px" />
                  <div style="
											margin-left: 16px;
											margin-top: -6px;
											color: rgba(59, 65, 75, 1);
											font-family: Microsoft YaHei;
											font-size: 16px;
											font-weight: 700;
											letter-spacing: 1px;
											text-align: left;
										">
                    {{ activity.date }}
                  </div>
                </div>

                <img src="../assets/images/dot2.png" alt="" style="width: 20px; height: 18px" />
              </div>
            </template>
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
      </div>

      <!-- <div v-for="(event, index) in events" :key="index" class="event-item">
        <div class="event-date">{{ event.date }}</div>
        <div class="event-content">
          <span class="icon">{{ event.icon }}</span>
          <span>{{ event.content }}</span>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
// 导入数据
import data from "../json/personUpdates"; // 假设你把 JSON 存在 data.json 文件中

export default {
  name: "PersonNewsCard",
  data() {
    return {
      person: data.person,
      events: data.events,
      source: data.source
    };
  }
};
</script>

<style scoped>
.person-news-card {
  width: 1016px;
  height: 354px;
  display: flex;
}

.header {
  display: flex;
  height: 73px;
}

.avatar {
  /* 容器 552 */
  width: 266px;
  height: 352px;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info h2 {
  color: rgba(5, 95, 194, 1);
  margin: 0;
  font-family: Microsoft YaHei;
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: 0px;
  text-align: left;
}

.info .title {
  color: rgba(59, 65, 75, 1);

  font-family: Microsoft YaHei;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0px;
  text-align: left;
  margin-top: 4px;
}

.source-tag {
  /* 数据展示/Tag标签/亮色/蓝 */
  width: 100px;
  height: 24px;
  /* 自动布局 */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  padding: 1px 6px 1px 6px;
  box-sizing: border-box;
  border: 1px solid rgba(135, 232, 222, 1);
  border-radius: 4px;
  background: rgba(230, 255, 251, 1);
  color: rgba(19, 168, 168, 1);

  font-family: Microsoft YaHei;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: left;
}

.line {
  /* 矩形 277 */
  width: 686px;
  height: 1px;
  background: rgba(234, 236, 238, 1);
}

.events {
  margin-left: 24px;
  width: 710px;
}

.event-item {
  margin-bottom: 16px;
  padding: 12px;
  background-color: #fff;
  border-left: 4px solid #007bff;
  border-radius: 6px;
  position: relative;
}

.event-date {
  font-size: 0.85em;
  color: #999;
  margin-bottom: 8px;
  display: inline-block;
}

.event-content {
  display: flex;
  align-items: flex-start;
  line-height: 1.5;
}

.event-content .icon {
  margin-right: 8px;
  font-size: 1.2em;
  color: #ff6b00;
  vertical-align: middle;
}

.event-content span {
  color: #333;
  font-size: 0.95em;
}

:deep(.el-timeline) {
  max-width: 688px !important;
  padding: 0;
}

:deep(.el-timeline-item__wrapper) {
  padding-left: 16px;
}

:deep(.el-timeline-item__timestamp.is-top) {
  margin-bottom: 0;
  padding-top: 0;
  height: 12px;
}

:deep(.el-timeline-item__content) {
  margin-left: 10px;
}

:deep(.el-timeline-item__wrapper) {
  padding-top: 6px;
  top: 0;
  color: rgba(59, 65, 75, 1);

  font-family: Microsoft YaHei;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0px;
  text-align: justify;

}
</style>
