<template>
  <div class="timeline-wrapper">
    <button class="arrow left" :disabled="index <= 0" @click="index--">
      <img src="@/assets/icons/card-btn-left.png" alt="">
    </button>
        <div class="timeline-box">
          <div class="line" style="width:100vw ;" />
          <!-- 一次性渲染全部节点 -->
          <div v-for="(item, i) in showList" :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']" @click="$emit('click-card', item)">
              <div style="justify-content: space-between;display: flex;width: 300px;">
                <div class="tag">{{ item.eventStrategy }}</div>
                <img :src="item.eventCountryImg" class="icon"
                  style="border-radius: 14px;height: 28px;width: 28px;;"></img>

              </div>
              <div class="title" :style="{

              }">{{ item.eventName }}</div>
              <div class="time">{{ item.eventDate }}</div>
              <!-- <div class="title" :style="{
            color: item.unit === '中国' ? ' #CF4F51' : ''
          }">{{ item.title }}</div>
          <div class="time">{{ item.time }}</div> -->

              <div class="content">{{ item.eventDesc }}</div>
            </div>
          </div>
        </div>
        <button class="arrow right" :disabled="index >= total - 5" @click="index++">
               <img src="@/assets/icons/card-btn-right.png" alt="">
        </button>
  </div>
</template>

<script>
export default {
	name: "TimeLine",
	props: {
		data: { type: Array, required: true },
		textKey: { type: String, default: "text" },
		idKey: { type: String, default: "id" }
	},
	data() {
		return { index: 0 };
	},
	computed: {
		total() {
			return this.data.length;
		},
		showList() {
			return this.data.slice(this.index, this.index + 5);
		},
		flip() {
			return this.index % 2 === 1;
		}
	},
	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) {
			// let pos = ``
			// if (i === 0) {
			//   pos = 0
			// } else {
			//   this.linePos(this.data[i - 1]) !== this.linePos(this.data[i]) ? pos = { left: `${(i * 270) - 125}px` } : pos = { left: `${(i * 270)}px` }

			// }
			return { left: `${i * 327}px` };
			// return pos;
		},
		/* 卡片上下位置：unit=0 -> 下侧，其余 -> 上侧 */
		cardPos(item) {
			return item.eventType === "反制措施" ? "down" : "up";
		},
		/* 延伸线方向 = 卡片方向 */
		linePos(item) {
			return this.cardPos(item);
		}
	}
};
</script>

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

.arrow {
	width: 24px;
	height: 48px;
	font-size: 24px;
	border-color: #e7f3ff;
	border: 0;
	background: #e7f3ff;
	cursor: pointer;
	z-index: 10;
	color: #3e84d1;
  padding: 0 !important;
  img{
    width: 100%;
    height: 100%;
  }
}

.arrow:disabled {
	color: #c0c4cc;
	cursor: not-allowed;
}

.left {
	left: 0;
	border-radius: 0px 4px 4px 0px;
}

.right {
	right: 0;
	border-radius: 4px 0px 0px 4px;
}

.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: 10px;
	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: 240px;
}

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

.card {
	position: absolute;
	/* 容器 28 */
	width: 327px;
	height: 270px;
	padding-left: 27px;
	font-size: 14px;
	cursor: pointer;
}

.card.up {
	bottom: 0px;
}

.card.down {
	top: 10px;
	padding-top: 50px;
}

.icon {
	width: 28px;
	height: 28px;
}

.title {
	/* 美国进一步收紧对华AI芯片出口限制 */
	width: 300px;

	color: rgba(59, 65, 75, 1);

	font-family: Microsoft YaHei;
	font-style: Bold;
	font-size: 20px;
	font-weight: 700;
	line-height: 26px;
	letter-spacing: 0px;
	text-align: justify;
}

.tag {
	/* 容器 1626 */
	width: 120px;
	height: 28px;
	/* 自动布局 */
	/* display: flex; */
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 2px 8px 2px 8px;

	border-radius: 4px;
	background: rgba(231, 243, 255, 1);
	color: rgba(5, 95, 194, 1);

	font-family: Microsoft YaHei;
	font-style: Regular;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0px;
	text-align: center;
	margin-bottom: 4px;
}

.tag1 {
	/* 容器 1626 */
	width: 120px;
	height: 28px;
	/* 自动布局 */
	/* display: flex; */
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 2px 8px 2px 8px;

	border-radius: 4px;
	background: rgba(206, 79, 81, 0.1);

	color: rgba(206, 79, 81, 1);

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

.time {
	color: rgba(95, 101, 108, 1);

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

.content {
	width: 300px;
	height: 150px;
	color: rgba(95, 101, 108, 1);

	font-family: Microsoft YaHei;
	font-style: Regular;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0px;
	text-align: justify;
	width: 300px;
	/* 设置一个固定的宽度 */
	height: 100px;
	/* 设置一个固定的高度，确保只显示 5 行 */
	font-size: 16px;
	/* 设置字体大小 */
	line-height: 20px;
	/* 设置行高 */
	overflow: hidden;
	/* 隐藏超出部分 */
	display: -webkit-box;
	/* 使用 Webkit 的 box 模型 */
	-webkit-line-clamp: 3;
	/* 限制为 5 行 */
	-webkit-box-orient: vertical;
	/* 垂直排列内容 */
	text-overflow: ellipsis;
	/* 超出部分显示省略号 */
}
</style>