GCLS_Page_Learn/src/components/course/FinishCourseware.vue

<template>
  <el-dialog
    class="finish-courseware"
    :visible="dialogVisible"
    :width="dialogWidth"
    :title="$t('Key332')"
    :close-on-click-modal="false"
    @close="dialogClose"
  >
    <bookquestion
      v-if="category === 'OC' || category.length === 0"
      ref="courseware"
      :context="context"
      @handleBookUserAnswer="handleBookUserAnswer"
    />

    <bookailp
      v-else-if="category === 'AILP'"
      :context="context"
      :ui-type="ui_type"
      :preview-width="820"
      :preview-height="461"
      @handleBookUserAnswer="handleBookUserAnswer"
    />

    <template v-else-if="category === 'NPC'">
      <booknpc
        v-if="context"
        ref="booknpc"
        :is-show-save="true"
        task-model=""
        :context="context"
        :theme-color="themeColor"
        @finishTaskMaterial="saveNPCAnswer"
      />
    </template>

    <template v-if="category == 'NNPE'">
      <booknnpe v-if="context" :context="context" :theme-color="themeColor" />
    </template>

    <div v-if="category !== 'NPC'" slot="footer">
      <el-button type="primary" @click="finishTaskMaterial">
        {{ $t('Key82') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { GetCoursewareContent_View, FinishMyTaskMaterial_Student } from '@/api/course';

export default {
  props: {
    dialogVisible: {
      default: false,
      type: Boolean
    },
    id: {
      default: '',
      type: String
    },
    coursewareId: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      context: null,
      ui_type: '',
      exam_answer: '',
      category: '',
      dialogWidth: '860px',
      themeColor: ''
    };
  },
  watch: {
    coursewareId(val) {
      if (!val) {
        this.context = null;
        this.exam_answer = '';
        return;
      }

      GetCoursewareContent_View({ id: this.coursewareId }).then(({ content, category, book_theme_color }) => {
        if (!content) {
          this.context = null;
          return;
        }
        this.category = category;
        if (category === 'OC' || category.length === 0) {
          this.dialogWidth = '860px';
          this.context = {
            id: this.coursewareId,
            ui_type: JSON.parse(content).question.ui_type,
            content: JSON.parse(content)
          };
          this.$nextTick(() => {
            this.$refs.courseware.handleAnswerTimeStart();
          });
        }
        if (category === 'AILP') {
          this.dialogWidth = '860px';
          const contents = JSON.parse(content);
          if (contents.question && contents.question.length > 0) {
            this.context = JSON.parse(contents.question);
            this.ui_type = contents.ui_type ? contents.ui_type : '';
          }
        }
        if (category === 'NPC') {
          this.themeColor = book_theme_color;
          this.dialogWidth = '900px';
          this.context = JSON.parse(content);
          this.$nextTick(() => {
            this.$refs.booknpc.handleAnswerTimeStart();
          });
          return;
        }
        if (category === 'NNPE') {
          this.dialogWidth = '900px';
          this.themeColor = book_theme_color;
          this.context = JSON.parse(content);
        }
      });
    }
  },
  created() {
    this.updateWordPack({
      word_key_list: ['Key332', 'Key82', 'Key333', 'Key334']
    });
  },
  methods: {
    saveNPCAnswer(content, duration) {
      const loading = this.$loading();
      FinishMyTaskMaterial_Student({
        task_id: this.id,
        material_type: 'COURSEWARE',
        material_id: this.coursewareId,
        exam_answer: {
          duration,
          content
        }
      })
        .then(() => {
          this.$message.success(this.$i18n.t('Key334'));
          this.dialogClose();
          this.$router.go(0);
        })
        .finally(() => {
          loading.close();
          this.exam_answer = '';
        });
    },

    finishTaskMaterial() {
      if (this.exam_answer.length === 0 && this.category === 'GCLS') {
        this.$message.warning(this.$i18n.t('Key333'));
        return;
      }
      const loading = this.$loading();
      FinishMyTaskMaterial_Student({
        task_id: this.id,
        material_type: 'COURSEWARE',
        material_id: this.coursewareId,
        exam_answer: this.exam_answer
      })
        .then(() => {
          this.$message.success(this.$i18n.t('Key334'));
          this.dialogClose();
          this.$router.go(0);
        })
        .finally(() => {
          loading.close();
          this.exam_answer = '';
        });
    },

    handleBookUserAnswer(data) {
      this.exam_answer = data;
    },

    dialogClose() {
      this.$emit('dialogClose');
    }
  }
};
</script>

<style lang="scss">
@import '~@/styles/mixin';

.finish-courseware {
  @include dialog;
}
</style>