<script setup>
import {ref, onMounted, computed} from 'vue'
import {useRoute} from 'vue-router'
import api from '../../utils/axios.js'
import {blogImage, userProfile} from '../../utils/imageResource'
import router from "../../router/index.js";
import swal from "../../utils/sweetalert.js";
import Like_button from "../../components/Like_button.vue";
import store from "../../store/index.js";
import Blog_rootComment from "../../components/Blog_comment.vue";
import {getInfoWithPages} from "../../utils/getInfoWithPages.js";
import Blog_commentDisplay from "../../components/Blog_commentDisplay.vue";
import Profile_display from "../../components/Profile_display.vue";
import {formatGMTToLocal, getCurrentISODateTime} from "../../utils/formatTime.js";
import {ArrowDown, ArrowUp} from "@element-plus/icons-vue";

// 获取路由参数
const route = useRoute()

const blog = ref(
    {
      complete: false
    }
)
const posterInfo = ref(null)
const interactInfo = ref({
  complete: false
})
const id = route.params.id

const isLoadingFailed = ref(false);

const windowWidth = ref(0);
const scrollRef = ref(null);

const commentInput = ref('');
const commentInputFocus = ref(false);
const commentButtonFocus = ref(false);
const commentSubmitLoading = ref(false);

const sortMode = ref(store.state.userPreference.blogSortMode >-1 ? store.state.userPreference.blogSortMode : 1);

const checkWindowSize = () => {
  windowWidth.value = window.innerWidth;
};

// 在组件挂载时获取数据
onMounted(async () => {
  if (store.state.userPreference.blogSortMode === undefined) {
    store.commit('setPreferenceValue', {blogSortMode: 1});
  }
  checkWindowSize();
  window.addEventListener('resize', checkWindowSize);

  // setTimeout(() => { // 测试测试
  //   interactInfo.value.likes = 114;
  //   interactInfo.value.liked = true;
  //   interactInfo.value.complete = true;
  //   blog.value = {
  //     complete: true,
  //     title: 'asd',
  //     content: `${'asdasd'.repeat(99)}`,
  //     allow_comments: 1,
  //     post_date: 'asd',
  //   }
  // }, 100);
  // return;

  // 获取博客数据
  try {
    const blogResponse = await api.get(`/blogs/${id}`);
    if (blogResponse.code === 1) {
      await router.push('/404')
      return;
    }
    if (blogResponse.code === 0) {
      blog.value = blogResponse.data;
      document.title = blog.value.title + ' CYBER 博客';
      blog.value.complete = true;

      setTimeout(() => {
        interactInfo.value.likes = blog.value.likes;
        interactInfo.value.liked = blog.value.liked;
        interactInfo.value.complete = true;
      }, 300);

      // 获取发布者信息
      const posterResponse = await api.get(`/userinfo?UID=${blog.value.poster}`)
      if (posterResponse.code === 0) {
        posterInfo.value = posterResponse.data
      }
    }

  } catch {
    swal.tip('error', '加载失败...', '请刷新重试');
    isLoadingFailed.value = true;
  }

})

// 处理博客内容中的 <holder> 占位符，替换为 <img> 标签
const processedContent = computed(() => {
  if (!blog.value || !blog.value.content) return ''
  let content = blog.value.content
  const regex = /<holder image ([\w.]+\.\w+) width=([\d.]+) height=([\d.]+)>/g
  return content.replace(regex, (match, filename, width, height) => {
    const url = blogImage(filename) // filename 是完整的 "1a2b3c4d.png"
    return `<img src="${url}" width="${width}" height="${height}" alt="Blog Image" />`
  })
})

const clickLikeBtn = async (isLiked) => {
  try {
    if (isLiked) {
      const response = await api.post(`/blogs/${blog.value.id}/like`);
      if (response.code !== 0) {
        swal.tip('error', '点赞失败');
      }
    } else {
      const response = await api.delete(`/blogs/${blog.value.id}/like`);
      if (response.code !== 0) {
        swal.tip('error', '取消点赞失败');
      }
    }
  } catch {
    swal.tip('error', '网络错误');
  }
}
const commentDisplayRef = ref(null);
const submitComment = async () => {
  const commentBody = commentInput.value.trim();
  if (!commentBody) {
    return;
  }
  commentSubmitLoading.value = true;
  try {
    const response = await api.post(`/blogs/${id}/comments`, (() => {
      const form = new FormData();
      form.append('content', commentBody);
      return form;
    })()
  )
    ;
    if (response.code === 0) {
      commentDisplayRef.value.addCommentToFront({
        "belong_blog": id,
        "content": commentBody,
        "date": getCurrentISODateTime(),
        "father": 0,
        "id": response.commentId,
        "likes": 0,
        "poster_name": store.state.userInfo.username,
        "profile": store.state.userInfo.profile,
        "uid": Number(store.state.userInfo.uid)
      })
    } else {
      swal.tip('error', '发送失败, 未知错误');
    }
  } catch {
    swal.tip('error', '发送失败, 网络错误');
  }
  commentSubmitLoading.value = false;
}

const changeSort = () => {
  sortMode.value = (sortMode.value + 1) % 2;
  store.commit('setPreferenceValue', {blogSortMode: sortMode.value})
  commentDisplayRef.value.reSort(sortMode.value);
}

</script>

