<!--
  Description: 教师批改界面。改写于EditPage
  Author: XiaoYu
  Created Date: 2024-7-24
-->
<template>

  <div class="my-correct">
    <!-- 写作题目 及 作文内容 -->

    <div class="my-correct-header">
      <el-card>
        <StudentWritingRequirements />
      </el-card>
      <div style="height: 10px"></div>
      <el-card>
        <StudentEssay :studentId="studentId" :assignmentId="assignmentId" />
      </el-card>
    </div>

    <div class="right-side">
      <!-- update: 仅保留AI历史对话 -->
      <div class="my-correct-record">
        <h2>学生与AI对话历史记录</h2>
        <AIChatter :dialogueId="dataForm.dialogueId" :messages="dataForm.messages" :is-teacher="true" />
        <el-button @click="showDialog = true">查看行为记录</el-button>
      </div>

      <!-- 教师评分、修改意见及评价 -->
      <div class="my-correct-remark">
        <Remark :studentId="studentId" :assignmentId="assignmentId" />
      </div>
    </div>
  </div>

  <el-dialog v-model="showDialog" title="文件信息">

      <el-table :data="fileList" stripe>
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="assignmentId" label="作业 ID"></el-table-column>
        <el-table-column prop="recordFileUrl" label="文件链接" width="300px">
          <template #default="scope">
            <a :href="scope.row.recordFileUrl" target="_blank">{{ scope.row.recordFileUrl }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="时间"></el-table-column>
        <el-table-column prop="studentId" label="学生 ID"></el-table-column>
      </el-table>

    <template #footer>
      <el-button @click="showDialog = false">取消</el-button>
      <el-button type="primary" @click="downloadAllFiles">导出</el-button>
    </template>
  </el-dialog>

</template>

<script setup lang="ts">
import AIChatter from "@/components/AIChatter/AIChatter.vue";
import Dictionaries from "@/views/Home/component/Dictionaries/index.vue";
import useApis from "@/apis";
import { useStore } from "@/store";
import router from "@/router"
import { onMounted, reactive, ref, watchEffect } from "vue";
import type { engagementVO } from "@/types/vo";
import type { IDialogue } from "@/types/dialogue.ts";
import Edit from "@/views/Home/component/Edit/index.vue";
import Slider from '@/views/Home/component/Silder/index.vue'
import "./index.scss"
import { useRoute } from 'vue-router'
import StudentEssay from "../Home/component/StudentEssay/StudentEssay.vue";
import StudentWritingRequirements from "../Home/component/StudentEssay/StudentWritingRequirements.vue";
import Remark from "../Home/component/Remark/Remark.vue";


// 获得路由中的assignmentId
const route = useRoute()
const assignmentId = Number(route.params.assignmentId)
const studentId = Number(route.query.studentId)

const apis = useApis()
const store = useStore()

const fileList = reactive([]);

const showDialog = ref(false);

const dataForm = reactive<{
  messages: IDialogue[],
  dialogueId: string;
  engagement: engagementVO
}>({
  messages: [],
  dialogueId: '',
  engagement: {} as engagementVO
})

// 获取数据
async function fetchData() {
  await apis.getAIDialogues(assignmentId, studentId)
    .then((_res: any) => {
      const data = _res.data.data
      Object.assign(dataForm, {
        dialogueId: data?.dialogueId,
        messages: data?.messages.content,
        engagement: dataForm.engagement
      })
    })

  await apis.getEngagement(studentId, assignmentId)
    .then((_res: any) => {
      Object.assign(dataForm, {
        dialogueId: dataForm.dialogueId,
        messages: dataForm.messages,
        engagement: _res.data.data
      })
    }).catch((_err: any) => {
      console.log(_err)
      router.push("/login")
    })
}

const getBehaviorRecords = () => {
  apis.selectBehaviorRecord(studentId, assignmentId)
      .then(res => {
        Object.assign(fileList, res.data.data)
        // fileList.push(res.data.data)
        // fileList.value = res.data.data
      })
      .catch(err => {
        console.log(err)
      })
}

const downloadAllFiles = () => {
  fileList.forEach((item) => {
    const link = document.createElement('a');
    link.href = item.recordFileUrl;
    link.download = '';
    link.click();
    link.remove();
  });
  showDialog.value = false;
};

onMounted(() => {
  fetchData()
  getBehaviorRecords()
})

</script>

<script lang="ts">
export default {
  methods: {
    goBack() {
      // 使用Vue Router的$router.go(-1)来返回上一个页面  
      this.$router.go(-1);
    },
  },
  name: "CorrectPage"
}
</script>