lsiten-editor-v2/src/js/question/questionhead.js

import $ from '../util/dom-core.js';
import { getParentByClassname } from '../util/util.js';
import QrCode from 'jr-qrcode';

let tipsTemplate = `
<p style='font-size: 12px; margin: 0; padding: 0 10px; line-height: 20px;'>1、考号、姓名、班级三项信息必须用黑色签字笔填清楚。</p>
<p style='font-size: 12px; margin: 0; padding: 0 10px; line-height: 20px;'>2、选择题作答必须用2B铅笔填涂，非选择题作答必须用黑色中性笔或黑色墨迹钢笔填写。</p>
<p style='font-size: 12px; margin: 0; padding: 0 10px; line-height: 20px;' >3、必须在指定区域答题，且不得超出黑色答题框。</p>
<p style='font-size: 12px; margin: 0; padding: 0 10px; line-height: 20px;'>4、请保持答题卡卡面清洁，不要折叠或弄破答题卡。</p>
`;

/**
 * 初始化答题卡头外层框样式
 * @param {DomElement}  $head 头框
 */
function initStyleHeader ($head) {
  $head.css('min-height', '100px')
       .css('overflow', 'hidden')
       .css('outline', 'none')
       .css('font-size', '0px');
}
/**
 * 初始化答题卡头标题框样式
 * @param {DomElement}  $title 标题框
 */
function initStyleTitle ($title) {
  $title.css('padding', '5px 0')
       .css('overflow', 'hidden')
       .css('outline', 'none')
       .css('font-weight', '600')
       .css('line-height', '25px')
       .css('min-height', '25px')
       .css('height', 'auto')
       .css('font-size', '18px')
       .css('max-height', '75px')
       .css('text-align', 'center');
}

/**
 * 初始化答题卡头标题框样式
 * @param {DomElement}  $body 标题框
 */
function initStyleBody ($body) {
  $body.css('border', '1px solid rgb(0, 0, 0)')
       .css('overflow', 'hidden')
       .css('min-height', '100px')
       .css('height', 'auto')
       .css('font-size', '0');
}

/**
 * 生成卡头基本信息
 * @param {string} 卡头基本信息宽度
 */
function generateBasicInfo (width, data, pindex) {
  let $box = $('<div class="js-basic-head-info-box"></div>')
  $box.css('width', width).css('float', 'left').css('border-right', '1px solid #000').css('padding', '10px 0').css('position', 'relative').css('min-height', '120px');
  let $name = $('<div></div>');
  $name.css('width', '100%');
  let $label = $('<div>姓名:</div>');
  $label.css('display', 'inline-block')
        .css('line-height', '25px')
        .css('font-size', '14px')
        .css('margin-right', '15px')
        .css('width', '40px')
        .css('text-align', 'right');
  let $line = $('<div>&#8203;</div>');
  $line.css('display', 'inline-block')
        .css('width', '130px')
        .css('line-height', '25px')
        .css('font-size', '14px')
        .css('border-bottom', '1px solid #000');
  $name.append($label);
  $name.append($line);

  let $class = $('<div></div>');
  $class.css('width', '100%');
  let $labelclass = $('<div>班级:</div>');
  $labelclass.css('display', 'inline-block')
        .css('line-height', '25px')
        .css('font-size', '14px')
        .css('margin-top', '10px')
        .css('margin-right', '15px')
        .css('width', '40px')
        .css('text-align', 'right');
  let $lineclass = $('<div>&#8203;</div>');
  $lineclass.css('display', 'inline-block')
        .css('width', '130px')
        .css('line-height', '25px')
        .css('font-size', '14px')
        .css('border-bottom', '1px solid #000');
  $class.append($labelclass);
  $class.append($lineclass);

  let mode = parseInt(data.noMode);

  let src = QrCode.getQrBase64('+' + data.qrCode + '' + (pindex + 1), {
      width: 100,  // 二维码图片宽度（默认为256px）
      height: 100,  // 二维码图片高度（默认为256px）
      padding: 5
    });
  let $qrcode = $('<div class="js-lsiten-qrcode"><img src="' + src + '"/></div>');
  $qrcode.css('position', 'absolute').css('right', '5px').css('top', '5px').css('width', '100px').css('height', '100px');

  if (mode === 1) {
    let $xh = $('<div></div>');
    $xh.css('width', '100%').css('margin-bottom', '10px');
    let $labelxh = $('<div>学号:</div>');
    $labelxh.css('display', 'inline-block')
          .css('line-height', '25px')
          .css('font-size', '14px')
          .css('margin-top', '10px')
          .css('margin-right', '15px')
          .css('width', '40px')
          .css('text-align', 'right');
    let $linexh = $('<div>&#8203;</div>');
    $linexh.css('display', 'inline-block')
          .css('width', '130px')
          .css('line-height', '25px')
          .css('font-size', '14px')
          .css('border-bottom', '1px solid #000');
    $xh.append($labelxh);
    $xh.append($linexh);
    $box.append($xh);

    $qrcode.css('top', '15px');
    $box.css('padding', 0)
  }
  $box.append($name);
  $box.append($class);
  $box.append($qrcode);
  return $box;
}


