<template>
  <container :title="chapter.name" v-loading="loading">
    <el-steps direction="vertical" v-if="data.curriculum">
      <el-step :title="$t('viewerWork.workStep1')" status="process">
        <template v-slot:description>
          <div v-html="data.curriculum.curriculum_essay"></div>
          <p>{{ $t('viewerWork.workDeadline') }}：{{ data.essay_date }}</p>
        </template>
      </el-step>
      <el-step :title="$t('viewerWork.workStep2')" 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="$t('viewerWork.workTheme.label')" prop="essay_name">
              <el-input
                v-model="ruleForm.essay_name"
                :placeholder="$t('viewerWork.workTheme.placeholder')"
                maxlength="50"
              ></el-input>
            </el-form-item>
            <el-form-item :label="$t('viewerWork.workDescription.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">
                {{ $t('viewerWork.workUrl.label') }}
                <!-- <template v-slot:tip>只支持docx格式的文件，文件小于10M</template> -->
              </v-upload>
            </el-form-item>
          </el-form>
        </template>
      </el-step>
      <el-step :title="$t('viewerWork.workStep3')" status="process">
        <template #title>{{ $t('viewerWork.workStep3') }}（{{ data.essay_date }}）</template>
        <template v-slot:description>
          <div class="work-bottom" v-if="detail">
            <div class="info">
              <template v-if="isRevised">
                <div class="paper-check">
                  <p>{{ $t('viewerWork.correctionTime') }}：{{ detail.check_date }}</p>
                  <!-- <div class="paper-check-item">
                    <b>{{ $t('viewerWork.score') }}：</b>
                    {{ detail.grade || detail.score }}
                  </div> -->
                  <div class="paper-check-item">
                    <b>{{ $t('viewerWork.comments') }}：</b>
                    <div class="edit_html" v-html="detail.check_comments"></div>
                  </div>
                </div>
              </template>
              <template v-else-if="detail.created_time">
                <p class="help">
                  {{ $t('viewerWork.submitted', { time: detail.created_time }) }}
                </p>
                <template v-if="detail.updated_time && detail.updated_time !== detail.created_time">
                  <p class="help">{{ $t('viewerWork.submitDateTime') }}： {{ detail.updated_time }}</p>
                </template>
                <div class="paper-check">
                  <div class="paper-check-item">
                    <b>{{ $t('viewerWork.comments') }}：</b>
                    <div class="edit_html" v-html="detail.check_comments"></div>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <div class="buttons">
            <el-tooltip :content="$t('viewerWork.workSubmitButtonTips')" placement="right">
              <el-button type="primary" :disabled="isRevised" :loading="submitLoading" @click="onSubmit">{{
                submitText
              }}</el-button>
            </el-tooltip>
          </div>
        </template>
      </el-step>
    </el-steps>
  </container>
</template>

<script>
// componets
import Container from '../common/container.vue'
import VEditor from '@/components/tinymce'
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: this.$t('viewerWork.workTheme.rule'), trigger: 'blur' }],
        essay_description: [{ required: true, message: this.$t('viewerWork.workDescription.rule'), trigger: 'change' }],
        url: [{ required: true, message: this.$t('viewerWork.workUrl.rule'), trigger: 'change' }]
      },
      detail: null,
      loading: false,
      messageInstance: null,
      submitLoading: false
    }
  },
  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 ? this.$t('viewerWork.revisedButtonText') : this.$t('viewerWork.submitText')
    }
  },
  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.messageInstance && this.messageInstance.close()
      if (!this.ruleForm.essay_name) {
        this.messageInstance = this.$message.error(this.$t('viewerWork.workTheme.rule'))
        return
      }
      if (!this.ruleForm.essay_description) {
        this.messageInstance = this.$message.error(this.$t('viewerWork.workDescription.rule'))
        return
      }
      if (!this.ruleForm.url) {
        this.messageInstance = this.$message.error(this.$t('viewerWork.workUrl.rule'))
        return
      }
      const params = Object.assign(this.ruleForm, {
        semester_id: this.sid,
        course_id: this.cid
      })
      this.handleSubmitRequest(params)
    },
    // 请求提交接口
    handleSubmitRequest(params) {
      this.submitLoading = true
      api
        .updateCourseWork(this.sid, this.cid, params)
        .then(response => {
          if (response.status) {
            this.$message.success(this.$t('viewerWork.examSubmitSuccess'))
            this.getDetail()
          } else {
            this.$message.error(response.data.error)
          }
        })
        .catch(error => {
          this.$message.error(error.message)
        })
        .finally(() => {
          this.submitLoading = false
        })
    }
  },
  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-step__main {
  overflow: hidden;
}
::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;
  b {
    white-space: nowrap;
  }
}
</style>
