<template>
  <Header />
  <div class="detail">
    <div class="backimage"></div>
    <div class="content">
      <div class="content-left">
        <div class="detail-header">
          <h1>{{ article.title }}</h1>
          <el-divider></el-divider>
          <div class="detail-meta">
            <div>
              <i class="fa-regular fa-calendar"></i>
              {{ article.publish_date }}
            </div>

            <div>
              <i class="fa-solid fa-user-pen"></i>
              {{ article.author }}
            </div>

            <div>
              <i class="fa-solid fa-list"></i>
              {{ article.catename }}
            </div>

            <div>
              <i class="fa-regular fa-thumbs-up"></i>
              {{ article.likes }}
            </div>

            <div>
              <i class="fa-regular fa-eye"></i>
              {{ article.views }}
            </div>
          </div>
        </div>
        <div class="detail-content" ref="contentRef">
          <div v-html="article.content" class="content-html"></div>
        </div>

        <div class="theend">
          <el-divider></el-divider>
          <div class="the-end">The End</div>
          <el-divider></el-divider>
        </div>

        <div class="endtool">
          <div
            style="
              margin-bottom: 65px;
              display: flex;
              justify-content: center;
              align-items: center;
              gap: 40px;
            "
          >
            <div class="tool-item" @click="handleShareClick">
              <div class="tool-icon">
                <i class="fa-solid fa-share-nodes"></i>
              </div>
              <span class="tool-text">分享</span>
            </div>
            <div class="tool-item" @click="handleLikeClick">
              <div class="tool-icon">
                <i
                  class="fa-regular fa-thumbs-up"
                  :class="{ liked: article.liked }"
                ></i>
              </div>
              <span class="tool-text">
                {{ article.liked ? '取消点赞' : '点赞' }}
              </span>
            </div>
            <div class="tool-item">
              <div class="tool-icon">
                <i class="fa-regular fa-comment"></i>
              </div>
              <span class="tool-text">评论</span>
            </div>
          </div>
        </div>

        <div class="article-nav">
          <div
            class="nav-item"
            v-if="nextPreviousArticles.previous"
            @click="goToArticle(nextPreviousArticles.previous.id)"
          >
            <div class="nav-label">
              <i class="fa-solid fa-arrow-left"></i>
              上一篇
            </div>
            <div class="nav-title">
              {{ nextPreviousArticles.previous.title }}
            </div>
          </div>
          <div
            class="nav-item"
            v-if="nextPreviousArticles.next"
            @click="goToArticle(nextPreviousArticles.next.id)"
          >
            <div class="nav-label">
              下一篇
              <i class="fa-solid fa-arrow-right"></i>
            </div>
            <div class="nav-title">{{ nextPreviousArticles.next.title }}</div>
          </div>
        </div>
      </div>
      <div class="content-right">
        <div class="card-item">
          <div class="card-header">相关文章</div>
          <el-divider></el-divider>
          <div class="card-content">
            <div
              class="article-item"
              v-for="item in relatedArticles"
              :key="item.id"
            >
              <div class="thumb-img">
                <img :src="imagePath(item.image)" alt="" />
              </div>
              <div class="article-title">{{ item.title }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Footer />
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick, getCurrentInstance } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { addLike, reduceLike } from '@/api/article'
import Header from '@/views/components/header.vue'
import Footer from '@/views/components/footer.vue'
import { getKingdeeNewsDetail, getCompanyNewsDetail } from '@/api/newscenter'

const route = useRoute()
const article = ref<any>({})
const relatedArticles = ref<any[]>([])
const nextPreviousArticles = ref<{
  previous?: { id: number; title: string }
  next?: { id: number; title: string }
}>({})
const loading = ref(true)
const instance = getCurrentInstance()
const proxy = instance?.proxy as any
const router = useRouter()
const contentRef = ref<HTMLElement | null>(null)
const VITE_APP_API_URL = import.meta.env.VITE_APP_API_URL

// 处理代码块复制功能
const handleCopyCode = async (e: Event) => {
  const target = e.target as HTMLElement
  const preElement = target.closest('.code-block-wrapper')
  if (!preElement) return

  const codeElement = preElement.querySelector('code')
  if (!codeElement) return

  const code = codeElement.innerText
  try {
    await navigator.clipboard.writeText(code)
    proxy.$message.success('复制成功')
  } catch (err) {
    proxy.$message.error('复制失败，请手动复制')
  }
}