/**
 * 生成卡头基本信息
 * @param {string} 卡头基本信息宽度
 */
function generateBasicInfo_2 (width, data, pindex) {
  let $box = $('<div class="js-basic-head-info-box"></div>')
  $box.css('width', width).css('float', 'left').css('border-right', '1px solid #000').css('padding', '10px 0').css('position', 'relative').css('min-height', '120px');
  let $name = $('<div></div>');
  $name.css('width', '100%');
  let $label = $('<div>姓名:</div>');
  $label.css('display', 'inline-block')
        .css('line-height', '25px')
        .css('font-size', '14px')
        .css('margin-right', '15px')
        .css('width', '40px')
        .css('text-align', 'right');
  let $line = $('<div>&#8203;</div>');
  $line.css('display', 'inline-block')
        .css('width', '130px')
        .css('line-height', '25px')
        .css('font-size', '14px')
        .css('border-bottom', '1px solid #000');
  $name.append($label);
  $name.append($line);

  let $class = $('<div></div>');
  $class.css('width', '100%');
  let $labelclass = $('<div>班级:</div>');
  $labelclass.css('display', 'inline-block')
        .css('line-height', '25px')
        .css('font-size', '14px')
        .css('margin-top', '10px')
        .css('margin-right', '15px')
        .css('width', '40px')
        .css('text-align', 'right');
  let $lineclass = $('<div>&#8203;</div>');
  $lineclass.css('display', 'inline-block')
        .css('width', '130px')
        .css('line-height', '25px')
        .css('font-size', '14px')
        .css('border-bottom', '1px solid #000');
  $class.append($labelclass);
  $class.append($lineclass);

  let mode = parseInt(data.noMode);

  let src = QrCode.getQrBase64('+' + data.qrCode + '' + (pindex + 1), {
      width: 100,  // 二维码图片宽度（默认为256px）
      height: 100,  // 二维码图片高度（默认为256px）
      padding: 5
    });
  let $qrcode = $('<div class="js-lsiten-qrcode"><img src="' + src + '"/></div>');
  $qrcode.css('position', 'absolute').css('right', '60px').css('top', '78px').css('width', '100px').css('height', '100px');

  if (mode === 1) {
    let $xh = $('<div></div>');
    $xh.css('width', '100%').css('margin-bottom', '10px');
    let $labelxh = $('<div>学号:</div>');
    $labelxh.css('display', 'inline-block')
          .css('line-height', '25px')
          .css('font-size', '14px')
          .css('margin-top', '10px')
          .css('margin-right', '15px')
          .css('width', '40px')
          .css('text-align', 'right');
    let $linexh = $('<div>&#8203;</div>');
    $linexh.css('display', 'inline-block')
          .css('width', '130px')
          .css('line-height', '25px')
          .css('font-size', '14px')
          .css('border-bottom', '1px solid #000');
    $xh.append($labelxh);
    $xh.append($linexh);
    $box.append($xh);

    $qrcode.css('top', '15px');
    $box.css('padding', 0)
  }
  $box.append($name);
  $box.append($class);
  $box.append($qrcode);
  return $box;
}

/**
 * 生成条码区
 */
function generateBarCode () {
  let $box = $('<div></div>')
  $box.css('width', '50%').css('height', '100%').css('font-size', '18px').css('float', 'left').css('padding', '10px 0');
  let $message = $('<div><p>条形码粘贴处</p><p style="font-size: 12px">（正面朝上，切勿贴出框外）</p></div>');
  $message.css('width', '200px')
      .css('height', '120px')
      .css('text-align', 'center')
      .css('line-height', '50px')
      .css('margin', '0 auto');
  $box.append($message);
  return $box;
}


