<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import { getWorkDetail, updateWork } from '../api'
import VEditor from '@/components/tinymce/Index.vue'

const emit = defineEmits<Emits>()
const ruleFormRef = ref<FormInstance>()
// 封面类型
// 封面状态
const form: any = reactive({
  course_name: '',
  student_name: '',
  student_sno_number: '',
  score: '',
  title: '',
  content: '',
  attachments: [],
  is_critiqued: ''
})
const rules = reactive<FormRules>({
  score: [{ required: true, message: '请输入得分', trigger: 'blur' }]
})
const props = defineProps({
  isShowCheckDialog: {
    type: Boolean,
    required: true
  },
  id: {
    type: String,
    required: true
  }
})
interface Emits {
  (e: 'update:isShowCheckDialog', isShowCheckDialog: boolean): void
  (e: 'create'): void
}

// 取消
const handleCancel = () => {
  emit('update:isShowCheckDialog', false)
}
// 确认
const handleConfirm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(valid => {
    if (valid) {
      updateWork({ id: props.id, score: form.score }).then(() => {
        emit('update:isShowCheckDialog', false)
        emit('create')
      })
    }
  })
}
// 获取大作业详情
getWorkDetail({ id: props.id }).then(res => {
  Object.keys(form).forEach(key => {
    form[key] = res.data[key]
  })
  if (form.score === '0.00') {
    form.score = ''
  }
  form.attachments = JSON.parse(form.attachments)
})
</script>
<template>
  <el-dialog :model-value="isShowCheckDialog" draggable :before-close="handleCancel" width="40%" title="批改大作业">
    <el-form :model="form" label-width="110px" :rules="rules" ref="ruleFormRef" label-suffix="：">
      <el-row>
        <el-col :span="12">
          <el-form-item label="课程名称" prop="type"> {{ form?.course_name }} </el-form-item></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="学生姓名" prop="type"> {{ form.student_name }}</el-form-item></el-col
        >
        <el-col :span="12">
          <el-form-item label="学号" prop="type"> {{ form.student_sno_number }} </el-form-item></el-col
        >
      </el-row>
      <el-form-item label="得分" prop="score">
        <el-input-number
          v-model="form.score"
          :min="1"
          :max="100"
          :controls="false"
          :disabled="form.is_critiqued === '1'"
        />
      </el-form-item>

      <el-form-item label="大作业标题" prop="title">
        <el-input v-model="form.title" autosize type="textarea" placeholder="Please input" disabled />
      </el-form-item>
      <el-form-item label="大作业正文" prop="content">
        <v-editor v-model="form.content" class="editor" :height="200" disabled></v-editor>
      </el-form-item>
      <el-form-item label="相关附件" prop="attachments">
        <div v-for="(item, index) in form.attachments" :key="index">
          <a :href="item.url" style="color: #aa1941" target="_blank">{{ item.name }}</a>
        </div>
      </el-form-item>
    </el-form>
    <template #footer v-if="form.is_critiqued !== '1'">
      <span>
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm(ruleFormRef)">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<style>
.el-input-number:placeholder {
  text-align: left;
}
</style>
