<template>
  <div class="timeline-wrapper">
    <button class="arrow left" :disabled="index <= 0" @click="index--">
      {{ '<' }} </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']" @click="$emit('click-card', item)">
              <div style="justify-content: space-between;display: flex;width: 300px;">
                <div class="tag">{{ item.tag }}</div>
                <img :src="`/icon/${item.unit}.png`" class="icon"></img>

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

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

              <div class="content">{{ item.content }}</div>
            </div>
          </div>
        </div>
        <button class="arrow right" :disabled="index >= total - 5" @click="index++">
          {{ '>' }}
        </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.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: 1500px;
  overflow: auto;

}

.arrow {

  width: 24px;
  height: 48px;
  font-size: 24px;
  border-color: #E7F3FF;
  border: 0;
  background: #E7F3FF;
  cursor: pointer;
  z-index: 10;
  color: #3E84D1;
}

.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: 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: 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;
}
</style>