<template>
  <div class="app-container">
    <div class="box">
      <div class="filter">
        <el-form :model="form" ref="formRef" :inline="true">
          <el-form-item label="班级">
            <el-select
              v-model="form.classId"
              placeholder="请选择班级"
              clearable
              style="width: 200px"
              @change="changeClass"
            >
              <el-option
                v-for="op in classOption"
                :key="op.id"
                :label="op.className"
                :value="op.id"
              /> </el-select
          ></el-form-item>
          <el-form-item v-if="subjectOption.length > 1" label="学科">
            <el-select
              v-model="form.subjectId"
              placeholder="请选择学科"
              clearable
              style="width: 200px"
              @change="changeSubject"
            >
              <el-option
                v-for="op in subjectOption"
                :key="op.id"
                :label="op.name"
                :value="op.id"
              /> </el-select
          ></el-form-item>
        </el-form>
      </div>
      <div v-loading="loading" class="submit">
        <div v-if="studentSubmitList.length === 0" class="empty">暂无数据</div>
        <template v-else>
          <div
            v-for="i in studentSubmitList"
            :key="i.id"
            class="submit_item"
            @click="clickCorrect(i)"
          >
            <div class="submit_item_picture">
              <img :src="i.submitUrl" alt="" />
              <div v-if="i.status === 1" class="status">已批改</div>
            </div>
            <div class="stu_name">
              <span>{{ i.className }}</span>
              <span>{{ i.stuName }}</span>
            </div>
            <div class="submit_time">{{ i.submitTime }}</div>
          </div>
        </template>
      </div>
      <pagination
        v-show="page.total > 0"
        :total="page.total"
        v-model:page="page.pageNum"
        v-model:limit="page.pageSize"
        @pagination="getTemporaryJobList"
      />
    </div>

    <SignImage
      v-model="signImageDia.show"
      :src="signImageDia.src"
      :data="signImageDia.data"
      @onSave="onSave"
    ></SignImage>
  </div>
</template>

<script setup>
import {
  getClassList,
  getTemporaryJobList as getTemporaryJobListApi,
  fileUpload,
  updateTemporaryJob,
  getSubjectList as getSubjectListApi,
} from "@/api";

import SignImage from "@/views/classInteraction/temporaryHomeWork/SignImage.vue";

// 图片批改
const signImageDia = reactive({
  show: false,
  src: "",
  data: {},
});
const form = ref({
  classId: "",
  subjectId: undefined,
  clientType: 1,
});
const classOption = ref([]);
const subjectOption = ref([]);
const page = ref({
  pageSize: 10,
  pageNum: 1,
  total: 0,
});

const studentSubmitList = ref([]);

const loading = ref(false);
const correctObj = ref();
// 老师批改
function clickCorrect(i) {
  correctObj.value = i;
  signImageDia.show = true;
  signImageDia.src = i.submitUrl;
  signImageDia.data = {
    submitUrl: i.submitUrl,
    markUrl: i.markUrl,
  };
}
// 图片批注结果
async function onSave(file, info) {
  info.markLoading = true;
  loading.value = true;
  try {
    const res = await fileUpload({ file });
    info.markAnswerPic = `${info.markAnswerPic || ""}${
      info.markAnswerPic ? "," : ""
    }${res.data.url}`;
    const res1 = await updateTemporaryJob({
      id: correctObj.value.id,
      markUrl: res.data.url,
      clientType: 1,
    });
    if (res1.code === 200) {
      getTemporaryJobList();
    }
  } finally {
    info.markLoading = false;
    loading.value = false;
  }
}
// 获取班级
async function init() {
  try {
    const res = await getClassList();
    classOption.value = res.data;
  } catch (err) {
    console.log(err);
  }
}
// 获取老师学科
async function getSubjectList() {
  try {
    const res = await getSubjectListApi();
    subjectOption.value = res;
  } catch (err) {
    console.log(err);
  }
}
const changeClass = (val) => {
  form.value.classId = val;
  getTemporaryJobList();
};
const changeSubject = (val) => {
  form.value.subjectId = val;
  getTemporaryJobList();
};
// 临时作业列表
async function getTemporaryJobList() {
  loading.value = true;
  try {
    const res = await getTemporaryJobListApi({
      ...form.value,
      ...page.value,
    });
    studentSubmitList.value = res.rows;
    page.value.total = res.total;
    loading.value = false;
  } catch (err) {
    console.log(err);
    loading.value = false;
  }
}
onMounted(() => {
  init();
  getSubjectList();
  getTemporaryJobList();
});
</script>

<style lang="scss" scoped>
.box {
  background-color: #fff;
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 4px;
  .submit {
    display: flex;
    flex-wrap: wrap;
    .empty {
      padding: 64px;
      width: 100%;
      text-align: center;
      color: #85888e;
    }
    &_item {
      margin: 24px;
      box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
      border: 1px solid #e4e7ed;
      border-radius: 6px;
      &_picture {
        position: relative;
        width: 220px;
        height: 160px;
        &:hover {
          cursor: pointer;
        }

        .status {
          position: absolute;
          bottom: 0;
          right: 0;
          padding: 4px 6px;
          font-size: 14px;
          font-weight: 500;
          color: #fff;
          background-color: #75bd42;
        }
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          border-radius: 8px;
        }
      }
      .stu_name {
        margin: 12px 0;
        text-align: center;
        font-size: 18px;
        span {
          display: block;
        }
      }
      .submit_time {
        padding: 4px 0;
        text-align: center;
        font-size: 16px;
      }
    }
  }
}
</style>
