<template>

  <el-page-header content="实验批阅" style="margin-bottom: 30px" @back="this.$router.push('/Login')"/>
  <el-card style="max-width: 1200px;margin:0 auto;background-color: #f9fafb">
    <el-space style="margin-bottom: 10px">
      <el-input placeholder="请输入学生ID" v-model="form.studentId"/>
      <el-button @click="getList">搜索</el-button>
    </el-space>
    <!--表格展示-->
    <div style="margin-top: 20px">
      <el-table :data="list" border stripe v-loading="loading">
        <el-table-column align="center" prop="experimentName" label="实验名称"/>
        <el-table-column align="center" prop="studentId" label="学号"/>
        <el-table-column align="center" prop="className" label="班级"/>
        <el-table-column align="center" prop="username" label="学生姓名"/>
        <el-table-column align="center" prop="score" label="得分"/>
        <el-table-column align="center" label="操作" width="250px">
          <template #default="scope">
            <el-button type="primary" @click="openDialog(scope.row)">
              <span style="margin-left: 3px">评分</span>
            </el-button>
            <el-button type="info" v-if="scope.row.filePath===null" disabled>未上传</el-button>
            <el-button type="success" v-if="scope.row.filePath!==null" @click="download(scope.row.filePath)">下载文件
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
        @size-change="getList"
        @current-change="getList"
        v-model:current-page="pageNum"

        v-model:page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!--添加用户的对话框-->
    <el-dialog title="添加用户" v-model="dialogVisible" width="30%" style="padding-top: 30px">
      <el-form ref="addForm" :model="form" label-width="100px">
        <el-form-item label="ID">
          <el-input disabled v-model="form.id"/>
        </el-form-item>
        <el-form-item label="实验ID">
          <el-input disabled v-model="form.experimentId"/>
        </el-form-item>
        <el-form-item label="实验名称">
          <el-input disabled v-model="form.experimentName"/>
        </el-form-item>
        <el-form-item label="学生ID">
          <el-input disabled v-model="form.studentId"/>
        </el-form-item>
        <el-form-item label="文件">
          <el-button v-if="form.filePath === null" disabled>未上传文件</el-button>
          <el-button v-if="form.filePath !== null" @click="download(form.filePath)">下载</el-button>
        </el-form-item>
        <el-form-item label="得分">
          <el-input v-model="form.score" placeholder="请输入得分..."></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="update">确 定</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
    </el-dialog>
  </el-card>

</template>

<script>

let formData = new FormData;
export default {
  name: "ExperimentReview",
  data() {
    return {
      list: [],
      loading: false,
      form: {
        id: '',
        experimentId: '',
        studentId: '',
        filePath: '',
        score: ''
      },
      dialogVisible: false,
      pageNum: 1,
      pageSize: 20,
      total: 0
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true;
      this.$http({
        url: '/getRecordST/' + this.pageNum + '/' + this.pageSize,
        method: 'POST',
        data: this.form
      }).then(res => {

        this.list = res.data.list;
        this.total = res.data.total;
        this.loading = false;
      });
    },
    download(fileName) {
      this.$http({
        url: '/download/' + fileName,
        method: 'GET',
        responseType: 'blob', // important
      }).then((response) => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();
      });
    },
    openDialog(row) {
      //给form赋值
      this.form.id = row.recordId;
      this.form.experimentId = row.experimentId;
      this.form.studentId = row.studentId;
      this.form.filePath = row.filePath;
      this.form.score = row.score;
      this.form.experimentName = row.experimentName;
      this.dialogVisible = true;
    },
    update() {
      this.$http({
        url: '/records',
        method: 'put',
        data: this.form
      }).then(res => {
        this.dialogVisible = false;
        this.form = {
          id: '',
          experimentId: '',
          studentId: '',
          filePath: '',
          score: ''
        };
        this.getList();
      }).catch(res => {
        this.$message.error("请注意评分为数字");
      })
    },
  }
}
</script>

<style scoped>

</style>