// 为代码块添加复制按钮
const initCodeBlocks = () => {
  if (!contentRef.value) return

  const preElements = contentRef.value.querySelectorAll('pre')
  preElements.forEach((pre) => {
    if (pre.parentElement?.classList.contains('code-block-wrapper')) return

    const wrapper = document.createElement('div')
    wrapper.className = 'code-block-wrapper'
    pre.parentNode?.insertBefore(wrapper, pre)
    wrapper.appendChild(pre)

    const copyBtn = document.createElement('button')
    copyBtn.className = 'copy-code-btn'
    copyBtn.innerHTML = '<i class="fa-regular fa-copy"></i>'
    copyBtn.title = '复制代码'
    copyBtn.onclick = handleCopyCode
    wrapper.appendChild(copyBtn)
  })
}

//分享功能
const handleShareClick = async () => {
  const url = window.location.href
  try {
    await navigator.clipboard.writeText(url)
    proxy.$message.success('复制地址成功')
  } catch (err) {
    proxy.$message.error('复制失败，请手动复制地址')
  }
}

//点赞增加
const handleLikeClick = async () => {
  if (article.value.liked) {
    await reduceLike(article.value.id)
    article.value.likes--
    article.value.liked = false
  } else {
    await addLike(article.value.id)
    article.value.likes++
    article.value.liked = true
  }
}

//拼接接口图片路径
const imagePath = (path: string) => {
  if (!path) {
    return new URL('@/assets/images/noimage.png', import.meta.url).href
  }
  return VITE_APP_API_URL + path
}

const goToArticle = (id: number) => {
  if (route.path.includes('companyNews')) {
    router.push(`/companyNews/detail/${id}`)
  } else if (route.path.includes('kingdeeNews')) {
    router.push(`/kingdeeNews/detail/${id}`)
  } else {
    router.push(`/kingdeeNews/detail/${id}`)
  }
}

onMounted(async () => {
  const id = route.params.id
  loading.value = true

  try {
    let res
    const path = route.path

    if (path.includes('companyNews')) {
      res = await getCompanyNewsDetail(id as string)
    } else if (path.includes('kingdeeNews')) {
      res = await getKingdeeNewsDetail(id as string)
    } else {
      res = await getKingdeeNewsDetail(id as string)
    }

    if (res.code === 200) {
      article.value = res.data
      nextTick(() => {
        initCodeBlocks()
      })
      if (res.data.relatedArticles && res.data.relatedArticles.list) {
        relatedArticles.value = res.data.relatedArticles.list.map(
          (item: any) => ({
            ...item,
            catename: item.cate,
          }),
        )
      }
      if (res.data.nextPreviousArticles) {
        nextPreviousArticles.value = res.data.nextPreviousArticles
      }
    }
  } catch (err) {
    console.error('获取文章详情失败:', err)
  } finally {
    loading.value = false
  }
})
</script>

