<template>
  <div class="writing-container">
    <!-- 标题输入框 -->
    <input v-model="title" class="title-input" placeholder="请输入文章标题" />
    <!-- 编辑器与预览容器 -->
    <div class="content-container">
      <div class="editor-container">
        <textarea
          id="markdown-editor"
          v-model="markdownContent"
          class="markdown-editor"
          placeholder="输入 Markdown 内容..."
          @input="resizeTextarea"
        ></textarea>
      </div>
      <div class="preview-container">
        <h2>实时预览</h2>
        <div class="preview-content" v-html="compiledMarkdown"></div>
      </div>
    </div>
    <!-- 保存并发布按钮 -->
    <button class="scroll-to-top" @click="scrollToTop">保存并发布</button>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted,nextTick } from 'vue';
import { marked } from 'marked';
import axios from 'axios';
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
import { useLoginStore } from '@/stores/Login'; 
//引入吐司
import { useToast } from 'vue-toastification' 
// 定义一个响应式变量来存储 Markdown 内容
const markdownContent = ref('');
const title = ref('');
const loginStore = useLoginStore();
const toast = useToast();
const route = useRoute();
const post_id = route.params.id;
const router = useRouter();
// 使用 marked 库将 Markdown 内容转换为 HTML
const compiledMarkdown = computed(() => {
  return marked.parse(markdownContent.value, { breaks: true });
});

// 在组件挂载后获取 DOM 元素
onMounted(() => {
  isChange();
  const editor = document.getElementById('markdown-editor');
  if (editor) {
    // 初始化时调整高度
    nextTick(() => {
          resizeTextarea();
        });
  }
});

// 动态调整 textarea 的高度
const resizeTextarea = () => {
  const editor = document.getElementById('markdown-editor') as HTMLTextAreaElement;
  if (editor) {
    editor.style.height = 'auto'; // 重置高度以计算实际内容高度
    editor.style.height = `${editor.scrollHeight}px`; // 设置为滚动高度
  }
};

function isChange(){
  //在这里判断，是否是修改
  //如果是修改，则get文章内容
  if(post_id !== '0'){
    axios.get('http://localhost:8080/post/essay',{ params: {post_id:post_id}})
    .then(res => {
      // console.log("获取文章详情数据成功", res.data.data);
      // console.log("传入对象");
      markdownContent.value = res.data.data.content
      title.value = res.data.data.title
      resizeTextarea();
    })
 }
}



const scrollToTop = () => {
  if(post_id === '0'){
     //保存发布按钮按下后的逻辑
  console.log("正在发布中",post_id)
  //
  console.log(title.value,'id',loginStore.userInfo.id)
  axios.post('http://localhost:8080/post/new', {
    token: loginStore.userInfo.token,
    title: title.value,
    content: markdownContent.value
  })
  .then(response => {
    // 处理成功响应
    console.log(response.data);
    toast.success("发布成功");
    // 跳转回主页
    router.push('/home');

  })
  .catch(error => {
    // 处理错误
    console.error(error);
    
  });
  }
  else{
    //保存修改按钮按下后的逻辑
    console.log("正在修改中",post_id)
    //
    console.log(title.value,'id',post_id)
    axios.post('http://localhost:8080/post/update', {
    token: loginStore.userInfo.token,
    title: title.value,
    content: markdownContent.value,
    post_id:post_id
    })
  }
  
};
</script>

<style scoped>
/* 全局样式 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif; /* 设置默认字体 */
}

body {
  display: flex;
  justify-content: center;
  align-items: stretch; /* 让子元素拉伸以填充父容器 */
  min-height: 100vh;
  background-color: #f9f9f9; /* 更柔和的背景颜色 */
}

/* 内容容器 */
.content-container {
  display: flex;
  flex: 1; /* 占据剩余的空间 */
  margin-top: 70px; /* 避开标题输入框 */
  width: 100%;
  height: 100%; /* 确保内容容器占据整个高度 */
}

.editor-container,
.preview-container {
  width: 50%; /* 平分左右空间 */
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
  border-radius: 8px;
}

.writing-container {
  display: flex;
  flex-direction: column; /* 改为列布局 */
  width: 100%; /* 留出一点边缘空间 */
  height: 100%; /* 占据整个高度 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  border-radius: 8px;
  position: relative;
  overflow: auto; /* 使用浏览器自带的滚动条 */
  padding: 20px;
  box-sizing: border-box;
}

/* 标题输入框 */
.title-input {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%; /* 调整宽度 */
  padding: 10px;
  font-size: 18px; /* 减小字体大小 */
  margin-bottom: 20px;
  border: none;
  border-bottom: 2px solid #ccc;
  outline: none;
  text-align: center;
  transition: border-color 0.3s ease-in-out;
  z-index: 10;
}

.title-input:focus {
  border-color: #007bff;
}

/* 编辑器容器 */
.editor-container {
  background-color: #f7f7f7;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
  overflow: hidden; /* 确保内容不会溢出 */
}

/* 预览容器 */
.preview-container {
  background-color: #fff;
  border-left: 1px solid #ccc;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
  overflow: auto; /* 使用内部滚动条 */
}

/* Markdown 编辑器 */
.markdown-editor {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  resize: none; /* 取消内部滚动条 */
  font-size: 16px;
  font-family: 'Arial', sans-serif;
  background-color: transparent;
  color: #333;
  overflow: hidden; /* 隐藏滚动条 */
}

/* 预览内容 */
.preview-content {
  height: 100%;
  overflow: auto; /* 使用内部滚动条 */
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

/* 保存并发布按钮 */
.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 1000; /* 确保按钮在最上层 */
}

.scroll-to-top:hover {
  background-color: #0056b3;
}
</style>