<template>
  <div
    class="sheet-subjective-container"
    ref="baseInfoRef"
    @mouseout="isShowInfoEdit = false"
    @mouseover="isShowInfoEdit = true"
  >
    <!-- <p style="margin:10px 0 10px 100px; font-weight: bold; color: #000">三、问答题（共{{ subjectiveItems.length }}题，总计 {{  totalScore  }} 分）</p> -->
    <!-- <BaseTitleEditor ids="subjectiveTitleEditor" :content="'三、问答题（共' + subjectiveItems.length + '题，总计' + totalScore + '分)'"></BaseTitleEditor> -->
    <div v-if="isRender">
      <BaseEditor
        v-for="(item, index) in subjectiveItems"
        :key="index"
        :ids="'subjectiveEditor' + index"
        :items="[item]"
        type="1"
      ></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,
      subjectiveGroup: null,
      snap: null,
      svgHeight: 0,
      subjectiveItems: [],
    };
  },
  created() {
    this.$store.commit('clearFixArr')
  },
  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.subjectiveItems)
      return this.subjectiveItems.length ? this.subjectiveItems.map(i => i.score).reduce((a,b) => a + b) : 0
    }
  },
  watch: {
    items: {
      // 数据变化时执行的逻辑代码
      handler(n, old) {
        if (n.length) {
          this.subjectiveItems = n;
        }
      },
	  immediate:true,
      // 开启深度监听
      deep: true,
    },
  },
};
</script>
<style scoped>
.sheet-subjective-container {
  position: relative;
  width: 750px;
}

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