<template>
  <el-dialog
    class="modify-mark-area"
    :visible.sync="modalIsShow"
    top="0"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    fullscreen
    :show-close="false"
    @open="visibleChange"
  >
    <div class="box-justify" slot="title">
      <h2 class="el-dialog__title">设置分组评卷区域</h2>
      <div>
        <el-button type="success" @click="confirm">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </div>
    <div class="tips-info">
      <i class="el-icon-warning"></i>
      按住鼠标左键拖动，框选评卷区域。可以设置多个评卷区域。当不设置评卷区域时，评卷时将展示答题卡所有答题区。
    </div>
    <div v-if="modalIsShow" class="area-container">
      <area-cropper
        v-for="(paper, index) in papers"
        :imgUrl="paper.imgUrl"
        ref="AreaCropper"
        :key="paper.imgUrl"
        :paper="paper"
        @curarea-change="cropperCurareaChange"
        @change="areas => areaChange(index, areas)"
      ></area-cropper>
    </div>

    <div slot="footer"></div>
  </el-dialog>
</template>

<script>
import AreaCropper from "./areaCropper/AreaCropper.vue";

export default {
  name: "modify-mark-area",
  components: { AreaCropper },
  props: {
    baseInfo: {
      type: Object,
      default() {
        return {};
      }
    },
    group: {
      type: Object,
      default() {
        return {};
      }
    },
    paperList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      modalIsShow: false,
      papers: []
    };
  },
  methods: {
    visibleChange() {
      this.papers = this.paperList.map(paper => {
        let npaper = { ...paper };
        npaper.areas = [];
        return npaper;
      });
      this.group.pictureConfigList.forEach(config => {
        const index = config.i - 1;
        this.papers[index].areas.push({ ...config });
      });
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    areaChange(index, areas) {
      this.papers[index].areas = areas;
    },
    cropperCurareaChange(area) {
      this.$refs.AreaCropper.forEach(cropper => {
        cropper.curareaChange(area);
      });
    },
    confirm() {
      let areas = [];
      this.papers.forEach((paper, pindex) => {
        if (!paper.areas.length) return;
        paper.areas.forEach(area => {
          let narea = { i: pindex + 1 };
          if (!area.isFull) {
            narea = { ...narea, x: area.x, y: area.y, w: area.w, h: area.h };
          }
          areas.push(narea);
        });
      });
      this.$emit(
        "modified",
        Object.assign({}, this.group, { pictureConfigList: areas })
      );
      this.cancel();
    }
  }
};
</script>