<style lang="scss" scoped>
.detail {
  padding-top: 120px;
  background-color: #f8f8f8;
  padding-bottom: 120px;

  .content {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 20px;
    position: relative;
    z-index: 1;

    .content-left {
      width: 70%;
      border-radius: 10px;
      background-color: #fff;
      opacity: 0.9;
      .detail-header {
        margin-bottom: 20px;
        padding: 50px 50px 0 50px;

        .detail-meta {
          display: flex;
          align-items: center;
          gap: 20px;
          color: #707070;
          font-size: 14px;
          padding-bottom: 20px;
        }
      }

      .detail-content {
        padding: 0 50px;

        .content-html {
          :deep(pre) {
            position: relative;
            padding-right: 50px;
          }
        }

        /* 代码块包装器 */
        :deep(.code-block-wrapper) {
          position: relative;
          border-radius: 12px;
          overflow: hidden;
          margin: 20px 0;

          pre {
            margin: 0;
          }
        }

        /* 复制按钮 */
        :deep(.copy-code-btn) {
          position: absolute;
          top: 10px;
          right: 10px;
          width: 25px;
          height: 25px;
          border: none;
          border-radius: 6px;
          background: rgba(255, 255, 255, 0.1);
          color: rgba(255, 255, 255, 0.7);
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          transition: all 0.2s ease;
          z-index: 10;

          &:hover {
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
          }

          &:active {
            transform: scale(0.95);
          }
        }

        /* 代码样式 */
        :deep(code) {
          border-radius: 4px;
          padding: 2px 6px;
          font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
          font-size: 13px;
          color: #f06b6b;
        }

        /* 代码块样式 */
        :deep(pre) {
          background: linear-gradient(135deg, #1e1e2e 0%, #2d2d3f 100%);
          border-radius: 12px;
          padding: 10px;
          overflow-x: auto;
          border: 1px solid rgba(255, 255, 255, 0.1);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

          code {
            background-color: transparent;
            padding: 0;
            padding-left: 10px;
            color: #cdd6f4;
            font-size: 13px;
            line-height: 1.7;
          }
        }

        :deep(img) {
          width: 100%;
          height: auto;
          max-width: 100%;
          display: block;
        }

        :deep(p) {
          font-size: 14px;
          line-height: 25px;
          color: #606266;
        }
      }

      .theend {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin: 60px;
        .the-end {
          width: 200px;
          text-align: center;
          color: #dcdfe6;
        }
      }

      .endtool {
        padding: 65px;

        .tool-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 10px;
          cursor: pointer;
          transition: transform 0.3s ease;

          &:hover {
            transform: translateY(-5px);

            .tool-icon {
              background-color: #ff6b6b;
              box-shadow: 0 8px 20px rgba(64, 158, 255, 0.4);
            }
          }

          &:active {
            transform: translateY(-2px);

            .tool-icon {
              background-color: #337ecc;
              box-shadow: 0 4px 10px rgba(64, 158, 255, 0.3);
              transform: scale(0.95);
            }
          }

          &:has(.liked) {
            .tool-icon {
              background-color: #ff6b6b;
              box-shadow: 0 8px 20px rgba(255, 107, 107, 0.4);
            }

            .tool-text {
              color: #ff6b6b;
            }
          }

          .tool-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #3973ff;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            box-shadow: 0 4px 15px rgba(64, 158, 255, 0.3);
            transition: all 0.3s ease;

            .fa-thumbs-up.liked {
              color: #fff;
              animation: likeAnimation 0.4s ease;
            }
          }

          .tool-text {
            font-size: 14px;
            color: #606266;
            font-weight: 500;
            transition: color 0.3s ease;
          }

          &:hover .tool-text {
            color: #3973ff;
          }
        }
      }

      .article-nav {
        display: flex;
        justify-content: space-between;
        padding: 30px 65px;
        border-top: 1px solid #f0f0f0;

        .nav-item {
          max-width: 45%;
          cursor: pointer;
          transition: all 0.3s ease;

          &:hover {
            .nav-label {
              color: #3973ff;
            }
            .nav-title {
              color: #3973ff;
            }
          }

          .nav-label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: #909399;
            margin-bottom: 10px;
            transition: color 0.3s ease;
          }

          .nav-title {
            font-size: 14px;
            color: #303133;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            transition: color 0.3s ease;
          }
        }
      }
    }

    .content-right {
      width: 30%;
      opacity: 0.9;

      .card-item {
        // position: sticky;
        top: 100px;
        padding: 30px;
        border-radius: 10px;
        background-color: #fff;

        .card-header {
          font-size: 18px;
          font-weight: 500;
        }
        .card-content {
          .article-item {
            padding-bottom: 20px;
            border-bottom: 1px solid #f0f0f0;
            margin-bottom: 20px;
            &:last-child {
              padding-bottom: 0;
              border-bottom: none;
              margin-bottom: 0;
            }

            .thumb-img {
              width: 100%;
              overflow: hidden;
              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 10px;
              }
            }
            .article-title {
              font-size: 16px;
              font-weight: 500;
              color: #303133;
              margin-top: 10px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              cursor: pointer;

              &:hover {
                color: #3973ff;
                transition: color 0.3s ease;
              }
            }
          }
        }
      }
    }
  }
}

.backimage {
  width: 800px;
  height: 400px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: fixed;
  right: 100px;
  bottom: 100px;
  pointer-events: none;
  background-image: url('@/assets/images/sologen.png');
  opacity: 0.2;
}

@keyframes likeAnimation {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.3);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
</style>
