<!--
@ 作者: 秦东
@ 时间: 2023-12-11 13:28:37
@ 备注: 模拟计算公式编辑器
-->
<template>
	<el-dialog
    v-model="isShow"
    title="公式编辑"
    width="800px"
    :before-close="handleClose"
  >		
		<div>目标字段 =</div>
		<el-row :gutter="20">
		  <el-col :span="16">
			<editor ref="hjks" id="tinymce" v-model="tinymceHtml" :init="tinymceInit"></editor>
		  </el-col>
		  <el-col :span="8">
			<el-row>
				<el-col :span="6">
					<el-button plain class="butkey" @click="computeNumber('(')">(</el-button>
				</el-col>
				<el-col :span="6">
					<el-button plain class="butkey" @click="computeNumber(')')">)</el-button>
				</el-col>
				<el-col :span="6">
					<el-button plain class="butkey" @click="computeNumber('C')">C</el-button>
				</el-col>
				<el-col :span="6">
					<el-button plain class="butkey" @click="computeNumber('+')">+</el-button>
				</el-col>
				<el-col :span="6">
					<el-button plain class="butkey" @click="computeNumber('1')">1</el-button>
				</el-col>
				<el-col :span="6">
					<el-button plain class="butkey" @click="computeNumber('2')">2</el-button>
				</el-col>
				<el-col :span="6">
					<el-button plain class="butkey" @click="computeNumber('3')">3</el-button>
				</el-col>
				<el-col :span="6">
					<el-button plain class="butkey" @click="computeNumber('-')">-</el-button>
				</el-col>
				<el-col :span="6">
					<el-button plain class="butkey" @click="computeNumber('4')">4</el-button>
				</el-col>
				<el-col :span="6">
					<el-button plain class="butkey" @click="computeNumber('5')">5</el-button>
				</el-col>
				<el-col :span="6">
					<el-button plain class="butkey" @click="computeNumber('6')">6</el-button>
				</el-col>
				<el-col :span="6">
					<el-button plain class="butkey" @click="computeNumber('*')">×</el-button>
				</el-col>
				<el-col :span="6">
					<el-button plain class="butkey" @click="computeNumber('7')">7</el-button>
				</el-col>
				<el-col :span="6">
					<el-button plain class="butkey" @click="computeNumber('8')">8</el-button>
				</el-col>
				<el-col :span="6">
					<el-button plain class="butkey" @click="computeNumber('9')">9</el-button>
				</el-col>
				<el-col :span="6">
					<el-button plain class="butkey" @click="computeNumber('/')">÷</el-button>
				</el-col>
				<el-col :span="6">
					<el-button plain class="butkey" @click="computeNumber('%')">%</el-button>
				</el-col>
				<el-col :span="6">
					<el-button plain class="butkey" @click="computeNumber('0')">0</el-button>
				</el-col>
				<el-col :span="6">
					<el-button plain class="butkey" @click="computeNumber('.')">.</el-button>
				</el-col>
				
				<el-col :span="6">
					<el-button plain class="butkey" @click="computeNumber('=')">=</el-button>
				</el-col>
			</el-row>
		  </el-col>
		</el-row>

		
		<el-row>
			<el-col :span="4">
				<el-button type="primary" @click="testAndVerify">校验公式</el-button>
			</el-col>
			<el-col :span="16">{{suanShitwo}}</el-col>
			<el-col :span="4"></el-col>
		</el-row>

		<div class="tipBox">{{ errorMsg }}</div>
		<el-row :gutter="10">
			<el-col :span="6">
				<div class="colBox">
					<div class="colBoxTitle">当前表单字段</div>
					<div class="colBoxContent">
					
						<el-collapse v-model="fieldCurCollapse">

							<el-collapse-item  v-for="(group,group_idx) in fieldList" :key="group_idx" :title="group.name" :name="group.id">
								<div v-for="(i,idx) in group.children" :key="idx" class="item" @mouseenter="itemMouseenter(i)" @mouseleave="itemMouseleave" @click="addTag(i,'field')">
									<div class="name">{{i.name}}</div>
									<div class="type" :style="typeColors.find(x=>x.name==i.dataType)?.typeStyle">
										{{i.dataTypeName}}
									</div>
								</div>
							</el-collapse-item>
						</el-collapse>
					
					
					</div>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="colBox">
					<div class="colBoxTitle">函数列表</div>
					<div class="colBoxContent">
						
						<el-collapse v-model="funcCurCollapse">

							<el-collapse-item  v-for="(group,group_idx) in funcList" :key="group_idx" :title="group.name" :name="group.id">
								<div v-for="(i,idx) in group.children" :key="idx" class="item" @mouseenter="itemMouseenter(i)" @mouseleave="itemMouseleave" @click="addTag(i,'func')">
									<div class="name">{{i.name}}</div>
									<div class="type" :style="typeColors.find(x=>x.name==i.dataType)?.typeStyle">
										{{i.dataTypeName}}
									</div>
								</div>
							</el-collapse-item>
						</el-collapse>


					</div>
				</div>
			</el-col>
			<el-col :span="12">
				<div class="colBox">
					<div class="colBoxTitle">说明</div>
					<div class="colBoxContent">
						
						<div  class="mathMsg">
							<div v-html="descContent">
						</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>

		{{tinymceHtml}}
		<hr />
		{{ removeHTMLTag(tinymceHtml) }}
		<div ref="tinymceBox" v-html="tinymceHtml"> </div>
		<template #footer>
      <span class="dialog-footer">
        <el-button @click="isShow = false">关闭</el-button>
        <el-button type="primary" @click="isShow = false">确定</el-button>
		
      </span>
    </template>
	</el-dialog>
