import { nextTick } from 'vue';
export const setLabelStyle = (formSchemasRef, formID) => {
  const tempArray = [] as number[];
  let totalSpan = 0;
  let index = 0;
  for (let i = 0; i < formSchemasRef.value.length; i++) {
    const tempSpan = formSchemasRef.value[i].colProps?.span as number;
    if (tempSpan) {
      totalSpan = tempSpan + totalSpan;
    }
    if (totalSpan < 24) {
      index++;
    } else if (totalSpan == 24) {
      index++;
      tempArray.push(index);
      totalSpan = 0;
      index = 0;
    } else {
      console.log('列信息配置不对，请检查，span计算值为：' + totalSpan);
    }
  }
  if (index != 0 && totalSpan < 24) {
    tempArray.push(index);
  }
  const targetColNum = tempArray[tempArray.length - 1];
  nextTick(() => {
    const targetForm = $('#' + formID);
    if (targetForm.length > 0) {
      const labels = targetForm.find('.ant-col .ant-form-item-label');
      setLabelTitle(labels, formSchemasRef);
      const controls = targetForm.find('.ant-col .ant-form-item-control');
      const cols = targetForm.find('.ant-col');
      for (let j = 0; j < targetColNum; j++) {
        labels[labels.length - 1 - j].style.borderBottomWidth = '0px';
        controls[controls.length - 1 - j - 1].style.borderBottomWidth = '0px'; //因为有一个控制列存在，所以，label会比control少一列
        if (j == 0) {
          if (totalSpan < 24 && totalSpan != 0) {
            //如果凑不齐一整行，则需要生成右边的线条
            controls[controls.length - j - 1].style.borderLeft = '1px solid #d1dbe5';
            controls[controls.length - j - 1].style.borderBottom = '0px solid #d1dbe5';
            cols[cols.length - 2].style.display = 'flex';
          }
        }
      }
    }
  });
};

const setLabelTitle = (items, formSchemasRef) => {
  for (let i = 0; i < items.length; i++) {
    items[i].style.title = formSchemasRef.value[i].label;
  }
};

const strlen = function strlen(str) {
  if (str == null) return 0;
  if (typeof str != 'string') {
    str += '';
  }
  // eslint-disable-next-line no-control-regex
  const len = str.replace(/[^\x00-\xff]/g, '01').length;
  return len;
};

/*
 * 创建验证悬浮窗
 */
export const createValidateToolTip = function (inputel, errorMsgs) {
  const targetInput = inputel[0];
  $(targetInput).on('mouseenter', function () {
    //鼠标进入事件
    if ($(this).data('toolTip')) $(this).data('toolTip').remove(); //如果有已经生成的，要先干掉
    const $toolTip = $('<div class="ltui-tooltip ltui-tooltip-right"></div>').appendTo($('body'));
    $(this).data('toolTip', $toolTip); //存放到元素的data里面，方便后面找到他然后移除
    $toolTip.width(strlen(errorMsgs) * 6);
    //生成内容div
    const $toolTipContent = $('<div class="ltui-tooltip-content"></div>').appendTo($toolTip);
    $toolTipContent.html(errorMsgs);
    //生成箭头外围div
    const $toolTipArrowOuter = $('<div class="ltui-tooltip-arrow-outer" ></div>').appendTo(
      $toolTip,
    );
    //生成箭头div
    const $toolTipArrow = $('<div class="ltui-tooltip-arrow" ></div>').appendTo($toolTip);

    $toolTipArrowOuter[0].style.left = $(this)[0].clientWidth / 2 + 'px';
    $toolTipArrow[0].style.left = $(this)[0].clientWidth / 2 + 'px';
    const offset = $(this).offset();
    const outerHeight = $(this).outerHeight();
    if (offset && outerHeight) {
      const toolTipOffset = {
        top: offset.top + outerHeight + 8,
        left: offset.left,
      };
      $toolTip.offset(toolTipOffset);
    }
  });

  $(targetInput).on('mouseleave', function () {
    if ($(this).data('toolTip')) $(this).data('toolTip').remove();
  });
};

// 删除验证悬浮窗
export const clearValidateToolTip = function (formID) {
  const targetTable = $('#' + formID);
  targetTable.find('input').removeData('toolTip').off();
};
