<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 v-for="(item,index) in options" :class="'editor-wrap-'+item" style="margin-top:10px;display:flex">
        <span class="fl-center option-order">{{String.fromCharCode(64 + parseInt(index+1))}}</span>
        <div :ref="'multipleEditor'+item" style="text-align:left" class="option-editor" @click="optionClick(item)"></div>
        <span :class="['fl-center', 'option-setting', trueArr.indexOf(item) > -1 ? 'option-true':'']" @click="settingAnswer(item,index)">{{ trueIndex.indexOf(item) > -1 ? '正确答案' :'设为答案' }}</span>
        <span class="fl-center option-delete" @click="deleteOption(item,index)"><Icon type="ios-close-circle" /></span>
      </div>
      <p class="option-add"><span @click="addOption()">+ 添加选项 </span><span style="color:rgb(60,196,82);margin-left:15px;font-weight:bold">正确答案 ：{{showTrueAnswers}}</span></p>
    </div>
  </div>
</template>
<script>
  import E from 'wangeditor'
  import IconText from '@/components/evaluation/IconText.vue'
  export default {
    components: {
      IconText
    },
    props: ['editInfo'],
    data() {
      return {
        options: [...new Array(4).keys()], //默认四个选项
        existOptions: [...new Array(4).keys()],
        initFlag: true,
        trueArr: [0],
        trueIndex: [0],
        stemContent: "",
        stemEditor:null,
        transferArr: [],
        optionsContent: [],
        defaultConfig: {
          uploadImgServer: '/api/file/uploadWangEditor', //图片上传地址
          showLinkImg: false, //是否展示网络图片链接上传
          uploadFileName: 'files', //上传图片后台获取的文件名
        }
      }
    },
    created() {
      if (Object.keys(this.editInfo).length > 0) {
        this.options = [...new Array(this.editInfo.options.length).keys()];
      }
    },
    methods: {
      initEditors() {
        //Editor默认配置
        for (let i of this.options) {
          let that = this;
          let editor = new E(that.$refs['multipleEditor' + i][0]);
          editor.customConfig = this.defaultConfig;
          editor.customConfig.onblur = function () {
            let allToolbars = document.getElementsByClassName('option-editor');
            for (let i = 0; i < allToolbars.length; i++) {
              if (allToolbars[i].children.length) {
                allToolbars[i].children[0].style.visibility = "hidden"
              }
            }
          };
          editor.customConfig.onchange = (html) => {
            let key = String.fromCharCode(64 + parseInt(i + 1));
            let codeArr = this.optionsContent.map(item => item.code);
            //如果已经编辑过则 修改选项内容
            if (codeArr.indexOf(key) != -1) {
              this.optionsContent[codeArr.indexOf(key)].value = html;
            } else { //否则创建新选项
                let option = {
                  code: key,
                  value:html
                }
                this.optionsContent.push(option);
            }
          }
          editor.create();

        //如果是编辑状态 则将选项内容回显
          if (Object.keys(this.editInfo).length > 0) {
            editor.txt.html(this.editInfo.options[i].value);
          }
        }
      },
      //设置正确答案
      settingAnswer(item,index) {
        this.$nextTick(() => {
          if (this.trueArr.indexOf(item) > -1) {
            this.trueArr.splice(this.trueArr.indexOf(item), 1);
            this.trueIndex.splice(this.trueIndex.indexOf(index), 1);
          } else {
            this.trueArr.push(item);
            this.trueIndex.push(index);
            this.trueArr = this.trueArr.sort(); //选项排序
            this.trueIndex = this.trueIndex.sort(); //选项排序
          }
        })
      },
      //添加选项
      addOption() {
        let that = this;
        let newIndex = parseInt(this.options[this.options.length - 1]) + 1;
        let optionsLength = this.options.length;
        if (optionsLength < 8) {
          this.options.push(newIndex);
          this.$nextTick(() => {
            let editor = new E(that.$refs['multipleEditor' + newIndex][0]);
            editor.customConfig = this.defaultConfig;

            editor.customConfig.onchange = (html) => {
              let key = String.fromCharCode(64 + parseInt(newIndex + 1));
              let codeArr = this.optionsContent.map(item => item.code);
              //如果已经编辑过则 修改选项内容
              if (codeArr.indexOf(key) != -1) {
                this.optionsContent[codeArr.indexOf(key)].value = html;
                console.log(this.optionsContent.map(item => item.code))
                console.log(this.optionsContent.map(item => item.value))
              } else { //否则创建新选项
                  let option = {
                    code: key,
                    value:html
                  }
                this.optionsContent.push(option);
                console.log(this.optionsContent.map(item => item.code))
                console.log(this.optionsContent.map(item => item.value))
              }
            }
            editor.create();
          })
        } else {
          this.$Message.warning("最多只有8个选项！");
        }
      },
      //删除选项
      deleteOption(item,index) {
        let letter = String.fromCharCode(64 + parseInt(index + 1));
        if (this.options.length > 2) {
          this.options.splice(this.options.indexOf(item), 1);
          this.optionsContent.splice(index, 1);
          //如果删除了已有选项 后面的code要降1
          for (let i in this.optionsContent) {
            if (i >= index) {
              this.optionsContent[i].code = String.fromCharCode(64 + parseInt(parseInt(i) + 1));
            }
          }
          if (this.transferArr.indexOf(letter) > -1) {
            this.trueIndex.splice(this.trueIndex.length - 1, 1);//从正确索引中删除
            this.trueArr.splice(this.trueArr.indexOf(item), 1);//从正确选项中删除
          } else {
            this.trueIndex = this.trueIndex.map(item => item > index ? item - 1 : item); //如果删除错误选项 则后面的正确选项要前移动一位
          }
        } else {
          this.$Message.warning("至少保留两个选项！");
        }
      },
      //选项点击事件聚焦
      optionClick(index) {
        let allToolbars = document.getElementsByClassName('option-editor');
        let that = this;
        for (let i = 0; i < allToolbars.length; i++) {
          allToolbars[i].children[0].style.visibility = "hidden"
        }
        setTimeout(function () {
          let currentToolBar = that.$refs['multipleEditor' + index][0].children[0];
          currentToolBar.style.visibility = "visible";
        }, 100)
      },
    },
    mounted() {

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

       //判断是否为编辑状态
      if (Object.keys(this.editInfo).length > 0) {
        this.stemEditor.txt.html(this.editInfo.question);
        this.stemContent = this.editInfo.question;
        this.optionsContent = this.editInfo.options;
        this.trueIndex = this.editInfo.answer.map(item => item.charCodeAt() - 65);
        this.trueArr = this.editInfo.answer.map(item => item.charCodeAt() - 65);
        this.options = this.editInfo.options.map((item,index) => index);
      }

      //初始化选项编辑器
      this.initEditors();
    },
    computed: {
      //选项顺序转化成字母
      showTrueAnswers() {
        let arr = this.trueIndex.map(item => String.fromCharCode(64 + parseInt(item + 1)));
        this.transferArr = arr;
        return this.transferArr.sort().join('');
      }
    }
  }
</script>

