<template>
  <div
    class="sheet-complete-container"
    ref="baseInfoRef"
    @mouseout="isShowInfoEdit = false"
    @mouseover="isShowInfoEdit = true"
  >
    <!-- <p style="margin-left: 100px; font-weight: bold; color: #000">二、填空题（共{{ completeItems.length }}题，总计 {{ totalScore }} 分）</p> -->
    <!-- <BaseTitleEditor ids="completeTitleEditor" :content="'二、填空题（共' + completeItems.length + '题，总计' + totalScore + '分)'"></BaseTitleEditor> -->
	<div  v-if="isRender">
		<BaseEditor ids="completeEditor" :items="items" type="0"></BaseEditor>
	</div>
  </div>
</template>
 
<script>
import BaseTitleEditor from './BaseTitleEditor'
import Snap from "imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js";
import BaseEditor from './BaseEditor'
import {
  PAPER_W,
  PAPER_H,
  CONTENT_MT,
  CONTENT_ML,
  ANCHORPROP,
  CONTENT_START_X,
  CONTENT_START_Y,
  INFO_W,
  INFO_H,
  INFO_ITEM_GAP,
  INFO_ITEM_MARGIN,
  ID_LENGTH,
  INFO_LEFT_X,
  INFO_LEFT_W,
  ID_TITLE_H,
  ID_TITLE_Y,
  NUMBER_CELL_H,
  NUMBER_ITEM_W,
  NUMBER_ITEM_H,
  NUMBER_ITEM_MT,
  NUMBER_ITEM_ML,
} from "@/utils/sheetConfig.js";
export default {
  props: {
    items: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  components:{ BaseEditor,BaseTitleEditor },
  data() {
    return {
	  isRender:true,
      isShowInfoEdit: false,
      editModal: false,
      completeGroup: null,
      snap: null,
      svgHeight: 0,
      number: 5,
      completeItems: [],
    };
  },
  created() {
    // this.snap = Snap("#sheetCompleteSvg");
  },
  methods: {
  },
  mounted() {
    this.$EventBus.$on("doRefresh", () => {
      this.isRender = false
      setTimeout(() => {
        this.$store.commit('clearFixArr')
        this.$store.commit('clearPage')
        // document.getElementById('pdfDom').scrollIntoView()
        this.isRender = true
      },)
    });
  },
  computed:{
    totalScore(){
      console.log(this.completeItems)
      return this.completeItems.length ? this.completeItems.map(i => i.score).reduce((a,b) => a + b) : 0
    }
  },
  watch: {
    items: {
      // 数据变化时执行的逻辑代码
      handler(n, old) {
        if (n.length) {
          let objectiveArr = ["complete"];
          this.completeItems = n.filter((item) =>
            objectiveArr.includes(item.type)
          );
        }
      },
      immediate:true,
      // 开启深度监听
      deep: true,
    },
  },
};
</script>
<style scoped>
.sheet-complete-container {
  position: relative;
  width: 750px;
}


.edit-title {
  margin: 10px 0;
}
</style>
 