<!--
  Description: 学生提交的作文内容组件
  Author: XiaoYu
  Created Date: 2024-7-24
-->


<template>
    <div>
        <div>
            <span style="font-weight: 600 ">学生姓名: </span>
            {{ data.studentName }}
        </div>

        <!-- 最后使用的在线预览是Office Web Viewer（微软） -->
        <!-- TODO:如果height不用绝对值而是百分比，则无法调整，一直是半边的 -->
        <div class="iframe-wrapper">
            <!-- height计算剩余高度 -->
            <!--<iframe :src="officeUrl" frameborder="0" width="100%" height="550px">-->
            <!--</iframe>-->
          {{ data.content }}
        </div>

    </div>
</template>
<!-- TODO:文件无法渲染 -->
<script setup lang="ts">
import {onMounted, defineProps, computed, reactive, toRaw} from 'vue';

import useApis from '@/apis';
import type {engagementVO} from "@/types/vo";
import {Delta} from "@vueup/vue-quill"; //  API 钩子函数

const apis = useApis()

let data = reactive({
    loading: false,
    docxUrl: "",
    studentName: "",
    content: ""
})

// 调用 API 获取文档 URL  
const fetchDocxUrl = async (studentId: number, assignmentId: number) => {
    data.loading = true;
    await apis.getEngagement(studentId, assignmentId)
        .then(_res => {
            if (_res.data.code === 200 && _res.data.data.fileUrl)
                data.docxUrl = _res.data.data.fileUrl
        }).catch(_err => {
            console.log(_err)
        }).finally(() => {
            data.loading = false
        })
};

async function fetchUserAndPrint(studentId) {
    apis.findUserById(props.studentId)
        .then((res: any) => {
            data.studentName = res.data.data.records[0].name
        })
}
// Office Web Viewer（微软）实现在线预览
const officeUrl = computed(() => {
    return `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(data.docxUrl)}`;
});

const fetchData = () => {
  apis.getEngagement(props.studentId, props.assignmentId)
      .then(res => {
        const engagementData = res.data.data;
        const engagement: engagementVO = Object.assign({}, engagementData);
        if(engagement.quillContent != null){
          data.content = engagement.textContent
        }
      })
      .catch(err => {
        console.log(err)
      })
}

// 组件挂载时调用，请求数据的方法
onMounted(() => {
    fetchDocxUrl(props.studentId, props.assignmentId)
    fetchUserAndPrint(props.studentId)
  fetchData()
});

const props = defineProps<{
    studentId: number;
    assignmentId: number;
}>();


</script>

<script lang="ts">


</script>

<style scoped>
.loading {
    /* 加载状态的样式 */
    text-align: center;
    padding: 20px;
}

.error {
    /* 错误消息的样式 */
    color: red;
    text-align: center;
    padding: 20px;
}

.iframe-wrapper {
  white-space: pre-wrap;
    margin-top: 15px;
    /* 上边距 */
    /* margin-bottom: 20px; */
    /* 下边距 */
}
</style>
