<template>
  <div class="index com-width-1400 com-margin-auto">
    <div class="btn-article-menu-switch">
      <div
        class="btn flex column center"
        @click="navMenuVisible = !navMenuVisible">
        <div class="icon el-icon-notebook-2"></div>
        <div>Article Menu</div>
      </div>
    </div>
    <section
      class="nav"
      v-show="navMenuVisible">
      <ul class="nav-l">
        <li
          v-for="(opt, i) in articleLists"
          :key="i"
          @click="getList(i)"
          :class="{ active: type == i }">
          <img :src="opt.src" />
          <p>{{ opt.n }}</p>
        </li>
      </ul>
      <ul class="nav-r">
        <!-- 大标题，二级目录 -->
        <li
          v-for="items in articleLists[type]?.data"
          :key="items.id">
          <a
            class="nav-r-title com-singe-line"
            :class="{ active: items.hyphensTitle == articleLists[type]?.nav }"
            :href="`#${items.hyphensTitle}`"
            @click="smoothScroll($event, items.hyphensTitle)">
            <i
              :class="
                items.show ? 'el-icon-caret-bottom' : 'el-icon-caret-right'
              "
              @click.stop="toggle(items)"></i>
            {{ items.title }}
          </a>
          <a
            v-show="items.show"
            class="nav-r-anchor com-singe-line"
            :class="{ active: item == articleLists[type]?.nav }"
            v-for="(item, i) in items.label_ids"
            :key="i"
            :href="`#${item}`"
            @click="smoothScroll($event, item)"
            >{{ replaceHyphensWithSpaces(item) }}</a
          >
        </li>
      </ul>
    </section>
    <article v-loading="listLoading">
      <ul>
        <li
          v-for="items in articleLists[type]?.data"
          :key="items.id">
          <div class="root">
            <img
              v-if="items.logo"
              :src="items.logo" />
            <div>
              <a
                class="root-title"
                :id="replaceSpacesWithHyphens(items.title)"
                >{{ items.title }}</a
              >
              <p class="root-des">{{ items.description }}</p>
            </div>
          </div>
          <div
            class="content"
            v-html="items.content"></div>
        </li>
      </ul>
      <div v-if="!articleLists.length">
        <el-empty description="No Data"></el-empty>
      </div>
    </article>
  </div>
</template>

<script>
import throttle from 'lodash.throttle'
export default {
  data() {
    return {
      articleLists: [
        {
          src: require('@/assets/img/article/About.png'),
          n: 'About Us',
          nav: '',
        },
        {
          src: require('@/assets/img/article/Advantage.png'),
          n: 'Our Advantage',
          nav: '',
        },
        {
          src: require('@/assets/img/article/Capability.png'),
          n: 'Capability',
          nav: '',
        },
        {
          src: require('@/assets/img/article/Compliance.png'),
          n: 'Compliance',
          nav: '',
        },
      ],
      type: 1,
      listLoading: true,
      navMenuVisible: true,
      isScrollingToTarget: false,
    }
  },
  watch: {
    type(newValue, oldValue) {
      if (process.client && newValue !== oldValue) {
        window.scrollTo({
          top: 0,
          behavior: 'smooth',
        })
      }
    },
  },
  created() {
    let a
    switch (this.$route.params.type) {
      case 'About-Us':
        a = 0
        break

      case 'Our-Advantage':
        a = 1
        break

      case 'Capability':
        a = 2
        break

      case 'Compliance':
        a = 3
        break
      default:
        a = 0
    }
    this.getList(a)
  },
  mounted() {
    window.addEventListener('resize', this.$_resizeHandler)
    window.addEventListener('scroll', this.$_handleScroll) // 监听滚动事件
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.$_resizeHandler)
    window.removeEventListener('scroll', this.$_handleScroll) // 解绑滚动事件
  },
  methods: {
    getList(type) {
      this.type = type
      if (this.articleLists[type].data) {
        this.articleLists[type].nav =
          this.articleLists[type].data[0].hyphensTitle
        window.scrollTo({
          top: 0,
          behavior: 'smooth',
        })
        return
      }
      this.listLoading = true

      this.$axios
        .post('/uk-api/home/articleList', {
          type: this.type + 1,
          page: 1,
          limit: 1000, // 旧接口迭代，后端不去掉分页
        })
        .then(res => {
          if (res.code === 1) {
            this.$set(this.articleLists[type], 'data', [])
            this.articleLists[type].data = res.result.data?.map(item => {
              this.$set(item, 'show', true)
              item.hyphensTitle = this.replaceSpacesWithHyphens(item.title)
              item.content = item.content.replace(
                /<img([^>]*)>/g,
                (match, attributes) => {
                  let newAttributes = attributes
                  // 如果已有 style 属性
                  if (attributes.includes('style=')) {
                    // 提取原有的 style 属性值
                    const style =
                      (attributes.match(/style="([^"]*)"/) || [])[1] || ''
                    // 检查是否已经包含 max-width
                    if (!style.includes('max-width')) {
                      // 如果没有 max-width,则添加 max-width: 100%;
                      newAttributes = attributes.replace(
                        /style="([^"]*)"/,
                        `style="$1;max-width:100%;"`
                      )
                    }
                  } else {
                    // 如果没有 style 属性,则添加 style="max-width:100%;"
                    newAttributes = `${attributes} style="max-width:100%;"`
                  }
                  return `<img${newAttributes}>`
                }
              )
              return item
            })
            this.articleLists[type].nav =
              this.articleLists[type].data[0].hyphensTitle
            this.listLoading = false
          }
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    smoothScroll(event, target) {
      if (process.client) {
        event && event.preventDefault()
        const escapedSelector = CSS.escape(target)
        const element = document.querySelector(`#${escapedSelector}`)

        if (element) {
          this.isScrollingToTarget = true // 设置标志
          this.selNav(target) // 立即更新选中状态

          const elementPosition =
            element.getBoundingClientRect().top + window.scrollY
          const offsetPosition = elementPosition - 230

          window.scrollTo({
            top: offsetPosition,
            behavior: 'smooth',
          })

          // 等待滚动动画完成后重置标志
          setTimeout(() => {
            this.isScrollingToTarget = false
          }, 1000) // 设置稍长于滚动动画的时间
        }
      }
    },
    selNav(str) {
      this.articleLists[this.type].nav = str
    },
    toggle(items) {
      this.$set(items, 'show', !items.show)
    },
    replaceSpacesWithHyphens(str) {
      return str.replace(/\s+/g, '-')
    },
    replaceHyphensWithSpaces(str) {
      return str.replace(/-/g, ' ')
    },
    $_resizeHandler: throttle(function () {
      const width = window.document.body.clientWidth
      this.navMenuVisible = width >= 1200
    }, 500),

    $_handleScroll: throttle(function () {
      // 如果是点击导航触发的滚动，不处理滚动监听
      if (this.isScrollingToTarget) return

      const anchors = document.querySelectorAll('article a[id]')
      const scrollTop = window.scrollY
      const buffer = 230

      let currentAnchor = null

      for (const anchor of anchors) {
        const rect = anchor.getBoundingClientRect()
        const elementTop = rect.top + window.scrollY

        if (elementTop <= scrollTop + buffer) {
          currentAnchor = anchor
        } else {
          break
        }
      }

      if (currentAnchor) {
        const anchorId = currentAnchor.getAttribute('id')
        this.selNav(anchorId)
      }
    }, 200),
  },
}
</script>