</template>
<script lang='ts' setup>
import { ref, onMounted } from "vue";
import typeColors from "./unitcss";
import { fieldList,funcList } from "./mathFunction"
/**
 * 富文本组件
 */
import tinymce from "tinymce/tinymce";
import "tinymce/models/dom"; // 特别注意 tinymce 6.0.0 版本之后必须引入，否则不显示
import "tinymce/themes/silver/theme";
import Editor from "@tinymce/tinymce-vue"; // 引入组件
/**
 * 初始富文本组件
 */
const tinymceInit = {
	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文件需自己创建并引入
}
onMounted(() => {
  tinymce.init({}); // 初始化富文本
	console.log("funcList",funcListw)
});
const errorMsg = ref("") //错误信息
const tinymceHtml = ref("")
let fieldCurCollapse = ref("");
let funcCurCollapse = ref("");
const funcListw = ref(funcList);
const descContent = ref(""); //函数说明
const isShow = ref(true)

const hjks = ref<any>(null)

const tinymceBox = ref(null)
//数学函数说明操作
const itemMouseenter = (item) => {
  descContent.value = item.desc;
};
const itemMouseleave = () => {
  descContent.value = "";
};

//添加数据标签
const addTag = (data:any,type:string) => {
	console.log("tinymce----->",hjks);
	
	let viewStyle = type == "field" ? typeColors.find((x) => x.name == data.dataType)?.viewStyle : typeColors.find((x) => x.name == "func")?.viewStyle;
	let viewStyleStr = "margin:0 5px;";
	Object.keys(viewStyle).map((key) => {
		let keyStr = key.replace(/([A-Z])/g, "-$1").toLowerCase();
		viewStyleStr += `${keyStr}:${viewStyle[key]};`;
	});
	if (type == "field") {
		tinymce.activeEditor.execCommand('mceInsertContent', false, `<span style="${viewStyleStr}" contenteditable="false" data-keyid="${data.id}">${data.name}</span>`);
	}else{
		tinymce.activeEditor.execCommand('mceInsertContent', false, `<span class="hanshu" style="${viewStyleStr}" contenteditable="false">${data.name}</span><span  class="exp"  style="${viewStyleStr}" contenteditable="false">(</span><span  class="exp" style="${viewStyleStr}"  contenteditable="false">)</span>`);
	}

	// nextTick(()=>{
		
	
	// })

	
	// console.log("tinymceBox--3--->",fsdf);
	// if(tinymceBox.value.childNodes.length >=0){
	// 	tinymceBox.value.childNodes.forEach(element =>{
	// 		console.log("tinymceBox---4-->",element.value.childNodes);
	// 	})
	// }
	
}
const suanShioen = ref<any[]>()
const suanShitwo = ref<any[]>()
//验证公式
const testAndVerify = () => {
	let pattern = "(<p>)(.*)(<\/p>)"; 
	
	console.log("tinymceBox----->",tinymceBox);
	console.log("tinymceBox--1--->",tinymceBox.value.innerHTML);
	console.log("tinymceBox--2--->",tinymceBox.value.innerText);
	console.log("tinymceBox--3--->",tinymceBox.value);
	let fsdf = tinymceBox.value.innerHTML.match(pattern);
	console.log("tinymceBox--4--->",fsdf,fsdf[2]);

	console.log("tinymceBox--5--->",tinymceBox.value.childNodes);
	let formulaOne = [];
	let formulaTwo = [];
	tinymceBox.value.childNodes.forEach(element => {
		console.log("element----->",element.childNodes);
		element.childNodes.forEach(child => {
			console.log("child--classList--->",child.classList);
			console.log("child----->",child.innerText,child.data);
			formulaOne.push(child.innerText?child.innerText:child.data)

			if(child.dataset&&child.dataset.keyid){
				console.log("child.dataset--222222--->",child.dataset.keyid);
				formulaTwo.push(child.dataset.keyid)
			}else{
				formulaTwo.push(child.innerText?child.innerText:child.data)
			}

			// if(child.classList){
			// 	formulaTwo.push(child.innerHTML)
			// 	if(child.classList.value == "hanshu" || child.classList.value == "exp"){
			// 		formulaOne.push(child.innerHTML)
			// 	}
			// 	if(child.dataset && child.dataset.key){
			// 		formulaTwo.push(child.dataset.keyid)
			// 	}
			// }else{
			// 	formulaOne.push(child.data)
			// 	formulaTwo.push(child.data)
			// }


		})
		

	});
	console.log("formulaOne------>",formulaOne);
	console.log("formulaTwo",formulaTwo);
	suanShioen.value = formulaOne.join('').replace(/\s+/g, "");
	suanShitwo.value = formulaTwo.join('').replace(/\s+/g, "");
	console.log("suanShioen",suanShioen.value);
	console.log("suanShitwo",suanShitwo.value);
}



