<!-- PersonNewsCard.vue -->
<template>
  <div class="person-news-card">
    <el-carousel
      ref="carouselRef"
      height="354px"
      :autoplay="true"
      :interval="3000"
      arrow="never"
      indicator-position="none"
      @change="handleCarouselChange"
    >
      <!-- <el-carousel-item v-for="(bill, billIndex) in hotBillList" :key="billIndex"> -->
        <!-- 左侧：头像 -->
       
        <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>
      <!-- </el-carousel-item> -->
    </el-carousel>
  </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;
  overflow: hidden;
}

:deep(.el-timeline-item) {
  padding-bottom: 4px;
}

:deep(.el-timeline-item:last-child) {
  padding-bottom: 0;
}

:deep(.el-timeline-item:last-child .el-timeline-item__wrapper) {
  padding-bottom: 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;

}

:deep(.el-timeline-item:last-child .el-timeline-item__tail) {
  visibility: hidden;
  display: none;
}
</style>
