
<script lang='ts' setup>
import { ref, onMounted } from "vue";
import tinymce from "tinymce/tinymce";
import "tinymce/models/dom"; // 特别注意 tinymce 6.0.0 版本之后必须引入，否则不显示
import "tinymce/themes/silver/theme";
import Editor from "@tinymce/tinymce-vue"; // 引入组件
import { v4 as uuidv4 } from "uuid";

let onlyNumber = uuidv4().replaceAll('-','').toString();   //获取唯一编码

/**
 * 初始富文本组件
 */
const tinymceInit = {
  selector: "#"+onlyNumber,
	language_url: "/tinymce/langs/zh-Hans.js", // 引入语言包（该语言包在public下，注意文件名称）
	language: "zh-Hans", // 这里名称根据 zh-Hans.js 里面写的名称而定
	skin_url: "/tinymce/skins/ui/oxide", // 这里引入的样式
	height: 260, // 限制高度
	statusbar:false,
	toolbar:false,
	branding: false,  //是否禁用“Powered by TinyMCE”
	menubar: false, //顶部菜单栏显示
	forced_root_block:'',
	newline_behavior:"",
	content_css: "/tinymce/skins/content/default/content.css", //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入	
  auto_focus : true,
}
const props = defineProps({
  aftText:{ 
    type: String, 
    default(){
			return {}
		} 
  },
  aftTextCopy:{ 
    type: String, 
    default(){
			return {}
		} 
  },
})

let $emit = defineEmits(["textChange","gongshiChange"]);

const tinymceHtml = ref("")
tinymceHtml.value = props.aftText
const tinymceBox = ref(null)


onMounted(() => {
  	tinymce.init({}); // 初始化富文本
});
watch(()=>tinymceHtml.value, (val:any) => {
  $emit('textChange',val);
  nextTick(()=>{
      let formulaOne = [];
      let formulaTwo = [];
      tinymceBox.value.childNodes.forEach(element => {
      
        element.childNodes.forEach(child => {
          formulaOne.push(child.innerText?child.innerText:child.data)
          if(child.dataset&&child.dataset.keyid){
            formulaTwo.push(child.dataset.keyid)
          }else{
            formulaTwo.push(child.innerText?child.innerText:child.data)
          }
        })
      });
      let suanShitwo = formulaTwo.join('').replace(/\s+/g, "");
      let gongShi ={
        formulaHtml:tinymceBox.value.innerHTML,
        mathsString:tinymceBox.value.innerText,
        mathsFormula:suanShitwo,
      }
      
      $emit('gongshiChange',gongShi);
      if(containsNewline(gongShi.mathsString)){
        errorCondition("条件不允许换行")
      }else if(!gongShi.formulaHtml.startsWith("<p><span")){
        errorCondition("条件需以蓝色块开头")
      }else if(gongShi.formulaHtml.endsWith("</span></p>")){
        errorCondition("条件不能以蓝色块结尾")
      }else if(countSpanTags(gongShi.formulaHtml)>1){
        errorCondition("不允许出现多个蓝色块")
      }else if(!containsSingleComparator(gongShi.mathsFormula)){
        errorCondition("不存在有效符号")
      }else if(checkEnding(gongShi.mathsFormula)){
        errorCondition("不能以符号为结尾")
      }else{
        succCondition()
      }
    })
    
},
    { deep: true }
)
function containsSingleComparator(str: string) {  
  // 定义需要检查的运算符  
  const comparators = ['==', '>=', '>', '<=', '<', '!='];  
  let found = false; // 用于标记是否找到运算符  
  let i = 0; // 字符串索引  
  
  while (i < str.length - 1) { // 至少需要两个字符来形成运算符  
    // 遍历每个可能的运算符  
    for (const comparator of comparators) {  
      if (str.substr(i, comparator.length) === comparator) {  
        // 如果找到了一个运算符  
        if (found) {  
          // 如果已经找到了一个运算符，则返回false  
          return false;  
        }  
        found = true; // 标记为已找到  
        // 跳过当前找到的运算符的剩余部分，避免重复检查  
        i += comparator.length - 1;  
        break; // 跳出内层循环  
      }  
    }  
    i++; // 继续检查下一个字符  
  }  
  
  // 检查是否只找到了一个运算符  
  return found;  
} 
function checkEnding(str: string) {
  const symbols = ['==', '>=', '>', '<=', '<', '!=', '='];
  const trimmedStr = str.trim();
  for (let symbol of symbols) {
    if (trimmedStr.endsWith(symbol)) {
      return true;
    }
  }
  return false;
}
function containsComparator(str: string) {  
  if(str.includes("==")||str.includes("!=")||str.includes(">")||str.includes(">=")||str.includes("<")||str.includes("<=")){
    return true
  }else{
    return false
  }
}
const containsNewline = (str: string) => {  
    //console.log("Testing string:", str); // 查看传递给函数的实际字符串  
    return /\n/.test(str);  
}; 
const countSpanTags = (str: string) => {
  // 使用正则表达式匹配所有出现的<span>（不考虑闭合标签或属性）  
  const matches = str.match(/<span\b[^>]*>/gi);  
  // 如果matches是null，表示没有找到匹配项，返回0  
  // 否则，返回匹配项数组的长度  
  return matches ? matches.length : 0;  
}; 
function errorCondition(str:string){
  ElMessage.closeAll()
  ElMessage({
    showClose: true,
    //message: '条件格式错误 : '+str+' , 正确条件格式如 :    年龄==10',
    message: str,
    type: 'error',
    duration:3500,
  })
}
function succCondition(){
  ElMessage.closeAll()
  ElMessage({
    showClose: true,
    message: '条件格式校验通过',
    type: 'success',
    duration:3500,
  })
}