/**
 * 生成模板1
 * @param {JSON} data 头部信息
 */
function headType1 (data, pindex) {
  let title = data.alias || '';
  let $head = $('<div class="js-answer-header" contenteditable="false"></div>');
    initStyleHeader($head);
    let $title = $('<div class="js-answer-header-title" contenteditable = "true">' + title + '</div>');
    initStyleTitle($title);
    let $body = $('<div class="js-answer-header-body"></div>');
    initStyleBody($body);

    let $tips = $('<div class="js-answer-head-tips"></div>');
    $tips.css('padding', '5px 0');
    $tips.html(tipsTemplate);

    let $bottom = $('<div class="js-head-bottom"></div>');
    $bottom.css('width', '100%')
           .css('border-top', '1px solid #000')
           .css('overflow', 'hidden')
           .css('height', 'auto')
           .css('font-size', '0');
    
    let $basicInfo = $('<div class="js-answer-head-basic"></div>');
    $basicInfo.css('width', '50%')
              .css('float', 'left')
              .css('padding-bottom', '10px')
              .css('font-size', '0');
    let $basic = generateBasicInfo('50%', data, pindex);
    $basic.css('border-right', 'none');
    $bottom.append($basic);

    let $barCode = generateBarCode();
    $barCode.css('border-left', '1px solid #000');
    $bottom.append($barCode);
    
    $body.append($tips);
    $body.append($bottom);

    $head.append($title);
    $head.append($body);
    return $head;
}
/**
 * 生成模板2
 * @param {int} noCount 准考证号位数
 * @param {JSON} data 头部信息
 */
function headType2 (noCount, data, pindex) {
  let title = data.alias || '';
  let $head = $('<div class="js-answer-header" contenteditable="false"></div>');
  initStyleHeader($head);
  let $title = $('<div class="js-answer-header-title" contenteditable = "true">' + title + '</div>');
  initStyleTitle($title);
  let $body = $('<div class="js-answer-header-body"></div>');
  initStyleBody($body);

  let $leftBox = $('<div></div>');
  $leftBox.css('width', '50%')
            .css('float', 'left')
            .css('font-size', '0');
  let $basicInfo = $('<div class="js-answer-head-basic"></div>');
  $basicInfo.css('width', '100%')
            .css('float', 'left')
            .css('border-bottom', '1px solid #000')
            .css('font-size', '0');
  let $basic = generateBasicInfo('100%', data, pindex);
  $basic.css('border-right', 'none')
  $basicInfo.append($basic);
  let $tips = $('<div class="js-answer-head-tips"></div>');
  $tips.css('padding', '18px 0').css('float', 'left');
  $tips.html(tipsTemplate);
  
  $leftBox.append($basicInfo);
  $leftBox.append($tips);
  $body.append($leftBox);


  let $rightBox = $('<div></div>');
  $rightBox.css('width', '50%')
            .css('float', 'left')
            .css('position', 'relative')
            .css('padding', '5px')
            .css('min-height', '293px')
            .css('font-size', '0');


  $rightBox.css('border-left', '1px solid #000');
  let $examNumberBox = generateExamNumber(noCount);
  $rightBox.append($examNumberBox);
  $body.append($rightBox);

  $head.append($title);
  $head.append($body);
  return $head;
}

/**
 * 生成模板3
 * @param {int} noCount 准考证号位数
 * @param {JSON} data 头部信息
 */
function headType3 (noCount, data, pindex) {
  let title = data.alias || '';
  let $head = $('<div class="js-answer-header" contenteditable="false"></div>');
  initStyleHeader($head);
  let $title = $('<div class="js-answer-header-title" contenteditable = "true">' + title + '</div>');
  initStyleTitle($title);
  let $body = $('<div class="js-answer-header-body"></div>');
  initStyleBody($body);

  let $top = $('<div></div>');
  $top.css('overflow', 'hidden');
  let $left = $('<div></div>');
  $left.css('float', 'left').css('width', '50%').css('border-right', '1px solid #000');
  let $basic = generateBasicInfo('100%', data, pindex);
  $basic.css('border', 'none').css('margin-top', '24px');
  $left.append($basic);

  let $right = $('<div></div>');
  $right.css('float', 'left').css('width', '50%');
  let $tips = $('<div class="js-answer-head-tips"></div>');
  $tips.css('padding', '15px 0').css('float', 'left');
  $tips.html(tipsTemplate);
  $right.append($tips);
  $top.append($left);
  $top.append($right);
  
  let $bottom = $('<div></div>');
  $bottom.css('overflow', 'hidden').css('border-top', '1px solid #000').css('position', 'relative').css('padding', '5px 15px').css('font-size', '0').css('min-height','293px');

  let $examNumberBox = generateExamNumber(noCount);
  $bottom.append($examNumberBox);

  $body.append($top);
  $body.append($bottom);

  $head.append($title);
  $head.append($body);
  return $head;
}

