<!--
  Description: 批改页面中的写作要求
  Author: XiaoYu
  Created Date: 2024-7-24
-->


<template>
    <div class="homework-details">
      <div class="homework-details-info">
        <div class="homework-details-text">
          <div class="title">
            {{data.assignmentName}}
          </div>
          <div class="item">
            <span style="font-weight: 600">作业描述: </span>
            {{data.description}}
          </div>
          <div class="file">

            <template v-if="data.descriptionFile || data.attachments">
              <div>
                <span>相关文件下载：</span>
                <template v-if="data.descriptionFile">
                  <el-link  @click="downloadFile(data.descriptionFile,data.assignmentName)">作业要求</el-link>
                </template>
                <template v-if="data.attachments">
                  <span v-for="(item, index) in data.attachments" :key="index">
                    <span v-if="index !== 0">，</span>
                    <el-link @click="downloadFile(item, '附件' + index)">附件{{ index+1 }}</el-link>
                  </span>
                </template>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  
  
  </template>
  
  <script lang="ts" setup>
  import useApis from "@/apis";
  import {useRoute} from "vue-router";
  import {onMounted, reactive} from "vue";
  import type {AssignmentVO} from "@/types/vo";
  import './studentWritingRequirements.scss'
  
  
  const apis = useApis()
  const route = useRoute()
  const assignmentId = +route.params.assignmentId //string转number
  
  let data = reactive<AssignmentVO>({
    assignmentId: null,
    assignmentName: "",
    description: "",
    descriptionFile: null,
    attachments: null,
    teacherId: null,
    courseId: null,
    startTime: "",
    endTime: "",
    createTime: "",
    status: ""
  })
  
  
  
  const fetchData = () => {
    apis.getAssignmentById(assignmentId)
        .then((res: any) => {
          Object.assign(data, res.data.data)
        })
  }

  
  
  onMounted(() => {
    fetchData()
  })
  </script>
  
  <script lang="ts">
  export default {
    name: "StudentEssay",
    methods: {  
    downloadFile(url:string, title:string) {  
      // 创建一个链接元素  
      const link = document.createElement('a');  
      link.href = url; // 设置链接的href为文件URL  
      link.download = `${title}.docx`;  
  
      // 模拟点击链接以触发下载  
      document.body.appendChild(link);  
      link.click();  
  

    },  
  },  

  }
  </script>
  
  
  
  