const addIcon = (currentObject:any) =>{
	tinymce.activeEditor?.execCommand('mceInsertContent', false, `<span style="margin:3px;background-color: #4189EF;border-radius: 5px; padding:3px" contenteditable="false" data-keyid= "${currentObject.id}" >${currentObject.label}</span>`);
}
const addIcon_field = (currentObject:any) =>{
	tinymce.activeEditor?.execCommand('mceInsertContent', false, `<span style="margin:3px;background-color: #4189EF;border-radius: 5px; padding:3px" contenteditable="false" data-keyid= "${currentObject.id}" >${currentObject.treeAttrs.show}</span>`);
}
const addIcon_org = (currentObject:any) =>{
  let id = "orgOrPerson:"+currentObject.id
	tinymce.activeEditor?.execCommand('mceInsertContent', false, `<span style="margin:3px;background-color: #4189EF;border-radius: 5px; padding:3px" contenteditable="false" data-keyid= "${id}" >${currentObject.label}</span>`);
}
//取消
const handelCancel = (associatedFormsHideDialogTextCopy:any) =>{
  tinymceHtml.value = associatedFormsHideDialogTextCopy
}
const tinymceReInit = ()=>{
    
    
    let str:string = props.aftTextCopy
}

const focusEditor = ()=>{
  tinymce.EditorManager.get(onlyNumber)?.focus(true)
}


defineExpose({
  tinymceHtml,
  addIcon,
  addIcon_org,
  addIcon_field,
  handelCancel,
  tinymceReInit,
  focusEditor,
})

</script>
<template >
	<div >
    <editor :id="onlyNumber"   v-model="tinymceHtml" :init="tinymceInit"></editor>
  </div>
  <div class="isHidde">
			<div ref="tinymceBox"  v-html="tinymceHtml"> </div>
	</div>
	

</template>

<style  lang='scss' scoped>
	.isHidde{
    display:none;
    position: fixed;
      z-index: 1;
    margin-top: -10px
  }
</style>
