<template>
  <div class="course-viewer-content" v-loading="loading">
    <div class="course-viewer-content-hd">
      <h3 class="course-viewer-content-hd__title">课程大作业</h3>
    </div>
    <div class="course-viewer-content-bd">
      <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 label="附件" 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.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>
    </div>
  </div>
</template>

<script>
// componetns
import VEditor from './editor.vue'
import VUpload from './upload.vue'
// api
import * as api from '../../api/index'
export default {
  name: 'CourseWork',
  components: { VEditor, VUpload },
  props: {
    // 课程详情接口返回的数据
    data: { type: Object, default: () => {} }
  },
  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 '6552021107166150656'
    },
    // 课程ID
    cid() {
      return '6568035374902280192'
    },
    // 是否批改
    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>
