<template>
  <div class="ev-container">
    <span class="ev-title"><Icon type="ios-paper" />{{isEdit?'编辑习题':'新建综合题'}}</span>
    <Divider />


    <div class="exersices-analysis">
      <IconText :text="'综合题题干'" :color="'#2892DD'" :icon="'md-list'" style="margin-bottom:15px;"></IconText>
      <div>
        <div ref="stemEditor" style="text-align:left"></div>
      </div>
    </div>

    <Button type="info" @click="handleAddChild" style="margin:20px 0 0 0">添加小题</Button>

    <div class="children-list">
      <div class="child-item" v-for="(item,index) in children"  @mouseenter="exerciseMouseover($event)" @mouseleave="exerciseMouseleave($event)">

        <div class="item-tools">
          <div class="item-tools-t flex-row-center" @click="handleEditChild(item)"><Icon type="ios-brush-outline" />编辑</div>
          <div class="item-tools-t flex-row-center" @click="handleDeleteChild(item)"><Icon type="ios-archive-outline" />删除</div>
          <div class="item-tools-t flex-row-center" v-show="index != 0" @click="handleMoveUp(index)"><Icon type="md-arrow-up" />上移</div>
          <div class="item-tools-t flex-row-center" v-show="index != (children.length - 1)" @click="handleMoveDown(index)"><Icon type="md-arrow-down" />下移</div>
        </div>


        <div class="item-question">
          <p><span style="font-weight:bold">小题 {{index+1}} : </span><span class="item-content" v-html="item.question"></span></p>
        </div>

        <div v-for="(option,optionIndex) in item.option" class="item-option">
          <p>{{String.fromCharCode(64 + parseInt(optionIndex+1))}} : <span class="item-content" v-html="option.value"></span></p>
        </div>

        <div class="item-answer">
          <span style="color:#01b4ef">【答案】:</span>
          <span v-html="item.answer[0] || item.answer" v-if="item.type == 'Subjective'"></span>
          <span :class="[ item.type == 'Complete' ? 'item-answer-item':'']" v-for="answer in item.answer" v-else-if="item.type == 'Complete'" v-html="answer"></span>
          <span :class="[ item.type == 'Complete' ? 'item-answer-item':'']" v-for="answer in item.answer" v-else>{{answer}}</span>
        </div>
        <div class="item-explain">
          <span style="color:#01b4ef">【解析】:</span>
          <span class="item-content" v-html="item.explain"></span>
        </div>
      </div>
      <div>
      </div>
    </div>

    <Modal v-model="addChildModal"
           title="新增小题"
           width="1000px"
           style="z-index:99999"
           :loading="loading">
      <CreateNewChild  v-if="isLoadModal" ref="newChild" :isChildEdit="isChildEdit" :editItem="editChild"></CreateNewChild>
      <div slot="footer">
        <Button type="text" size="large" @click="modalCancel">取消</Button>
        <Button type="primary" size="large" @click="getChildContent">确定</Button>
      </div>
    </Modal>

    <div class="save-wrap display-flex">
      <Button type="success" @click="getContent(exersicesType)">保存</Button>
      <Button type="success" @click="resetEditor" style="margin-left:10px">题库</Button>
    </div>
  </div>