/**
 * 生成模板3
 * @param {int} noCount 准考证号位数
 * @param {JSON} data 头部信息
 */
function headType4 (noCount, data, pindex) {
  let title = data.alias || '';
  let $head = $('<div class="js-answer-header" contenteditable="false"></div>');
  initStyleHeader($head);
  let $title = $('<div class="js-answer-header-title" contenteditable = "true">' + title + '</div>');
  initStyleTitle($title);
  let $body = $('<div class="js-answer-header-body"></div>');
  initStyleBody($body);

  let $top = $('<div></div>');
  $top.css('overflow', 'hidden');
  let $left = $('<div></div>');
  $left.css('float', 'left').css('width', '50%');
  let $basic = generateBasicInfo_2('100%', data, pindex);
  $basic.css('border', 'none').css('margin-top', '24px');
  $left.append($basic);

  let $right = $('<div></div>');
  $right.css('float', 'left').css('width', '50%').css('border-left', '1px solid #000');
  let $tips = $('<div class="js-answer-head-tips"></div>');
  $tips.css('padding', '15px 0').css('float', 'left');
  $tips.html(tipsTemplate);
  $right.append($tips);
  $top.append($left);
  $top.append($right);
  
  let $bottom = $('<div></div>');
  $bottom.css('overflow', 'hidden').css('border-top', '1px solid #000').css('position', 'relative').css('padding', '5px 15px').css('font-size', '0').css('min-height','293px');

  let $examNumberBox = generateExamNumber(noCount);
  $bottom.append($examNumberBox);

  $body.append($top);
  $body.append($bottom);

  $head.append($title);
  $head.append($body);
  return $head;
}


/**
 * 生成模板1
 * @param {JSON} data 头部信息
 */
function headType5 (data, pindex) {
  let title = data.alias || '';
  let $head = $('<div class="js-answer-header" contenteditable="false"></div>');
    initStyleHeader($head);
    let $title = $('<div class="js-answer-header-title" contenteditable = "true">' + title + '</div>');
    initStyleTitle($title);
    let $body = $('<div class="js-answer-header-body"></div>');
    initStyleBody($body);

    let $tips = $('<div class="js-answer-head-tips"></div>');
    $tips.css('padding', '5px 0');
    $tips.html(tipsTemplate);

    let $bottom = $('<div class="js-head-bottom"></div>');
    $bottom.css('width', '100%')
           .css('border-top', '1px solid #000')
           .css('overflow', 'hidden')
           .css('height', 'auto')
           .css('font-size', '0');
    
    let $basicInfo = $('<div class="js-answer-head-basic"></div>');
    $basicInfo.css('width', '50%')
              .css('float', 'left')
              .css('padding-bottom', '10px')
              .css('font-size', '0');
    let $basic = generateBasicInfo('50%', data, pindex);
    $basic.css('border-right', 'none');
    $bottom.append($basic);

    let $barCode = generateBarCode();
    $barCode.css('border-left', '1px solid #000');
    $bottom.append($barCode);
    
    $body.append($tips);
    $body.append($bottom);

    $head.append($title);
    $head.append($body);
    return $head;
}
/** 
 * 生成准考证号框
 * @param {int} noCount 准考证号位数
*/
function generateExamNumber (noCount) {
  let allWidth = noCount * 32 + 2;
  if (noCount <= 1) {
    allWidth = 2 * 32 + 2;
  }
  let $box = $('<div></div>');
  $box.css('margin', '5px auto')
      .css('display', 'inline-block')
      .css('width', allWidth + 'px')
      .css('overflow', 'hidden')
      .css('position', 'absolute')
      .css('left', '50%')
      .css('margin-left', '-' + allWidth / 2 + 'px')
      .css('top', '0')
      .css('border', '1px solid #000');

  let $title = $('<div>准考证号</div>');
  $title.css('text-align', 'center')
        .css('float', 'left')
        .css('font-size', '14px')
        .css('height', '24px')
        .css('line-height', '23px')
        .css('border-bottom', '1px solid #000')
        .css('text-align', 'center');

  $box.append($title);

  let $inputGrid = $('<div></div>');
  $inputGrid.css('border-bottom', '1px solid #000').css('float', 'left').css('height', '22px').css('line-height', '21px');
  let lastIndex = noCount - 1;
  let width = '32px';
  for (let i =0; i < noCount; i++) {
    let $colums = $('<div>&#8203;</div>');
    $colums.css('width', width).css('font-size', '12px').css('display', 'inline-block').css('float', 'left');
    i < lastIndex && ($colums.css('border-right', '1px solid #000'));
    $inputGrid.append($colums);
  }

  $box.append($inputGrid);
  for (let j = 0; j <= 9; j++) {
    let $row = $('<div></div>');
    $row.css('float', 'left').css('height', '21px').css('line-height', '21px');
    for (let i =0; i < noCount; i++) {
      let $colums = $('<div></div>');
      $colums.css('width', width).css('font-size', '12px').css('display', 'inline-block').css('text-align', 'center').css('float', 'left');
      i < lastIndex && ($colums.css('border-right', '1px solid #000'));
      let $columnBox = $('<div>'+j+'</div>');
      $columnBox.css('display', 'inline-block').css('width', '19px').css('border', '1px solid #000').css('line-height', '0.95');
      $colums.append($columnBox);
      $row.append($colums);

      j === 9 && ($colums.css('padding-bottom', '12px'), $row.css('height', '33px'));
      j === 0 && ($colums.css('padding-top', '12px'), $row.css('height', '33px'));
    }
    $box.append($row);
  }
  return $box;
}

