<template>
  <div class="history">
    <h1>
      {{ timeList[activeTimeId] }}
    </h1>
    <menu>
      <img
        class="circle-no-light"
        src="@/assets/images/circle-no-light.png"
        alt=""
        draggable="false"
      >
      <img
        class="circle"
        src="@/assets/images/circle.png"
        alt=""
        draggable="false"
      >
      <ul>
        <li
          v-for="(time, idx) in timeList"
          :key="idx"
          :class="{active: activeTimeId === idx}"
          @click="activeTimeId = idx"
        >
          <div
            class="point"
          />
          {{ time }}
        </li>
      </ul>
    </menu>

    <article>
      <h2>{{ timeList[activeTimeId] }}</h2>
      <img
        class="splitter"
        src="@/assets/images/splitter-history-top.png"
        alt=""
        draggable="false"
      >
      <div class="txt-wrapper">
        <div
          class="txt"
        >
          skjflksklflk;sdj喀什酱豆腐感受到了看过深刻的JFK流口水
          史蒂夫罗杰斯大量进口
          史蒂夫罗杰斯大量进口
          史蒂夫罗杰斯大量进口
          史蒂夫罗杰斯大量进口
          史蒂夫罗杰斯大量进口
          史蒂夫罗杰斯大量进口
          史蒂夫罗杰斯大量进口
          史蒂夫罗杰斯大量进口
          史蒂夫罗杰斯大量进口
          史蒂夫罗杰斯大量进口
          史蒂夫罗杰斯大量进口
          史蒂夫罗杰斯大量进口          史蒂夫罗杰斯大量进口
          史蒂夫罗杰斯大量进口
          史蒂夫罗杰斯大量进口
          史蒂夫罗杰斯大量进口
          史蒂夫罗杰斯大量进口
        </div>
        <button class="left" />
        <button class="right" />
      </div>
      <img
        class="splitter"
        src="@/assets/images/splitter-history-bottom.png"
        alt=""
        draggable="false"
      >
    </article>
  </div>
</template>

<script>
import {
  ref,
  reactive,
} from 'vue'

export default {
  name: 'HistoryView',
  setup () {
    const timeList = reactive([
      '开埠通商',
      '曲折发展',
      '步履维艰',
      '筚路蓝缕',
      '改革开放',
      '战略负重',
      '创新驱动',
      '追梦未来',
    ])
    const activeTimeId = ref(0)

    return {
      timeList,
      activeTimeId,
    }
  }
}
</script>

<style lang="less" scoped>
.history {
  >h1 {
    position: absolute;
    top: 51px;
    left: 81px;
    max-width: 50%;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    font-size: 48px;
    font-family: Source Han Sans CN-Heavy, Source Han Sans CN;
    font-weight: 800;
    color: #FFFFFF;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 1px solid rgba(217, 217, 217, 0.2);
    border-bottom: 1px solid rgba(217, 217, 217, 0.2);
  }
  >menu {
    position: absolute;
    top: 214px;
    left: 0;
    >img.circle-no-light {
      position: absolute;
      top: -20%;
      left: -60px;
      height: 130%;
      pointer-events: none;
    }
    >img.circle {
      position: absolute;
      top: -20%;
      left: -60px;
      height: 130%;
      pointer-events: none;
      z-index: 1;
    }
    >ul {
      >li {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 50px;
        background: linear-gradient(270deg, #3A454F 0%, rgba(22,28,33,0) 100%);
        // border-radius: 3px;
        border: 1px solid;
        border-left: none;
        border-image: linear-gradient(270deg, rgba(78, 96, 112, 1), rgba(78, 96, 112, 0)) 1 1;
        margin-bottom: 15px;
        font-size: 20px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.5);
        // backdrop-filter: blur(5px); // 会导致产生层叠上下文！！！使得圆点无法在弧线上层！！！
        padding-right: 14px;
        cursor: pointer;
        position: relative;
        >.point {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 8px;
          height: 8px;
          border-radius: 4px;
          background: #D1DCE5;
          box-shadow: 0px 0px 12px 0px #6D9DC6, 0px 0px 8px 0px #6D9DC6;
          z-index: 2;
        }
        &:hover {
          background: linear-gradient(270deg, #B0A179 0%, rgba(255,209,91,0) 100%);
          border-image: linear-gradient(270deg, rgba(176, 161, 121, 1), rgba(176, 161, 121, 0)) 1 1;
        }
        &.active {
          font-size: 22px;
          font-family: Source Han Sans CN-Bold, Source Han Sans CN;
          font-weight: bold;
          color: #FFFFFF;
          text-shadow: 0px 0px 10px #8B7C54;
          >.point {
            background: #FFFFFF;
            box-shadow: 0px 0px 12px 0px #FFD15B, 0px 0px 8px 0px #FFD15B, 0px 0px 10px 0px #FFD15B, 0px 0px 5px 0px #FFD15B;
          }
        }
        &:nth-of-type(1) {
          width: calc(170px + 25px * 1);
          >.point {
            margin-right: calc(48px + 80px);
          }
        }
        &:nth-of-type(2) {
          width: calc(170px + 25px * 2);
          >.point {
            margin-right: calc(43px + 80px);
          }
        }
        &:nth-of-type(3) {
          width: calc(170px + 25px * 3);
          >.point {
            margin-right: calc(50px + 80px);
          }
        }
        &:nth-of-type(4) {
          width: calc(170px + 25px * 4);
          >.point {
            margin-right: calc(65px + 80px);
          }
        }
        &:nth-of-type(5) {
          width: calc(170px + 25px * 3);
          >.point {
            margin-right: calc(40px + 80px);
          }
        }
        &:nth-of-type(6) {
          width: calc(170px + 25px * 2);
          >.point {
            margin-right: calc(23px + 80px);
          }
        }
        &:nth-of-type(7) {
          width: calc(170px + 25px * 1);
          >.point {
            margin-right: calc(15px + 80px);
          }
        }
        &:nth-of-type(8) {
          width: 170px;
          >.point {
            margin-right: calc(17px + 80px);
          }
        }
      }
    }
  }

  >article {
    position: absolute;
    top: 134px;
    right: 114px;
    width: 458px;
    >h2 {
      display: flex;
      align-items: center;
      font-size: 24px;
      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
      font-weight: bold;
      color: #FFFFFF;
      text-shadow: 0px 0px 9px #B0A179;
      margin-bottom: 28px;
      &::before {
        content: '';
        display: inline-block;
        margin-right: 10px;
        width: 3px;
        height: 3px;
        background: #B0A179;
      }
    }
    >img.splitter {
      width: 100%;
      margin-bottom: 25px;
    }
    >.txt-wrapper {
      margin-bottom: 20px;
      position: relative;
      padding-left: 40px;
      padding-right: 35px;
      >.txt {
        min-height: 40px;
        max-height: 500px;
        overflow: auto;
        font-size: 20px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.8);
        line-height: 23px;
        padding-right: 10px;
        &::-webkit-scrollbar { background: transparent; width: 4px; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
        &::-webkit-scrollbar-thumb {
          background: rgba(220, 231, 240, 0.2);
          border-radius: 2px;
        }
      }
      >button {
        width: 36px;
        height: 36px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-size: 90%;
        background-repeat: no-repeat;
        &.left {
          left: 0;
          background-image: url(@/assets/images/arrow_left.png);
          background-position: left center;
        }
        &.right {
          right: 0;
          background-image: url(@/assets/images/arrow_right.png);
        background-position: right center;
        }
      }
    }
  }
}
</style>