
<template>
  <container :title="chapter.name" v-loading="loading">
    <chapter-work-item
      v-for="(item, index) in questions"
      :disabled="isSubmited"
      :data="item"
      :index="index"
      :key="item.id"
      @change="onChange(item.id, ...arguments)"
    ></chapter-work-item>
    <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>
  </container>
</template>

<script>
// componets
import Container from '../../components/container.vue'
import ChapterWorkItem from './chapterWorkItem.vue'
// api
import * as api from '../../api/index'

// 章节作业
export default {
  name: 'ChapterWork',
  components: { Container, ChapterWorkItem },
  props: {
    // 当前选中的
    chapter: { type: Object, default: () => {} },
    // 课程详情接口返回的数据
    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'
    },
    // 当前页面的ID
    pid() {
      return this.$route.params.id
    },
    // 资源ID
    resourceId() {
      return this.chapter.resource_id
    },
    // 问题列表
    questions() {
      const homework = this.chapter.homework
      return homework ? homework.questions : []
    },
    // 是否批改
    isRevised() {
      return this.detail ? !!this.detail.check_date : false
    },
    // 提交按钮文本
    submitText() {
      return this.isRevised ? '已批改' : '提交'
    }
  },
  methods: {
    // 获取详情
    getDetail() {
      this.loading = true
      api
        .getChapterExam(this.sid, this.cid, this.resourceId)
        .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
        .sbumitChapterExam(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>
