<template>
  <div class="history">
    <iframe
      id="iframe-echart"
      src="/chart.html"
      frameborder="0"
    />

    <h1>
      {{ timeList[activeTimeIdx].name }}
    </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: activeTimeIdx === idx}"
          @click="onClickTimeItem(idx)"
        >
          <div
            class="point"
          />
          {{ time.name }}
        </li>
      </ul>
    </menu>

    <article>
      <h2>{{ articleTitle }}</h2>
      <img
        class="splitter"
        src="@/assets/images/splitter-history-top.png"
        alt=""
        draggable="false"
      >
      <div class="txt-wrapper">
        <div
          class="txt"
          v-html="articleDesc"
        />
        <button
          v-show="activeTimeIdx !== 0"
          class="left"
          @click="onClickLeftArrow"
        />
        <button
          v-show="activeTimeIdx !== timeList.length - 1"
          class="right"
          @click="onClickRightArrow"
        />
      </div>
      <img
        class="splitter"
        src="@/assets/images/splitter-history-bottom.png"
        alt=""
        draggable="false"
      >
    </article>
  </div>
</template>

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

export default {
  name: 'HistoryView',
  setup () {
    const myIframe = ref(null)

    const timeList = reactive([
      {
        name: '开埠通商',
        desc: '开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述',
        corps: [
          {
            name: '李鸿章',
            brand: '创办江南制造局、上海机器织布局。',
            desc: '',
            story: '江南制造总局：中国民族工业从此起步；上海机器织布局：开创中国近代纺织业之先河。',
            importance: 30,
            id: '1'
          },
          {
            name: '徐寿',
            brand: '上海江南制造总局',
            desc: '清代著名科学家，上海江南制造总局襄办。',
            story: '',
            importance: 40,
            id: '2'
          },
          {
            name: '刘永康',
            brand: '正泰橡皮物品制造厂',
            desc: '创办正泰橡皮物品制造厂，首创“回力”商标。',
            story: '',
            importance: 50,
            id: '3'
          },
        ]
      },
      {
        name: '曲折发展',
        desc: '曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述',
        corps: [
          {
            name: '黄佐卿',
            brand: '裕晋纱厂',
            desc: '1895年投资的裕晋纱厂在上海杨树浦路落成并开工投产',
            story: '',
            importance: 30,
            id: '1'
          },
          {
            name: '孙多森、孙多鑫',
            brand: '阜丰面粉厂',
            desc: '1900年集资创办上海第一家民族机器面粉厂“阜丰面粉厂”',
            story: '孙氏通、孚、丰集团：官办企业转化为民族资本企业的典型。',
            importance: 30,
            id: '2'
          },
          {
            name: '严裕棠',
            brand: '大隆机器厂',
            desc: '1902年开办的大隆机器厂',
            story: '',
            importance: 30,
            id: '3'
          },
          {
            name: '张士德、刘致祥',
            brand: '中国精益眼镜公司',
            desc: '1911年集资开设中国精益眼镜公司',
            story: '',
            importance: 30,
            id: '4'
          },
          {
            name: '荣宗敬、荣德生',
            brand: '第一家面粉厂、申新纺织公司',
            desc: '第一家面粉厂，1915年，荣氏兄弟又创建申新纺织公司，人称“棉纱大王”。1919年至1921年，又发起和参与了上海华商面粉交易所、纱布交易所，成为上海民族工业的重要台柱之一。',
            story: '荣氏企业：上海民族工业的重要台柱之一。',
            importance: 30,
            id: '5'
          },
        ]
      },
      {
        name: '步履维艰',
        desc: '',
        corps: [
        ]
      },
      {
        name: '筚路蓝缕',
        desc: '',
        corps: [
        ]
      },
      {
        name: '改革开放',
        desc: '',
        corps: [
        ]
      },
      {
        name: '战略负重',
        desc: '',
        corps: [
        ]
      },
      {
        name: '创新驱动',
        desc: '',
        corps: [
        ]
      },
      {
        name: '追梦未来',
        desc: '',
        corps: [
        ]
      },
    ])
    const activeTimeIdx = ref(0)
    function onClickLeftArrow() {
      if (activeTimeIdx.value > 0) {
        activeTimeIdx.value--
      }
    }
    function onClickRightArrow() {
      if (activeTimeIdx.value < timeList.length - 1) {
        activeTimeIdx.value++
      }
    }
    const activeCorpId = ref('')
    const articleTitle = computed(() => {
      if (activeCorpId.value === '') {
        return ''
      } else if (activeCorpId.value === '0') {
        return timeList[activeTimeIdx.value].name
      } else {
        const targetCorp = timeList[activeTimeIdx.value].corps.find((item) => {
          return item.id === activeCorpId.value
        })
        return targetCorp?.brand
      }
    })
    const articleDesc = computed(() => {
      if (activeCorpId.value === '') {
        return ''
      } else if (activeCorpId.value === '0') {
        return timeList[activeTimeIdx.value].desc
      } else {
        const targetCorp = timeList[activeTimeIdx.value].corps.find((item) => {
          return item.id === activeCorpId.value
        })
        return targetCorp?.desc || targetCorp?.story
      }
    })
    function onClickTimeItem(idx) {
      activeTimeIdx.value = idx
      activeCorpId.value = ''
      document.getElementById('iframe-echart').contentWindow.changeTime(idx)
    }

    function onIframeMessage(e) {
      console.log('iframe message: ', e.data)
      if (e.data.startsWith && e.data.startsWith('node-selected: ')) {
        activeCorpId.value = e.data.split('node-selected: ')[1]
      }
    }
    onMounted(() => {
      window.addEventListener('message', onIframeMessage)
    })
    onBeforeUnmount(() => {
      window.removeEventListener('message', onIframeMessage)
    })

    return {
      timeList,
      activeTimeIdx,
      onClickLeftArrow,
      onClickRightArrow,
      activeCorpId,
      articleTitle,
      articleDesc,
      onClickTimeItem,
    }
  }
}
</script>

<style lang="less" scoped>
.history {
  >iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  >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;
        margin-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>