// watch(tinymceBox,() => {
// 	console.log("tinymceBox--见识--->",tinymceBox);
// },{ deep:true, immediate: true  })

const removeHTMLTag = (str:any) => {
//   str = str.replace(/<\/?[^>]*>/g, ""); //去除HTML tag
//   str = str.replace(/[ | ]*\n/g, "\n"); //去除行尾空白
//   str = str.replace(/\n[\s| | ]*\r/g, "\n"); //去除多余空行
//   str = str.replace(/&nbsp;/gi, ""); //去掉&nbsp;
  return str;
}
/**
 * 计算器
 */
const computeNumber = (val:string) =>{
	if(val === "C"){
		tinymceHtml.value = "";
	}else{
		tinymce.activeEditor.execCommand('mceInsertContent', false, val);
	}
	
}
</script>
<style  lang='scss' scoped>
.butkey{
	width:45px;
	height:40px;
	margin-bottom:15px;
}
.tipBox{
	width:100%;
	height:30px;
	line-height:30px;
}
.el-row {
  // margin-top: 20px;
}
.yincnag{
	display:none;
}
.tox-tinymce{
	border-radius: 0px;
}
.colBox{
	border: 1px solid #eee;
	border-radius: 0px;
	.colBoxTitle{
		width:100%;
		line-height:35px;
		border-bottom: 1px solid #eee;
		padding-left: 15px;
	}
	.colBoxContent{
		width:100%;
		height:300px;
		overflow: hidden;
		overflow-y: auto;
		.item {
        display: flex;
        align-items: center;
        margin: 8px 0;
        padding: 0 8px;
        .name {
          color: #000;
          font-weight: 700;
					
        }
        .type {
          min-width: 50px;
          padding: 1px 5px;
          border-radius: 5px;
          color: #fff;
          margin-left: auto;
          font-weight: 700;
					text-align: center;
        }
      }
	}
	.mathMsg{
		text-align: left;
		padding:10px 15px;
		ul {
			list-style-type: circle;
			li{
				cursor: pointer;
				.info {
					font-weight: 700;
					color: #4a538a;
				}
				.example {
					font-weight: 700;
					.func {
						color: #871ab3;
					}
					.param {
						background: #1e87b6;
						color: #fff;
						padding: 3px 5px;
						border-radius: 3px;
						margin: 0px 5px;
					}
				}
			}
			
		}
	}
}

</style>