<template>
  <div class="container" ref="scrollRef">
    <div class="scroll-container">
      <div class="blog-container">
        <!-- 使用 Transition 包裹博客内容 -->
        <Transition name="fade">
          <div v-show="blog.complete" class="blog-wrapper">
            <h1>{{ blog.title }}</h1>
            <div class="blog-meta">
              <div class="avatar">
                <Profile_display v-if="posterInfo" :id="posterInfo.profile"/>
              </div>
              <div class="info-text">
                <span class="username-text">{{ posterInfo?.username || '' }}</span>
                <span class="date-text">最后更新: {{ formatGMTToLocal(blog.edit_date, 3) }}</span>
              </div>

            </div>
            <el-divider/>
            <div class="blog-content">
              <div style="padding: 0 56px 40px" v-html="processedContent"/>
              <el-divider v-if="windowWidth<1050"/>
              <Transition name="fade">
                <div class="interact-bar" v-if="interactInfo.complete" :class="{outside: windowWidth>1050}">

                  <Like_button
                      :disable="!store.getters.hasUserInfo"
                      :amount="interactInfo.likes"
                      :active="interactInfo.liked"
                      :toggle-func="clickLikeBtn"
                      direction="v"
                      font-size="16"
                      icon-size="24"></Like_button>
                </div>
              </Transition>
              <div class="comment-input" v-if="store.getters.hasUserInfo && blog.allow_comments === 1">
                <el-container>
                  <el-aside class="comment-input-profile" width="60px">
                    <Profile_display v-if="store.getters.profileImage" :id="store.getters.profileImage" size="55"/>
                  </el-aside>
                  <el-main>
                    <el-container class="comment-area">
                      <el-input
                          autosize
                          type="textarea"
                          placeholder="写点什么..."
                          v-model="commentInput"
                          @focus="commentInputFocus = true"
                          @blur="commentInputFocus = false"
                      />
                      <el-button
                          class="submit-root-commit"
                          type="primary"
                          v-if="commentInputFocus || commentButtonFocus || commentSubmitLoading"
                          :disabled="commentInput.trim() === '' || commentSubmitLoading"
                          @mouseenter="commentButtonFocus = true"
                          @mouseleave="commentButtonFocus = false"
                          @click="submitComment"
                      >{{ commentSubmitLoading ? "稍等" : "提交" }}
                      </el-button>
                    </el-container>

                  </el-main>
                </el-container>
              </div>
            </div>
            <el-container class="sort-btn" @click="changeSort" v-if="blog.allow_comments === 1">
              {{ ['降序', '升序'][sortMode] }}
              <el-icon>
                <ArrowDown v-if="sortMode === 0" />
                <ArrowUp v-if="sortMode === 1" />
              </el-icon>
            </el-container>
            <Transition name="fade">
              <div class="comments-section">
                <Blog_commentDisplay
                    ref="commentDisplayRef"
                    v-if="blog.allow_comments === 1"
                    :scroll-container="scrollRef"
                    :blog-id="Number(id)"
                    :sort-mode="sortMode"
                    :blog-author-uid="blog.poster"
                />
                <p v-else>不允许评论</p>
              </div>


            </Transition>
          </div>
        </Transition>
        <!-- 当 blog 未加载时显示加载提示 -->
        <div v-if="!isLoadingFailed && !blog.complete" class="loading">加载中...</div>
        <div v-if="isLoadingFailed" class="loading">加载失败, 请刷新重试</div>

      </div>
    </div>

  </div>

</template>

<style scoped>
.container {
  background: #020202;
}

.scroll-container {
  width: 100%;
  height: 100%;
}

.theme-light .container {
  background: #e3e3e3;
}

h1 {
  font-size: 2rem;
}

.loading {
  height: 0;
  text-align: center;
  font-size: 1.2em;
}

.blog-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;


}

.blog-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(100% - 60px);
  height: auto;
  overflow: auto;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 30px 50px;
  background-color: #1f1f1f; /* 默认深色背景 */
  color: #fff; /* 默认深色文字 */
}

.blog-container.outside {

}

.blog-meta {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}


.info-text {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
}

.username-text {
  //cursor: pointer;
  font-size: 17px;
  font-weight: 600;
}

.date-text {
  font-size: 13px;
  opacity: 0.6;
}

.blog-content {
  width: 100%;
  word-break: break-word;
}

.comment-input-profile {
  display: flex;
  //align-items: center;
  padding-top: 20px;
  justify-content: center;
}

.comment-area {
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  height: auto;
  gap: 10px;
}

.submit-root-commit {
  width: 83px;
}

.interact-bar {
  width: 46px;
  height: auto;
  padding: 12px 6px;
  border-radius: 10px;
}

.interact-bar.outside {
  top: 25%;
  position: absolute;
  background: #333;
  margin-left: 850px;
}

.theme-light .interact-bar {
  background: #fff;
}

.comments-section {
  margin-top: 20px;
  width: 100%;
}

.sort-btn {
  cursor: pointer;
  user-select: none;
  width: 100%;
  font-size: 14px;
  justify-content: flex-end;
  align-items: center;
}

/* 浅色模式 */
.theme-light .blog-container {
  background-color: #ffffff;
  color: #333;
  //box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.infinite-list-wrapper {
  height: 300px;
  text-align: center;
}

.infinite-list-wrapper .list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list-wrapper .list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}

.infinite-list-wrapper .list-item + .list-item {
  margin-top: 10px;
}


</style>