<template>
  <div
    class="sheet-info-container"
    ref="baseInfoRef"
    @mouseout="isShowInfoEdit = false"
    @mouseover="isShowInfoEdit = true"
  >
    <svg id="sheetInfoSvg" width="100%" height="100%"></svg>
    <div class="info-edit" v-show="isShowInfoEdit" @click="editModal = true">
      <span>编辑</span>
    </div>
    <Modal v-model="editModal" title="配置基本信息项" @on-ok="onEditBaseInfo">
      <p class="edit-title">需要填写内容</p>
      <CheckboxGroup v-model="showInfoList">
        <Checkbox
          v-for="(item, index) in infoList"
          :key="index"
          :label="item"
          :disabled="index < 2"
        ></Checkbox>
      </CheckboxGroup>
      <p class="edit-title">准考证号位数</p>
      <InputNumber :max="12" :min="4" v-model="idLength"></InputNumber>
    </Modal>
  </div>
</template>
 
<script>
import Snap from "imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js";
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 {
  components: {},
  data() {
    return {
      infoList: ["考号", "姓名", "学校", "班级", "座号", "考场"],
      showInfoList: ["考号", "姓名", "学校", "班级", "座号"],
      isShowInfoEdit: false,
      editModal: false,
      infoLeftBox: null,
      idNumberBox: null,
      snap: null,
      idLength: 10,
    };
  },
  created() {
    this.snap = Snap("#sheetInfoSvg");
  },
  methods: {
    onEditBaseInfo() {
      this.infoLeftBox.remove();
      let snap = this.snap;
      this.infoLeftBox = snap.paper.g();
      let gap = INFO_H / (this.showInfoList.length + 1);
      this.showInfoList.forEach((item, index) => {
        // 考号、座号、姓名等
        let leftInfo1 = snap.text(
          CONTENT_START_X + 30,
          CONTENT_START_Y + INFO_ITEM_MARGIN + gap * index,
          `${item} :`
        );
        // 下划线
        let leftInfo2 = snap
          .line(
            CONTENT_START_X + 80,
            CONTENT_START_Y + INFO_ITEM_MARGIN + gap * index,
            CONTENT_START_X + 250,
            CONTENT_START_Y + INFO_ITEM_MARGIN + gap * index
          )
          .attr({ fill: "none", stroke: "#000", strokeWidth: 1 });
        this.infoLeftBox.add(leftInfo1, leftInfo2);
      });

      this.renderIdNumber(this.idLength);
    },

    // 渲染准考证号填涂区域
    renderIdNumber(idLength) {
      let snap = this.snap;
      this.idNumberBox.remove();
      this.idNumberBox = snap.paper.g();

      const INFO_LEFT_W = 275; // 左侧的宽度
      const INFO_LEFT_X =
        INFO_LEFT_W + CONTENT_ML + ANCHORPROP.width + ANCHORPROP.gapX; // 左侧的x坐标

      var numbers = new Array(idLength).fill("0");
      var cellWidth = (INFO_W - INFO_LEFT_W) / idLength; // 计算每个号码的宽度
      const NUMBER_ITEM_MLR =
        ((INFO_W - INFO_LEFT_W) / idLength - NUMBER_ITEM_W) / 2; // 计算号码左右间距

      // 信息框左右分割线
      this.idNumberBox.add(
        snap
          .line(
            INFO_LEFT_X,
            CONTENT_MT + 50,
            INFO_LEFT_X,
            CONTENT_MT + 50 + INFO_H
          )
          .attr({ fill: "none", stroke: "#000", strokeWidth: 1 })
      );

      // 准考证号下边框
      this.idNumberBox.add(
        snap
          .line(
            INFO_LEFT_X,
            ID_TITLE_Y,
            PAPER_W - CONTENT_ML - ANCHORPROP.width - ANCHORPROP.gapX,
            ID_TITLE_Y
          )
          .attr({ fill: "none", stroke: "#000", strokeWidth: 1 })
      );
      // 准考证号
      this.idNumberBox.add(
        snap.text(
          INFO_LEFT_X + (INFO_LEFT_W - 20) / 2,
          CONTENT_MT + 75,
          "准 考 证 号"
        )
      );

      this.idNumberBox.add(
        // 填涂上边框
        snap
          .line(
            INFO_LEFT_X,
            ID_TITLE_Y + NUMBER_CELL_H,
            PAPER_W - CONTENT_ML - ANCHORPROP.width - ANCHORPROP.gapX,
            ID_TITLE_Y + NUMBER_CELL_H
          )
          .attr({ fill: "none", stroke: "#000", strokeWidth: 1 })
      );

      numbers.forEach((item, index) => {
        // 画准考证号填涂对应锚点
        let c1 = snap.rect(
          INFO_LEFT_X + NUMBER_ITEM_MLR + index * cellWidth,
          40,
          NUMBER_ITEM_W,
          NUMBER_ITEM_H
        );

        //  画准考证号分列分割线
        let c2 = snap
          .line(
            INFO_LEFT_X + cellWidth * index,
            ID_TITLE_Y,
            INFO_LEFT_X + cellWidth * index,
            ID_TITLE_Y - ID_TITLE_H + INFO_H
          )
          .attr({
            fill: "none",
            stroke: "#000",
            strokeWidth: index === 0 ? 0 : 1,
          });

        this.idNumberBox.add(c1, c2);

        // 画填涂svg图片
        for (let i = 0; i < 10; i++) {
          let img = require("@/icons/answersheet/" + i + ".svg");
          let c3 = snap.image(
            img,
            INFO_LEFT_X + NUMBER_ITEM_MLR + cellWidth * index,
            ID_TITLE_Y + NUMBER_CELL_H + 5 + NUMBER_ITEM_MT * i,
            NUMBER_ITEM_W,
            NUMBER_ITEM_H
          );
          this.idNumberBox.add(c3);
        }
      });
    },
  },
  mounted: function () {
    this.snap = Snap("#sheetInfoSvg");
    var snap = this.snap;
    // 定义分组Group
    this.infoLeftBox = snap.paper.g();
    this.idNumberBox = snap.paper.g();
    // 渲染个人信息区域
    this.onEditBaseInfo();
    // 画左边准考证号定位锚点
    for (let i = 0; i < 10; i++) {
      snap.rect(
        20,
        ID_TITLE_Y + NUMBER_CELL_H + 5 + NUMBER_ITEM_MT * i,
        NUMBER_ITEM_W,
        NUMBER_ITEM_H
      );
    }
    // 信息框
    let infoBox = snap
      .rect(CONTENT_START_X, CONTENT_START_Y, INFO_W, INFO_H)
      .attr({ fill: "rgba(0,0,0,0)", stroke: "#000", strokeWidth: 1 });
    infoBox.mouseover(() => {
      // 移入
      this.isShowInfoEdit = true;
    });
    infoBox.mouseout(() => {
      // 移入
      this.isShowInfoEdit = false;
    });
  },
};
</script>
<style scoped>
.sheet-info-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 750px;
  height: 342px;
}

/* .sheet-info-container:hover .info-edit{
    display: flex;
} */

.info-edit {
  position: absolute;
  top: 125px;
  right: 110px;
  width: 40px;
  height: 25px;
  background: #00a43a;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  z-index: 0;
}

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