
<template>
  <container :title="chapter.name" v-loading="loading">
    <el-steps direction="vertical" v-if="data.curriculum">
      <el-step title="阅读大作业要求" status="process">
        <template v-slot:description>
          <div v-html="data.curriculum.curriculum_essay"></div>
          <p>截止日期：{{data.essay_date}}</p>
        </template>
      </el-step>
      <el-step title="填写作业主题、正文，上传附件（点击“提交”保存）" status="process">
        <template v-slot:description>
          <el-form
            :model="ruleForm"
            :rules="rules"
            :hide-required-asterisk="true"
            :disabled="isRevised"
            label-position="top"
            ref="ruleForm"
          >
            <el-form-item label="主题" prop="essay_name">
              <el-input v-model="ruleForm.essay_name" placeholder="主题"></el-input>
            </el-form-item>
            <el-form-item label="正文" prop="essay_description">
              <!-- 编辑器 -->
              <v-editor :disabled="isRevised" v-model="ruleForm.essay_description"></v-editor>
            </el-form-item>
            <el-form-item prop="url">
              <!-- 文件上传 -->
              <v-upload v-model="ruleForm.url">
                请上传对应的文件附件：
                <!-- <template v-slot:tip>只支持docx格式的文件，文件小于10M</template> -->
              </v-upload>
            </el-form-item>
          </el-form>
        </template>
      </el-step>
      <el-step title="截止日期前提交" status="process">
        <template v-slot:description>
          <div class="work-bottom" v-if="detail">
            <div class="info">
              <template v-if="isRevised">
                <div class="paper-check">
                  <p>批改时间：{{detail.check_date}}</p>
                  <div class="paper-check-item">
                    <b>评分：</b>
                    {{detail.score}}
                  </div>
                  <div class="paper-check-item">
                    <b>评语：</b>
                    <div class="edit_html" v-html="detail.check_comments"></div>
                  </div>
                </div>
              </template>
              <template v-else-if="detail.created_time">
                <p class="help">已于 {{detail.created_time}} 提交，等待老师批改中。</p>
                <template v-if="detail.updated_time && detail.updated_time !== detail.created_time">
                  <p class="help">最近提交时间： {{detail.updated_time}}</p>
                </template>
              </template>
            </div>
          </div>
          <div class="buttons">
            <el-tooltip content="在获老师批改之前，可以多次提交，将以最后一次提交为准" placement="right">
              <el-button type="primary" @click="onSubmit" :disabled="isRevised">{{submitText}}</el-button>
            </el-tooltip>
          </div>
        </template>
      </el-step>
    </el-steps>
  </container>
</template>

<script>
// componets
import Container from '../common/container.vue'
import VEditor from '../common/editor.vue'
import VUpload from '../common/upload.vue'
// api
import * as api from '../../api'

// 课程大作业
export default {
  name: 'CourseWork',
  components: { Container, VEditor, VUpload },
  props: {
    // 当前选中的
    chapter: {
      type: Object,
      default() {
        return {}
      }
    },
    // 课程详情接口返回的数据
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      ruleForm: {
        essay_name: '',
        essay_description: '',
        url: ''
      },
      rules: {
        essay_name: [
          { required: true, message: '请输入主题', trigger: 'blur' },
          { max: 5, message: '最多输入 50 个字符', trigger: 'blur' }
        ],
        essay_description: [
          { required: true, message: '请输入正文', trigger: 'blur' }
        ],
        url: [{ required: true, message: '请上传附件', trigger: 'change' }]
      },
      detail: null,
      loading: false,
      messageInstance: null
    }
  },
  computed: {
    // 学期ID
    sid() {
      return this.$route.params.sid
    },
    // 课程ID
    cid() {
      return this.$route.params.cid
    },
    // 是否批改
    isRevised() {
      return this.detail ? !!this.detail.check_date : false
    },
    // 提交按钮文本
    submitText() {
      return this.isRevised ? '已批改' : '提交'
    }
  },
  methods: {
    // 获取大作业详情
    getDetail() {
      this.loading = true
      api
        .getCourseWork(this.sid, this.cid)
        .then(response => {
          this.detail = Array.isArray(response) ? null : response
          if (this.detail) {
            this.ruleForm.essay_name = this.detail.essay_name
            this.ruleForm.essay_description = this.detail.essay_description
            this.ruleForm.url = this.detail.file_url
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 提交
    onSubmit() {
      this.$refs.ruleForm
        .validate()
        .then(response => {
          const params = Object.assign(this.ruleForm, {
            semester_id: this.sid,
            course_id: this.cid
          })
          this.handleSubmitRequest(params)
        })
        .catch(() => {
          this.messageInstance && this.messageInstance.close()
          this.messageInstance = this.$message.error('还有题目未做，不能提交')
        })
    },
    // 请求提交接口
    handleSubmitRequest(params) {
      api
        .updateCourseWork(this.sid, this.cid, params)
        .then(response => {
          if (response.status) {
            this.$message.success('提交成功，等待批改')
            this.getDetail()
          } else {
            this.$message.error(response.data.error)
          }
        })
        .catch(error => {
          this.$message.error(error.message)
        })
    }
  },
  beforeMount() {
    this.getDetail()
  }
}
</script>

<style lang="scss" scoped>
p {
  margin: 0;
}
::v-deep .el-step__title {
  border-bottom: 1px dashed #cecece;
}
::v-deep .el-step__description {
  padding: 20px 0 30px;
  font-size: 14px;
}
::v-deep .el-form-item__label {
  font-weight: bold;
  line-height: 24px;
  padding: 0 0 5px;
}
.work-bottom {
  .info {
    color: #999;
    line-height: 28px;
  }
}
.buttons {
  padding: 20px 0;
  ::v-deep .el-button {
    width: 120px;
  }
}
.paper-check {
  padding: 10px;
  color: #000;
  border: 1px solid #dedede;
}
.paper-check-item {
  display: flex;
}
</style>
