<template>
  <div class="timeline-wrapper">
    <button class="year-box">2025</button>

    <div class="timeline-box">
      <div class="line" style="width:100vw ;" />
      <!-- 一次性渲染全部节点 -->
      <div v-for="(item, i) in data" :key="item[idKey]" class="node" :style="leftStyle(i)">
        <!-- 圆环 -->
        <div class="dot" :class="linePos(item)" :style="{ '--i': item.unit === '中国' ? ' #E29697' : '#69A0DA' }" />

        <div class="dot">
          <div class="big-circle" :style="{
            backgroundColor: item.unit === '中国' ? ' #CF4F51' : '#CDDFF3'
          }">
            <div class="small-circle" :style="{
              backgroundColor: item.unit === '中国' ? ' #E29697' : '#69A0DA'
            }"></div>
          </div>
        </div>

        <!-- 卡片 -->
        <div class="card" :class="[cardPos(item), 'right-side']" :style="widthStyle()"
          @click="$emit('click-card', item)">
          <img :src="`/icon/${item.unit}.png`" class="icon"></img>
          <div class="title">{{ item.time }}</div>
          <div class="title" :style="{
            color: item.unit === '中国' ? ' #CF4F51' : ''
          }">{{ item.title }}</div>
          <div class="content">{{ item.content }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TimeLine',
  props: {
    data: { type: Array, required: true },
    textKey: { type: String, default: 'text' },
    idKey: { type: String, default: 'id' }
  },
  methods: {
    widthStyle() {
      console.log(`100 / ${this.data.length - 1}}vw`)
      let w = 100 / (this.data.length - 1)
      return { width: ` calc(${w}vw - 20px)` };
    },
    /* 水平位置：按索引均匀分布 */
    leftStyle(i) {
      return { left: `${(i * 100) / (this.data.length - 1)}vw` };
    },
    /* 卡片上下位置：unit=0 -> 下侧，其余 -> 上侧 */
    cardPos(item) {
      return item.unit === '中国' ? 'down' : 'up';
    },
    /* 延伸线方向 = 卡片方向 */
    linePos(item) {
      return this.cardPos(item);
    }
  }
};
</script>

<style scoped>
/* 以下样式完全沿用你已有的，无需改动 */
.timeline-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 40px;
  width: calc(100vw - 300px);
  overflow: auto;

}

.year-box {
  width: 80px;
  height: 36px;
  border-radius: 4px;
  background: #055fc2;
  color: #fff;
  font-size: 18px;
  border: none
}

.timeline-box {
  flex: 1;
  position: relative;
  margin-left: 15px;

}

.line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 6px;
  background-image: url("@/assets/images/bg/timeLine-bg.jpg");


  transform: translateY(-50%);
  background-size: auto 100%;
}

.node {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2
}

.dot {
  /* 任意尺寸/居中方式随意 */
  margin: 0 auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  /* 仅示例 */
}

.big-circle {
  width: 14px;
  height: 14px;
  border-radius: 50%;

  /* 大圆颜色 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.small-circle {
  width: 8px;
  /* 小圆直径 */
  height: 8px;
  border-radius: 50%;

  /* 小圆颜色 */
}

/* .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid #409eff;
  background: #fff;
  margin: 0 auto;
  position: relative
} */

.dot::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-1px);
  width: 1px;
  /* background: #409eff */
  background: var(--i);
}

.dot.up::after {
  bottom: 100%;
  height: 180px
}

.dot.down::after {
  top: 100%;
  height: 180px
}

.card {
  position: absolute;
  height: 180px;
  padding: 8px 20px;
  font-size: 14px;
  cursor: pointer
}

.card.up {
  bottom: 20px
}

.card.down {
  top: 20px;

}

.icon {
  margin-left: -22px;
}

.title {
  color: #055fc2;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px
}

.content {
  color: #5f656c;
  font-size: 16px;
  line-height: 24px
}
</style>