<template>
  <div class="play-paper">
    <div class="play-paper-body">
      <div class="play-paper-title">
        <div>
          <h3>{{chapterName}}</h3>
        </div>
      </div>
      <div class="play-paper-content play-chapter-work">
        <el-form ref="form" :disabled="disabled">
          <ul>
            <li v-for="(item, index) in questions" :key="index">
              <div class="work-number">{{index + 1}}.</div>
              <div class="work-title">
                <div class="edit_html" v-html="item.question_content"></div>
              </div>
              <!-- 文本内容 -->
              <v-editor v-model="item.descreption" :disabled="disabled"></v-editor>
              <!-- 上传附件 -->
              <v-upload v-model="item.file_url">请上传对应的文件附件：</v-upload>
            </li>
          </ul>
        </el-form>
        <template v-if="deadLine">
          <p style="color: red">请于截止日期 {{deadLine}} 前提交</p>
        </template>
        <!-- 驳回状态 -->
        <div class="area-btns" v-if="homeData.status === 1">
          <el-button type="primary" @click="onReEdit">重新编辑</el-button>
          <div class="play-paper-check">
            <h4>作业被驳回，点击“重新编辑”按钮重新编辑内容再次提交</h4>
            <div class="play-paper-check-item">
              <b>驳回时间：</b>
              {{homeData.checker_time}}
            </div>
            <div class="play-paper-check-item">
              <b>驳回说明：</b>
              <div class="edit_html" v-html="homeData.check_comments"></div>
            </div>
          </div>
        </div>
        <div class="area-btns" v-else>
          <el-button
            type="primary"
            @click="submitWork"
            :disabled="homeData.status === 0 || deadLineFlag"
          >{{homeData.status === 0 ? '已批改' : '提交'}}</el-button>
          <span class="help-info">&emsp;&emsp;在获老师批改之前，可以多次提交，将以最后一次提交为准</span>
          <template v-if="homeData.status === 0 && homeData.checker_time">
            <div class="play-paper-check">
              <h4>
                已获批改
                <small>批改于{{homeData.checker_time}}</small>
              </h4>
              <div class="play-paper-check-item">
                <b>评分：</b>
                {{homeData.score}}
              </div>
              <div class="play-paper-check-item">
                <b>评语：</b>
                <div class="edit_html" v-html="homeData.check_comments"></div>
              </div>
            </div>
          </template>
          <template v-else-if="homeData.created_time">
            <p class="help">已于 {{homeData.created_time}} 提交，等待批改中</p>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cAction from '@action'
import Base64 from 'Base64'

import VEditor from '@/components/editor.vue'
import VUpload from '@/components/upload.vue'

export default {
  components: { VEditor, VUpload },
  props: {
    chapterId: { type: String, require: false },
    chapterWork: { type: Object, require: false },
    chapterName: { type: String, require: false },
    sid: { type: String, require: false },
    cid: { type: String, require: false },
    id: { type: String, require: false }
  },
  data() {
    return {
      homeData: {},
      deadLine: '',
      deadLineFlag: false,
      questions: [],
      disabled: false
    }
  },
  watch: {
    id: {
      handler() {
        this.loadAjax()
      }
    },
    chapterWork: {
      immediate: true,
      handler(data) {
        if (data.questions && data.questions.length) {
          this.questions = data.questions.map(item => {
            return Object.assign({}, item, { file_url: '', descreption: '' })
          })
          this.loadAjax()
        }
      }
    }
  },
  methods: {
    loadAjax() {
      const loading = this.$loading({
        lock: true,
        text: '',
        spinner: '',
        background: 'rgba(255, 255, 255, 0.9)'
      })
      cAction.Player.getHomework(this.sid, this.cid, this.id)
        .then(data => {
          if (Array.isArray(data)) {
            return
          }
          this.homeData = data
          // 状态处理
          this.disabled = data.status === 0 || data.status === 1
          const parseAnswers = JSON.parse(data.work_contents)
          this.questions = this.questions.map(item => {
            const found = parseAnswers.find(
              answer => answer.question_id === item.id
            )
            if (found) {
              return Object.assign({}, item, {
                file_url: found.file_url,
                descreption: Base64.decode(found.descreption)
              })
            } else {
              return item
            }
          })
        })
        .catch(e => {
          this.$message.error(e.message)
        })
        .finally(() => {
          loading.close()
        })
      setTimeout(() => {
        cAction.Player.getHomeworkStopTime(this.sid, this.cid, this.chapterId)
          .then(data => {
            this.deadLine = data.dead_line || ''
            const deadLine = data.dead_line
              ? new Date(data.dead_line).getTime()
              : ''
            this.deadLineFlag = new Date().getTime() > deadLine && !!deadLine
          })
          .catch(e => {
            this.$message.error(e.message)
          })
      }, 500)
    },
    submitWork() {
      const emptyValue = this.questions.find(item => item.descreption === '')
      if (emptyValue) {
        this.$message.error('请填写内容')
        return
      }
      const loading = this.$loading({
        lock: true,
        text: '',
        spinner: '',
        background: 'rgba(255, 255, 255, 0.9)'
      })
      // 组装提交的数据
      const answers = this.questions.map(item => {
        return {
          question_id: item.id,
          descreption: Base64.encode(item.descreption),
          file_url: item.file_url,
          is_encoded: 1
        }
      })
      cAction.Player.updateHomework({
        semester_id: this.sid,
        course_id: this.cid,
        chapter_id: this.chapterId,
        work_id: this.id,
        work_contents: JSON.stringify(answers),
        duration: 30 + Math.floor(Math.random() * 1000)
      })
        .then(data => {
          if (data.status) {
            this.$message({ type: 'success', message: '提交成功，等待批改' })
            this.loadAjax()
          }
        })
        .catch(e => {
          this.$message.error(e.message)
        })
        .finally(() => {
          loading.close()
        })
    },
    // 重新编辑
    onReEdit() {
      this.disabled = false
      this.homeData.status = -1
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .upload {
  margin: 10px 0 20px;
}
</style>
