import SerialNumberPosition from './SerialNumberPosition.vue';
import PinyinText from '@/components/PinyinText.vue';

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

const mixin = {
  data() {
    return {
      sanitizeHTML,
      answer: { answer_list: [], is_right: false }, // 用户答案
      isJudgingRightWrong: false, // 是否判断对错
      isShowRightAnswer: false, // 是否显示正确答案
      disabled: false, // 是否禁用
      isShowParse: false, // 是否显示解析
      isEnable,
      loader: false,
    };
  },
  inject: ['getLang', 'getChinese', 'convertText'],
  props: {
    id: {
      type: String,
      default: '',
    },
    content: {
      type: String,
      default: '',
    },
    coursewareId: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: '',
    },
  },
  computed: {
    showLang() {
      return this.getLang() !== 'zh';
    },
  },
  watch: {
    content: {
      handler(newVal) {
        if (this.type === 'edit') return;
        this.data = JSON.parse(newVal);
      },
      immediate: true,
    },
  },
  components: {
    SerialNumberPosition,
    PinyinText,
  },
  created() {
    // 这里分为 预览 和 编辑调整位置、视频互动组件 三种情况
    // 预览时，content 直接传入
    // 编辑调整位置时，content 需要通过接口获取
    if (this.type === 'edit') {
      this.getCoursewareComponentContent();
    }
  },
  methods: {
    getCoursewareComponentContent() {
      ContentGetCoursewareComponentContent({ courseware_id: this.coursewareId, component_id: this.id }).then(
        ({ content }) => {
          if (content) this.data = JSON.parse(content);
          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;
    },
    /**
     * 得到序号外部样式
     */
    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,
      };
    },
  },
};

export default mixin;