</template>
<script>
  import "videojs-contrib-hls.js/src/videojs.hlsjs"
  import IconText from '@/components/evaluation/IconText.vue'
  import CreateNewChild from '@/view/evaluation/index/CreateNewChild.vue'
  import E from 'wangeditor'
  //默认创建题目模板
  const defaultExercise = {
    question: "",
    option: [],
    children: [],
    difficulty: "",
    answer: [],
    explain: "",
    type: ""
  }
  export default {
    components: {
      IconText, CreateNewChild
    },
    data() {
      return {
        isEdit: false,
        isLoadModal:false,
        isChildEdit: false,
        editChild: {},
        addChildModal: false,
        collapseIndex: "0",
        children: [{
          "shaCode": "d75e03a639c8febc5033908a1ee9d7207de1951a",
          "question": "若代数式在实数范围内有意义，则x的取值范为是（）",
          "option": [
            {
              "code": "A",
              "value": "x≥－2 "
            },
            {
              "code": "B",
              "value": "x＞－2 "
            },
            {
              "code": "C",
              "value": "x≥2 "
            },
            {
              "code": "D",
              "value": "x≤2"
            }
          ],
          "answer": [ "C" ],
          "explain": "<p  >二次根式有意义，被开方数是非负数，故x-2≥0，x大于等于2.</p><p  >备考指导：代数式有意义的条件，一般从三个方面考虑：</p><p  >（1）当表达式是整式时，<math xmlns:mml=\"http://www.w3.org/1998/Math/MathML\" xmlns:m=\"http://schemas.openxmlformats.org/officeDocument/2006/math\" xmlns=\"\"><mi>x</mi><mo>=</mo><mfrac><mrow><mo>-</mo><mi>b</mi><mo>±</mo><msqrt><msup><mrow><mi>b</mi></mrow><mrow><mn>2</mn></mrow></msup><mo>-</mo><mn>4</mn><mi>a</mi><mi>c</mi></msqrt></mrow><mrow><mn>2</mn><mi>a</mi></mrow></mfrac></math>可取全体实数；</p><p  >（2）当表达式是分式时，考虑分式的分母不能为0；</p><p  >（3）当表达式是二次根式时，被开方数非负．</p>",
          "type": "Single",
          "pShaCode": "d75e03a639c8febc5033908a1ee9d7207de1951a",
          "children": []
        },
        {
          "shaCode": "70986f6019e8e44f3cdcdc5e66823a9821facb92",
          "question": "下列计算正确的是（）",
          "option": [
            {
              "code": "A",
              "value": "2x2－4x2＝－2"
            },
            {
              "code": "B",
              "value": "3x＋x＝3x2"
            },
            {
              "code": "C",
              "value": "3x·x＝<img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAWCAIAAABc9GulAAAABGdBTUEAALGPC/xhBQAAAWtJREFUSEvllK2WgzAQhectIiMrKyORlchIJHIljxAZWYlERlYikZFIJBIZ2Z38QXq2gT2nrNqrSJp+zL0zAZ5/oA+hRt8rRgGAXPhdm7D7EdT0Da3VbFlmakvS9B57nv25K6nU7vE8qJbX+rG4x7OgWha8m8IihS66rW8hdaHGGPuxpo4XYtjOb9CpvQETvTOApwiJZva1jF1d1o9YpNMKHQSBBDO1BXA1h1VOZhCMNb6QRLlMMfYNak3c2liM6b8IekK79s0vEoM78RaK4XJC49ShcCDJ1admk0ne8FY/oGiowDty4a1OXWnJoFKzC3trc0YZ+4uWtm3rxcMdVQGlFK5N0uaMcpna5CDtnKP+CrkDxRwAyi7230WJOkjTK0JnxYGE5jnZSuOG0YIBRjnafoX7vae1UjtyBD85frXoe0nCSNlf/Aj5SavU0aVI7S+D9B9HoKySg/+r8721zCZ7GEE+0w/0r6HP5zdtsXjYqHWJ/gAAAABJRU5ErkJggg==\" style=\"width: 0.2916667in; height: 0.2291667in\" alt=\"图片 3\" />"
            },
            {
              "code": "D",
              "value": "4x6÷2x2＝2x3"
            }
          ],
          "answer": [ "C" ],
          "explain": "<p  >本题考查整式的基本运算，对选项进行逐项分析</p><div align=\"center\"><table   style=\"border: none;border-collapse: collapse;margin-bottom: .001pt;\"><tr><td  style=\"border-bottom: solid windowtext 1.0pt;border-left: solid windowtext 1.0pt;border-right: solid windowtext 1.0pt;border-top: solid windowtext 1.0pt;padding-bottom: 0;padding-left: 5.4pt;padding-right: 5.4pt;padding-top: 0;vertical-align: top;width: 40.15pt;\"><p  >选项</p></td><td  style=\"border-bottom: solid windowtext 1.0pt;border-left: solid windowtext 1.0pt;border-right: solid windowtext 1.0pt;border-top: solid windowtext 1.0pt;padding-bottom: 0;padding-left: 5.4pt;padding-right: 5.4pt;padding-top: 0;vertical-align: top;width: 224.45pt;\"><p  >逐项分析</p></td><td  style=\"border-bottom: solid windowtext 1.0pt;border-left: solid windowtext 1.0pt;border-right: solid windowtext 1.0pt;border-top: solid windowtext 1.0pt;padding-bottom: 0;padding-left: 5.4pt;padding-right: 5.4pt;padding-top: 0;vertical-align: top;width: 36.4pt;\"><p  >正误</p></td></tr><tr><td  style=\"border-bottom: solid windowtext 1.0pt;border-left: solid windowtext 1.0pt;border-right: solid windowtext 1.0pt;border-top: solid windowtext 1.0pt;padding-bottom: 0;padding-left: 5.4pt;padding-right: 5.4pt;padding-top: 0;vertical-align: top;width: 40.15pt;\"><p  >A</p></td><td  style=\"border-bottom: solid windowtext 1.0pt;border-left: solid windowtext 1.0pt;border-right: solid windowtext 1.0pt;border-top: solid windowtext 1.0pt;padding-bottom: 0;padding-left: 5.4pt;padding-right: 5.4pt;padding-top: 0;vertical-align: top;width: 224.45pt;\"><p  >2x2-4x2=-2x2≠-2</p></td><td  style=\"border-bottom: solid windowtext 1.0pt;border-left: solid windowtext 1.0pt;border-right: solid windowtext 1.0pt;border-top: solid windowtext 1.0pt;padding-bottom: 0;padding-left: 5.4pt;padding-right: 5.4pt;padding-top: 0;vertical-align: top;width: 36.4pt;\"><p  >×</p></td></tr><tr><td  style=\"border-bottom: solid windowtext 1.0pt;border-left: solid windowtext 1.0pt;border-right: solid windowtext 1.0pt;border-top: solid windowtext 1.0pt;padding-bottom: 0;padding-left: 5.4pt;padding-right: 5.4pt;padding-top: 0;vertical-align: top;width: 40.15pt;\"><p  >B</p></td><td  style=\"border-bottom: solid windowtext 1.0pt;border-left: solid windowtext 1.0pt;border-right: solid windowtext 1.0pt;border-top: solid windowtext 1.0pt;padding-bottom: 0;padding-left: 5.4pt;padding-right: 5.4pt;padding-top: 0;vertical-align: top;width: 224.45pt;\"><p  >3x+x=4x≠3x2</p></td><td  style=\"border-bottom: solid windowtext 1.0pt;border-left: solid windowtext 1.0pt;border-right: solid windowtext 1.0pt;border-top: solid windowtext 1.0pt;padding-bottom: 0;padding-left: 5.4pt;padding-right: 5.4pt;padding-top: 0;vertical-align: top;width: 36.4pt;\"><p  >×</p></td></tr><tr><td  style=\"border-bottom: solid windowtext 1.0pt;border-left: solid windowtext 1.0pt;border-right: solid windowtext 1.0pt;border-top: solid windowtext 1.0pt;padding-bottom: 0;padding-left: 5.4pt;padding-right: 5.4pt;padding-top: 0;vertical-align: top;width: 40.15pt;\"><p  >C</p></td><td  style=\"border-bottom: solid windowtext 1.0pt;border-left: solid windowtext 1.0pt;border-right: solid windowtext 1.0pt;border-top: solid windowtext 1.0pt;padding-bottom: 0;padding-left: 5.4pt;padding-right: 5.4pt;padding-top: 0;vertical-align: top;width: 224.45pt;\"><p  >3x·x=3x2</p></td><td  style=\"border-bottom: solid windowtext 1.0pt;border-left: solid windowtext 1.0pt;border-right: solid windowtext 1.0pt;border-top: solid windowtext 1.0pt;padding-bottom: 0;padding-left: 5.4pt;padding-right: 5.4pt;padding-top: 0;vertical-align: top;width: 36.4pt;\"><p  >√</p></td></tr><tr><td  style=\"border-bottom: solid windowtext 1.0pt;border-left: solid windowtext 1.0pt;border-right: solid windowtext 1.0pt;border-top: solid windowtext 1.0pt;padding-bottom: 0;padding-left: 5.4pt;padding-right: 5.4pt;padding-top: 0;vertical-align: top;width: 40.15pt;\"><p  >D</p></td><td  style=\"border-bottom: solid windowtext 1.0pt;border-left: solid windowtext 1.0pt;border-right: solid windowtext 1.0pt;border-top: solid windowtext 1.0pt;padding-bottom: 0;padding-left: 5.4pt;padding-right: 5.4pt;padding-top: 0;vertical-align: top;width: 224.45pt;\"><p  >4x6÷2x2=2x4≠2x3</p></td><td  style=\"border-bottom: solid windowtext 1.0pt;border-left: solid windowtext 1.0pt;border-right: solid windowtext 1.0pt;border-top: solid windowtext 1.0pt;padding-bottom: 0;padding-left: 5.4pt;padding-right: 5.4pt;padding-top: 0;vertical-align: top;width: 36.4pt;\"><p  >×</p></td></tr></table></div><p  >备考指导：整式加减，实质是合并同类项，只把系数相加减，字母及字母的指数不变;整式乘法，系数相乘作为积的系数，相同的字母按照同底数幂的乘法法则相乘，单独的字母（式）作为积的一个因式；整式相除，系数相除作为商的系数，相同的字母按照同底数幂的除法法则相除，被除式中单独的字母（式）作为积的一个因式.</p>",
          "type": "Single",
          "pShaCode": "70986f6019e8e44f3cdcdc5e66823a9821facb92",
          "children": []
        }],
        loading: true,
        editInfo: {},
        exersicesType: 'Single',
        exersicesDiff: "0",
        analysisContent: "",
        stemContent: "",
        analysisEditor: null,
        videoHtml: ""
      }
    },
    created() {
      let editItem = this.$route.params.item; //编辑题目
      if (editItem) {
        this.editInfo = editItem;
        console.log(editItem);
      }
    },
    methods: {
      getContent: function (type) {
        let exerciseItem = Object.assign({}, defaultExercise);


        //判断获取的数据是否有空数据以及是否为空字符串
        if (this.checkContent(exerciseItem) && this.getSimpleText(exerciseItem.question) && this.getSimpleText(exerciseItem.explain)) {
          this.$router.push({
            name: 'exercisesList',
            params: {
              exerciseItem: exerciseItem,
            }
          })
        } else {
          alert("请将题目填写完整！");
        }

        console.log(exerciseItem);

      },

      //调用子组件的获取内容方法获取子题的内容
      getChildContent() {
        this.$refs.newChild.getContent(this.$refs.newChild._data.exersicesType);
        if (this.$refs.newChild._data.isCreateFinish) {
          this.addChildModal = false;
          this.children.push(this.$refs.newChild._data.exerciseItem)
        }
      },

      handleAddChild() {
        //this.$refs.newChild.resetEditor();
        this.addChildModal = true;
        this.isChildEdit = false;
        this.isLoadModal = false;
         this.$nextTick(()=>{
              this.isLoadModal = true
         })
        console.log(this.isLoadModal);
      },


      //提取富文本内容中的文本
      getSimpleText(html) {
        if (html) {
          var msg = html.replace(/<(?!img|video).*?>/g, '');//执行替换成空字符
          return msg.replace(/&nbsp;/ig, "");
        }
      },
      //排除对象空属性
      checkContent(Obj) {
        let flag = true;
        for (let key in Obj) {
          if (!Obj[key]) {
            flag = false;
          }
        }
        return flag;
      },

      modalCancel() {
        //this.isLoadModal = false;

        this.addChildModal = false;
      },
      //重置编辑器
      resetEditor() {
        this.$router.push({
          name: 'exercisesList'
        })
      },

      
      //题目鼠标滑过事件
      exerciseMouseover(e) {
        e.preventDefault();
        e.target.children[0].style.display = "block";
      },

      //题目鼠标移出事件
      exerciseMouseleave(e) {
        e.preventDefault();
        e.target.children[0].style.display = "none";
      },

      //编辑子题
      handleEditChild(item) {
        item.options = item.option;
        item.difficulty = item.difficulty || 2;
        this.$router.push({
          name: 'editChild',
          params: {
            item: item,
          }
        })
        //this.editChild = item;
        //this.isLoadModal = true;
        //this.isChildEdit = true;
        //this.addChildModal = true;
      },

      //删除子题
      handleDeleteChild(item) {
        this.$Modal.confirm({
          title: '删除题型',
          content: '<p>确认删除该小题吗？</p>',
          okText:"确认",
          cancelText:"取消",
          onOk: () => {
            this.children.splice(this.children.indexOf(item), 1);
            this.$Message.success("删除成功！");
          }
        });
      },

      //子题顺序操作
      moveItems(arr, index1, index2) {
        arr[index1] = arr.splice(index2, 1, arr[index1])[0];
        return arr;
      },

      //子题上移操作
      handleMoveUp(index) {
        this.moveItems(this.children, index, index - 1);
      },

      //子题下移操作
      handleMoveDown(index) {
        this.moveItems(this.children, index, index + 1);
      }

    },
    mounted() {
      let stemEditor = new E(this.$refs.stemEditor)
      stemEditor.customConfig.onchange = (html) => {
        this.stemContent = html
      },
      stemEditor.customConfig.uploadImgServer = '/api/file/uploadWangEditor'
      stemEditor.customConfig.showLinkImg = false;
      stemEditor.customConfig.uploadFileName = 'files'
      stemEditor.create();
      this.stemEditor = stemEditor;

      let editItem = this.$route.params.item; //编辑题目
      if (editItem) {
        this.isEdit = true;
        this.editInfo = editItem;
        this.children = editItem.children;
        this.exersicesDiff = editItem.difficulty || 0;
        this.exersicesType = editItem.type;
        this.stemContent = editItem.question;

        this.stemEditor.txt.html(editItem.question);
        //this.optionsContent = editItem.options;
        //this.analysisContent = editItem.explain;
        //this.analysisEditor.txt.html(editItem.explain);
        //重新渲染题目难度
        //let diffDom = document.getElementsByClassName('exersices-attr-diff')[0].getElementsByClassName('ivu-radio-wrapper')[editItem.difficulty];
        //let colorArr = ['#32CF74', '#E8BE15', '#F19300', '#EB5E00', '#D30000'];
        //diffDom.style.background = colorArr[editItem.difficulty];
        //diffDom.style.color = "#fff";
      }

    }
  }
</script>
<!--<style src="../index/CreateCompose.css" scoped></style>-->

<!--<style src="../index/CreateExercises.css" scoped></style>-->
<style scoped>
@import "../index/CreateCompose.css";

</style>
