eep_page/src/views/book/courseware/preview/components/common/PreviewMixin.js

import SerialNumberPosition from './SerialNumberPosition.vue';
import PinyinText from '@/components/PinyinText.vue';
import AnswerAnalysis from '@/views/book/courseware/preview/common/AnswerAnalysis.vue';
import PreviewOperation from '@/views/book/courseware/preview/common/PreviewOperation.vue';
import AnswerCorrect from '@/views/book/courseware/preview/common/AnswerCorrect.vue';

import { isEnable } from '@/views/book/courseware/data/common';
import { ContentGetCoursewareComponentContent, ContentSaveCoursewareComponentContent } from '@/api/book';
import { sanitizeHTML } from '@/utils/common';

const mixin = {
  data() {
    return {
      sanitizeHTML,
      typeList: ['interaction'],
      answer: { answer_list: [], is_right: false }, // 用户答案
      isJudgingRightWrong: false, // 是否判断对错
      isShowRightAnswer: false, // 是否显示正确答案
      disabled: false, // 是否禁用
      isShowParse: false, // 是否显示解析
      isEnable,
      loader: false,
      visibleAnswerAnalysis: false, // 是否显示答案解析弹窗
      answerAnalysisState: null, // 答案解析弹窗前的状态快照
      visibleAnswerCorrect: false, // 是否显示批改弹窗
      isCheckCorrect: false, // 是否查看批改信息
    };
  },
  provide() {
    return {
      openAnswerCorrect: (isCheckCorrect) => this.openAnswerCorrect(isCheckCorrect),
    };
  },
  inject: ['getLang', 'getChinese', 'convertText', 'getTitleList', 'getPermissionControl'],
  props: {
    id: {
      type: String,
      default: '',
    },
    content: {
      type: String,
      default: '',
    },
    background: {
      type: Object,
      default: () => ({}),
    },
    coursewareId: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: '',
    },
    isMobile: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    showLang() {
      return this.getLang() !== 'ZH';
    },
    permissionControl() {
      return this.getPermissionControl();
    },
  },
  watch: {
    content: {
      handler(newVal) {
        if (this.type === 'edit') return;
        if (!newVal) return;
        this.data = JSON.parse(newVal);
      },
      immediate: true,
    },
    'permissionControl.can_answer': {
      handler(newVal) {
        this.disabled = !newVal;
      },
      immediate: true,
    },
  },
  components: {
    SerialNumberPosition,
    PinyinText,
    AnswerAnalysis,
    PreviewOperation,
    AnswerCorrect,
  },
  created() {
    // 这里分为 预览 和 编辑调整位置、视频互动组件 三种情况
    // 预览时，content 直接传入
    // 编辑调整位置时，content 需要通过接口获取
    if (this.type === 'edit') {
      this.getCoursewareComponentContent();
    }
  },
  methods: {
    getCoursewareComponentContent() {
      ContentGetCoursewareComponentContent({ courseware_id: this.coursewareId, component_id: this.id }).then(
        ({ content }) => {
          if (content) {
            let oldData = JSON.parse(content);
            if (oldData.type === 'audio') {
              let p = oldData.property || {};
              if (!p.file_name_display_mode) p.file_name_display_mode = 'true';
              if (p.view_method === 'independent' && !p.style_mode) {
                p.style_mode = 'middle';
              }
              if (!p.style_mode) p.style_mode = 'big';
              if (p.view_method === 'icon') {
                p.file_name_display_mode = 'false';
                p.view_method = 'independent';
                p.style_mode = 'small';
              }
            }
            this.data = oldData;
          }
          this.loader = true;
        },
      );
    },

    /**
     * 获取用户答案
     * @returns {array} 用户答案
     */
    getAnswer() {
      return this.answer;
    },
    /**
     * 显示答案
     * @param {boolean} isJudgingRightWrong 是否判断对错
     * @param {boolean} isShowRightAnswer 是否显示正确答案
     * @param {object} userAnswer 用户答案
     * @param {boolean} disabled 是否禁用
     */
    showAnswer(isJudgingRightWrong, isShowRightAnswer, userAnswer, disabled) {
      // if (this.loader === false) {
      //   return setTimeout(() => this.showAnswer(isJudgingRightWrong, isShowRightAnswer, userAnswer, disabled), 100);
      // }

      this.isJudgingRightWrong = isJudgingRightWrong;
      this.isShowRightAnswer = isShowRightAnswer;
      this.disabled = disabled;
      if (userAnswer) this.answer = userAnswer;
    },
    judgeCorrect() {
      this.isJudgingRightWrong = true;
      this.isShowRightAnswer = false;
    },
    /**
     * 获取批改信息
     * @returns {string} 批改信息
     */
    getAnswerCorrect() {
      return this.data.answer_correct || '';
    },
    /**
     * 设置批改信息
     * @param {string} correct 批改信息
     */
    setAnswerCorrect(correct) {
      this.$set(this.data, 'answer_correct', correct);
    },
    /**
     * 得到序号外部样式
     */
    getAreaStyle() {
      if (!isEnable(this.data.property.sn_display_mode)) {
        return {
          grid: `"main" / 1fr`,
        };
      }
      const position = this.data.property.sn_position;
      let grid = '';

      if (position.includes('right')) {
        grid = `"main position" / 1fr auto`;
      } else if (position.includes('left')) {
        grid = `"position main" / auto 1fr`;
      } else if (position.includes('top')) {
        grid = `"position" auto "main" 1fr`;
      } else if (position.includes('bottom')) {
        grid = `"main" 1fr "position" auto`;
      }

      return {
        grid,
      };
    },
    /**
     * 计算组件背景样式
     * @returns {Object} 组件背景样式对象
     */
    getComponentStyle() {
      const {
        background_image_url: bcImgUrl = '',
        background_position: pos = {},
        background: back,
      } = this.background || {};

      let canvasStyle = {
        backgroundSize: bcImgUrl ? `${pos.width}% ${pos.height}%` : '',
        backgroundPosition: bcImgUrl ? `${pos.left}% ${pos.top}%` : '',
        backgroundImage: bcImgUrl ? `url(${bcImgUrl})` : '',
        backgroundColor: bcImgUrl ? `rgba(255, 255, 255, ${1 - back?.image_opacity / 100})` : '',
      };

      if (back) {
        if (back.mode === 'image') {
          canvasStyle['backgroundBlendMode'] = 'lighten';
        } else {
          canvasStyle['backgroundBlendMode'] = '';
        }

        if (back.imageMode === 'fill') {
          canvasStyle['backgroundRepeat'] = 'repeat';
          canvasStyle['backgroundSize'] = '';
          canvasStyle['backgroundPosition'] = '';
        } else {
          canvasStyle['backgroundRepeat'] = 'no-repeat';
        }

        if (back.imageMode === 'stretch') {
          canvasStyle['backgroundSize'] = '100% 100%';
        }

        if (back.imageMode === 'adapt') {
          canvasStyle['backgroundSize'] = 'contain';
        }

        if (back.imageMode === 'auto') {
          canvasStyle['backgroundPosition'] = `${pos.imgX}% ${pos.imgY}%`;
        }

        if (back.mode === 'color') {
          canvasStyle['backgroundColor'] = back.color;
          canvasStyle['backgroundImage'] = '';
          canvasStyle['backgroundRepeat'] = '';
          canvasStyle['backgroundPosition'] = '';
          canvasStyle['backgroundSize'] = '';
        }

        if (back.enable_border) {
          canvasStyle['border'] = `${back.border_width}px ${back.border_style} ${back.border_color}`;
        } else {
          canvasStyle['border'] = 'none';
        }

        if (back.enable_radius) {
          canvasStyle['border-top-left-radius'] = `${back.top_left_radius}px`;
          canvasStyle['border-top-right-radius'] = `${back.top_right_radius}px`;
          canvasStyle['border-bottom-left-radius'] = `${back.bottom_left_radius}px`;
          canvasStyle['border-bottom-right-radius'] = `${back.bottom_right_radius}px`;
        } else {
          canvasStyle['border-radius'] = '0';
        }
      }

      return canvasStyle;
    },
    // 显示答案与解析页面
    showAnswerAnalysis() {
      if (!this.answerAnalysisState) {
        this.answerAnalysisState = {
          disabled: this.disabled,
          isJudgingRightWrong: this.isJudgingRightWrong,
        };
      }
      this.visibleAnswerAnalysis = true;
      this.disabled = true;
      this.isJudgingRightWrong = this.permissionControl.can_judge_correct;
      this.isShowRightAnswer = this.permissionControl.can_show_answer;
    },
    // 关闭答案与解析页面
    closeAnswerAnalysis() {
      if (this.answerAnalysisState) {
        this.disabled = this.answerAnalysisState.disabled;
        this.isJudgingRightWrong = this.answerAnalysisState.isJudgingRightWrong;
        this.isShowRightAnswer = false;
        this.answerAnalysisState = null;
      } else {
        this.disabled = false;
        this.isJudgingRightWrong = false;
        this.isShowRightAnswer = false;
      }
    },
    /**
     * 显示批改页面
     * @param {boolean} isCheckCorrect 是否查看批改
     */
    openAnswerCorrect(isCheckCorrect) {
      this.visibleAnswerCorrect = true;
      this.isCheckCorrect = isCheckCorrect;
    },
    /**
     * @description 关闭批改页面，并传递批改信息
     * @param {string} correct 批改信息
     */
    closeAnswerCorrect(correct) {
      this.visibleAnswerCorrect = false;
      this.$set(this.data, 'answer_correct', correct);
    },
    getNoTextContentData() {
      let noTextContentData = JSON.parse(JSON.stringify(this.data));
      if (noTextContentData.content) {
        noTextContentData.content = '';
      }
      return noTextContentData;
    },
    /**
     * @description 保存样式模板
     * @param {string} courseware_id 课件id
     */
    saveStyleTemplate(courseware_id) {
      const content = this.getNoTextContentData();
      return ContentSaveCoursewareComponentContent({
        courseware_id,
        component_id: this.id,
        component_type: this.data.type,
        content: JSON.stringify(content),
      });
    },
  },
};

export default mixin;