<template>
  <div
    :style="{ background: 'url(' + article.cover + ') center center / cover no-repeat' }"
    class="m-banner animate__animated animate__fadeInDown"
  ></div>
  <div class="m-content article-container">
    <div class="article animate__animated animate__fadeInUp">
      <el-card>
        <v-md-preview :text="article.content" ref="preview"></v-md-preview>
      </el-card>
    </div>
    <div class="dir-container animate__animated animate__fadeInUp">
      <div class="directory">
        <el-card>
          <h3 style=""><svg-icon name="dir" class="dir-icon"></svg-icon> 目录</h3>
          <div
            v-for="anchor in directory"
            :key="anchor"
            :style="{ padding: `10px 0 10px ${(anchor.indent * 20) / 1.5 + 10}px` }"
            @click="handleAnchorClick(anchor)"
            :class="{ active: currentAhchor === anchor }"
          >
            <a class="anchor">{{ anchor.title }}</a>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getArticleById } from '@/api/article'

const article = ref({})
const route = useRoute()
const preview = ref()
const directory = ref([])
const currentAhchor = ref({}) // 当前的anchor，用于判断目录是否被点击

onMounted(async () => {
  await getArticle(route.params.articleId) // 注意这里需要加await

  const anchors = preview.value.$el.querySelectorAll('h1, h2, h3, h4, h5, h6')
  console.log(preview.value)
  const titles = Array.from(anchors).filter((title) => !!title.innerText.trim())
  if (!titles.length) {
    directory.value = []
    return
  }

  const hTags = Array.from(new Set(titles.map((title) => title.tagName))).sort()

  directory.value = titles.map((el) => ({
    title: el.innerText,
    lineIndex: el.getAttribute('data-v-md-line'),
    indent: hTags.indexOf(el.tagName)
  }))
})

const getArticle = async (id) => {
  const { data } = await getArticleById(id)
  article.value = data
}

const handleAnchorClick = (anchor) => {
  const { lineIndex } = anchor
  currentAhchor.value = anchor

  const heading = preview.value.$el.querySelector(`[data-v-md-line="${lineIndex}"]`)

  if (heading) {
    preview.value.scrollToTarget({
      target: heading,
      scrollContainer: window,
      top: 25
    })
  }
  console.log(heading.scrollTop)
}
</script>

<style lang="scss" scoped>
.article-container {
  display: flex;
  .article {
    width: 75%;
    margin-right: 20px;
  }
  .dir-container {
    width: 25%;
    .directory {
      position: sticky;
      top: 10px;
      & h3 {
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #000;
        .dir-icon {
          vertical-align: -0.33em;
        }
      }
      .anchor {
        cursor: pointer;
      }
      .active {
        background-color: #00c4b6;
        transition: all 1s ease-in-out;
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .article-container {
    display: block;
    .article {
      width: 100%;
    }
    .dir-container {
      // width: 100%;
      display: none;
    }
  }
}
.animate__fadeInDown {
  --animate-duration: 1.7s;
}
</style>
