<template>
  <div>
    <div class="exersices-content">
      <IconText :text="'题目'" :color="'#2d8cf0'" :icon="'ios-create'" style="margin-bottom:15px;"></IconText>
      <div>
        <div ref="editor" style="text-align:left"></div>
      </div>
    </div>
    <div class="exersices-option">
      <IconText :text="'参考答案'" :color="'#FF871C'" :icon="'md-reorder'"></IconText>
      <div style="margin-top:15px;">
        <div ref="answerEditor" style="text-align:left"></div>
      </div>
    </div>
  </div>
</template>
<script>
  import E from 'wangeditor'
  import IconText from '@/components/evaluation/IconText.vue'
  export default {
    components: {
      IconText
    },
    props: ['editInfo'],
    data() {
      return {
        defaultConfig: {
          uploadImgServer: '/api/file/uploadWangEditor', //图片上传地址
          showLinkImg: false, //是否展示网络图片链接上传
          uploadFileName: 'files', //上传图片后台获取的文件名
        },
        stemContent: "",
        stemEditor:null,
        answerContent: "",
        answerEditor:null

      }
    },
    methods: {
      
    },
    mounted() {
      let stemEditor = new E(this.$refs.editor);
      stemEditor.customConfig = this.defaultConfig;
      stemEditor.customConfig.onchange = (html) => {
        this.stemContent = html;
      }
      stemEditor.create();

      let answerEditor = new E(this.$refs.answerEditor);
      answerEditor.customConfig = this.defaultConfig;
      answerEditor.customConfig.onchange = (html) => {
        this.answerContent = html;
      }
      answerEditor.create();

      this.stemEditor = stemEditor;
      this.answerEditor = answerEditor;

         //判断是否为编辑状态
      if (Object.keys(this.editInfo).length > 0) {
          this.stemContent = this.editInfo.question;
          this.answerContent = this.editInfo.answer;
          this.stemEditor.txt.html(this.editInfo.question);
          this.answerEditor.txt.html(this.editInfo.answer);
          
        }

    }
  }
</script>
<style scoped>
  @import"../index/CreateExercises.css";
</style>
