<template>
    <div class="article-container">
        <div class="article-title">{{articleData?.title}}</div>
        <div class="article-content" v-html="articleData?.content"></div>
    </div>
</template>

<script scoped>
import axios from 'axios';
import { provide, defineComponent, ref, onMounted, onUnmounted, watch } from 'vue';
import '@wangeditor/editor/dist/css/style.css';

export default {
  data() {
    return {
      oauthCode: null,
      loginUser: null,
      articleId: null,
      articleData: null
    };
  },
  mounted() {
    // 正确获取路由参数的方式
    this.articleId = this.$route.query.id;
    this.loadArticle();
    this.loadCurrentUserInfo();
  },
  watch: {
    // 修正监听器写法
    '$route.query.id': function(newId) {
      this.articleId = newId;
      this.loadArticle();
    }
  },
  methods: {
    async loadCurrentUserInfo () {
      this.oauthCode = new URLSearchParams(window.location.search).get('oauthCode');
      const response = await axios.get(`/client-service/chat/account/current/info`, {
        // 这里可以添加请求的配置，例如 headers 或 params
        headers: {
          'Content-Type': 'application/json',
          'origin-url': window.location.href,
          'oauth-code': this.oauthCode
        }
      })
      if (response.data.code === 40001) {
          window.location.href = response.data.redirect_url;
          return;
      } else if (response.data.code === 200) {
        this.loginUser = response.data.data;
      }
    },
    async loadArticle() {
      if (!this.articleId) return;
      try {
        const response = await axios.get(`/client-service/chat/article/detail/${this.articleId}`, {
          headers: {
            'origin-url': window.location.href
          }
        });
        if (response.data.code === 40001) {
          window.location.href = response.data.redirect_url;
          return;
        }
        this.articleData = response.data.data;
      } catch (error) {
        console.error('加载文章失败:', error);
      }
    }
  }
};
</script>

<style>
    body {
      background-color: whitesmoke;
    }
    /* 样式保持不变 */
    .article-container {
        position: absolute;
        width: 800px;
        min-height: 200px;
        left: 50%;
        top: 30px;
        margin-left: -400px;
        border-radius: 6px;
        overflow: hidden;
        background-color: white;
    }
    .article-title {
        font-size: 25px;
        padding: 40px 40px 0px 40px;
    }
    .article-content {
        margin-top: 2px;
        padding: 40px;
        margin-bottom: 50px;
    }
    .article-content img {
      width: 100%
    }
</style>