let heads = {
  'A4_1_1_1': function (noCount, data, pindex) {
    return headType1(data, pindex);
  },
  'A4_1_1_2': function (noCount, data, pindex) {
    return headType1(data, pindex);
  },
  'A4_2_1_1': function (noCount, data, pindex) {
    return headType2(noCount, data, pindex);
  },
  'A4_2_1_2': function (noCount, data, pindex) {
    return headType3(noCount, data, pindex);
  },
  'A3_1_2_1': function (noCount, data, pindex) {
    return headType1(data, pindex);
  },
  'A3_1_2_2': function (noCount, data, pindex) {
    return headType1(data, pindex);
  },
  'A3_2_2_1': function (noCount, data, pindex) {
    return headType2(noCount, data, pindex);
  },
  'A3_2_2_2': function (noCount, data, pindex) {
    return headType3(noCount, data, pindex);
  },
  'A3_1_3_1': function (noCount, data, pindex) {
    return headType5(data, pindex);
  },
  'A3_1_3_2': function (noCount, data, pindex) {
    return headType5(data, pindex);
  },
  'A3_2_3_1': function (noCount, data, pindex) {
    return headType4(noCount, data, pindex);
  },
  'A3_2_3_2': function (noCount, data, pindex) {
    return headType4(noCount, data, pindex);
  }
}

/**
 * 
 * @param {Object} editor 编辑器对象
 * @param {String} key 生成头的类型key值
 * @param {DomElement} $page 生成头的页Dom
 */
let generateQuestionHead = function (editor, key, $page) {
  debugger;
  let noCount = editor.noCount;
  let currentPage = $page || editor.page.currentPage;
  let $fisrstColumn = currentPage.$colums[0];
  let exitHead = $fisrstColumn.find('.js-answer-header');
  if (exitHead.length > 0) {
    editor.message.showMessage('该页已经有答题卡头！');
    return true;
  }
  let $header = heads[key](noCount, editor.data, currentPage.pageIndex);
  
  let $firstParagraph = $fisrstColumn[0].firstChild;
  if (!$firstParagraph) {
    $firstParagraph = currentPage.addParagraph();
  }
  $firstParagraph.append($header);

  $header.find('.js-answer-header-title').focus();
  if (editor.page) {
    editor.page._updatePositionInfo({}, $header);
  } else {
    setTimeout(() => {
      editor.page._updatePositionInfo({}, $header);      
    },0)
  }
  return true;
}

export default {
  generateQuestionHead: generateQuestionHead
}