<style lang="scss" scoped>
.index {
  display: flex;
  flex-direction: row;
  position: relative;

  .nav {
    position: sticky;
    top: 148px;
    height: fit-content;
    font-size: 18px;

    ul {
      display: inline-block;
    }

    .nav-l {
      text-align: center;

      li {
        padding: 10px 0;
        transition: background-color 0.7s;
        cursor: pointer;

        &:nth-child(1) {
          color: #007ad8;
        }

        &:nth-child(2) {
          color: #c806ff;
        }

        &:nth-child(3) {
          color: #df0000;
        }

        &:nth-child(4) {
          color: #ffc300;
        }
      }

      .active {
        &:nth-child(1) {
          background-color: rgba(0, 122, 216, 0.2);
        }

        &:nth-child(2) {
          background-color: rgba(200, 6, 255, 0.2);
        }

        &:nth-child(3) {
          background-color: rgba(223, 0, 0, 0.2);
        }

        &:nth-child(4) {
          background-color: rgba(255, 195, 0, 0.2);
        }
      }
    }

    .nav-r {
      width: 180px;
      background-color: #00213b;
      vertical-align: top;
      padding: 10px;
      min-height: 463px;
      max-height: calc(100vh - 168px);
      overflow-y: scroll;

      li {
        a {
          color: #fff;
          display: block;
          padding: 10px 0;
        }

        .nav-r-title {
          font-weight: 700;
          font-size: 16px;
        }

        .nav-r-anchor {
          color: #ddd;
          padding-left: 20px;
          padding-right: 10px;
        }

        .active {
          background-color: #4da9f2;
          border-top-right-radius: 20px;
          border-bottom-right-radius: 20px;
        }
      }
    }
  }

  article {
    flex: 1;
    padding: 80px 20px 20px;
    max-width: 100%;
    overflow: auto;

    ul {
      li {
        .root {
          display: flex;
          flex-direction: row;
          align-items: center;

          img {
            width: 100px;
            height: 100px;
            margin-right: 20px;
          }

          .root-title {
            font-weight: 700;
            font-size: 20px;
          }

          .root-des {
            margin-top: 10px;
            font-size: 16px;
            color: #434649;
          }
        }

        .content {
          padding: 10px 0;

          &::after {
            content: '';
            display: block;
            clear: both;
          }
        }
      }
    }
  }
}

.btn-article-menu-switch {
  position: absolute;
  left: 2px;
  top: 12px;
  display: none;

  @media screen and (max-width: 1200px) {
    display: block;
  }

  .btn {
    cursor: pointer;
    box-shadow: 1px 1px 3px 2px rgba(#eee, 0.5);
    background-color: rgba(#fff, 0.7);
    font-size: 14px;
    border-radius: 8px;
    width: 100px;
    height: 52px;
    color: #777;
    border: 1px solid #ccc;

    &:hover {
      background-color: rgba(#fff, 1);
    }
  }

  .icon {
    font-size: 24px;
  }
}

.index section.nav {
  @media screen and (max-width: 1200px) {
    box-shadow: 1px 1px 3px 2px rgba(#777, 0.5);
    z-index: 2;
    background-color: #fff;
    position: absolute;
    top: 72px;
    left: 0;
  }
}

::v-deep .content {
  * {
    word-break: break-word !important;
    white-space: pre-wrap !important;
  }

  p {
    font-size: 16px;
    line-height: 2;
  }
}
</style>
