<template>
	<el-form ref="form" :model="form" label-width="0px">
		<el-row :gutter="15" style="margin:0px;">
			<el-col :span="item.span || 24" v-if="!hideHandle(item)" :style="getActiveWidthAndHorizontal(item, 1)">
				<el-form-item :prop="item.field" :rules="rulesHandle(item)" :style="getActiveWidthAndHorizontal(item, 0)">
					<!-- input -->
					<template v-if="item.name=='input'">
						<!-- <el-input v-model="form[item.result.property.bindField]" :input-style="getActiveModuleStyle(item)" :placeholder="item.result.property.placeholder" clearable></el-input> -->
						<span :style="getActiveModuleStyle(item)" clearable>{{ getObjectValue(item.result.property.bindField)}}</span>
					</template>
					<!-- textarea -->
					<template v-else-if="item.name=='textarea'">
						<!-- <el-input type="textarea" v-model="form[item.result.property.bindField]" :rows="item.result.pattern.rows" :placeholder="item.result.property.placeholder" :input-style="getActiveModuleStyle(item)" clearable ></el-input> -->
						<el-input type="textarea" v-model="form[item.result.property.bindField]" :rows="item.result.pattern.rows" :input-style="getActiveModuleStyle(item)" clearable autosize></el-input>
					</template>
					<!-- label -->
					<template v-else-if="item.name=='label' || item.name === 'pageNumber'">
						<div v-text="$t(item.result.property.placeholder)" contenteditable="true" :style="getActiveModuleStyle(item)"></div>
					</template>
					<!-- radio -->
					<template v-else-if="item.name=='radio'" >
						<!-- 设置横向排列和纵向排列 -->
						<el-radio-group v-model="form[item.result.property.bindField]" :style="setArrangementStyle(item)">
							<el-radio v-for="_item in setOptionsData(item)" :style="getActiveModuleStyle(item)" :key="_item" :label="$t(_item)"></el-radio>
						</el-radio-group>
					</template>
					<!-- checkbox -->
					<template v-else-if="item.name=='checkbox'" >
						<!-- 设置横向排列和纵向排列 -->
						<el-checkbox-group v-model="form[item.result.property.bindField]" :style="setArrangementStyle(item)">
							<el-checkbox :label="$t(_item)" :style="getActiveModuleStyle(item)" v-for="(_item, _index) in setOptionsData(item)" :key="_index"></el-checkbox>
						</el-checkbox-group>
					</template>
					<!-- image -->
					<template v-else-if="item.name=='image'" >
						<el-image :src="item.result.property.imageFile" :id="item.id" :style="getActiveModuleStyle(item)" />
					</template>
					<!-- imageList -->
					<template v-else-if="item.name=='imageList'" >
						<div style="display:flex;justify-content:left;" >
							<el-image v-for="(_item, _index) in item.result.property.valueList" :key="_index" :id="item.id" :src="_item" :style="getActiveModuleStyle(item)" />
						</div>
					</template>
					<template v-else-if="item.name=='ultrasoundImage'" >
						<el-image v-model="form[item.id]" :src="item.result.property.value" :id="item.id" :style="getActiveModuleStyle(item)" />
					</template>
					<!-- divider -->
					<template v-else-if="item.name=='divider'" >
						<el-divider :style="getActiveModuleStyle(item)"/>
					</template>
					<!-- space -->
					<template v-else-if="item.name=='space'" >
						<span :style="getActiveModuleStyle(item)"></span>
					</template>
					<!-- select -->
					<template v-else-if="item.name=='select'" >
						<!-- <el-select v-model="form[item.result.property.bindField]" :id="item.id+item.result.property.bindField" :style="getActiveModuleStyle(item)"  clearable filterable>
							<el-option v-for="option in setOptionsData(item)" :key="option" :label="option" :value="option"></el-option>
						</el-select> -->
						<span :style="getActiveModuleStyle(item)" clearable>{{getObjectValue(item.result.property.bindField)}}</span>
					</template>
					<!-- datetime -->
					<template v-else-if="item.name=='datetime'" >
						<!-- <el-date-picker :id="item.id+item.result.property.bindField" v-model="form[item.result.property.bindField]" type="date" :style="getActiveModuleStyle(item)" size="default"></el-date-picker> -->
						<span :style="getActiveModuleStyle(item)" clearable>{{item.result.property.placeholder}}</span>
					</template>
					<!-- noComponent -->
					<template v-else>
						<el-tag name="danger">[{{item.name}}] Component not found</el-tag>
					</template>
					<div v-if="item.message" class="el-form-item-msg">{{item.message}}</div>
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>

<script>
	import tool from '@/utils/tool';
	import previewContent from '@/config/designer/preview';

	export default {
		props: {
			item: { type: Object, default: () => {} },
		},
		data() {
			return {
				form: {},
				curLanguage: this.$TOOL.data.get("APP_LANG")
			}
		},
		watch:{
			item(){
				this.render()
			},
			// form:{
			// 	handler(val){
			// 		this.$emit("update:modelValue", val)
			// 	},
			// 	deep: true
			// }
		},
		computed: {
			hasItem(){
				return Object.keys(this.item).length>0
			},
		},
		mounted() {
			if(this.hasItem){
				this.render()
			}
		},
		methods: {
			//构建form对象
			render() {
				if (this.curLanguage === null || this.curLanguage.length <= 0) 
				{
					this.curLanguage = "zh-CN";
				}
				this.loadData(this.item);
			},
			//导入数据
			loadData(item) {
				if (this.curLanguage === null || this.curLanguage.length <= 0) 
				{
					this.curLanguage = "zh-CN";
				}
				if (item.name == 'datetime') {
					this.form[this.item.result.property.bindField] = item.result.property.placeholder;
				}
				else if (item.name == 'textarea') {
					this.form[this.item.result.property.bindField] = previewContent[this.curLanguage][this.item.result.property.bindField];
				}
				else if (item.name == 'input' || item.name == 'select') {
					this.form[this.item.id] = previewContent[this.curLanguage][this.item.result.property.bindField];
				}
				else if (item.name === "divider") {
					this.form[this.item.id] = item.result.property.editable;
				}
				else if (item.name === "image") {
					this.form[this.item.id] = "";
				}
				else {
					this.form[this.item.id] = item.result.property.value;
				}
			},
			//设置对象值
			getObjectValue(field) {
				var str = previewContent[this.curLanguage][field];
				return str;
			},
			//设置当前组件宽度和水平位置
			getActiveWidthAndHorizontal(item, type) {
				if (type === 0) {//当前组件宽度 
					var widthStyle = "width:100%;margin-bottom:0px;";
					return widthStyle;
				}
				else if (type === 1) {//当前组件水平位置
					var colStyle = "width:100%;padding-left: 0.1px;padding-right: 0.1px;";
					return colStyle;
				}
			},
			//设置排列方式样式
			setArrangementStyle(item) {
				var styleModel = { 
				};
				if (item.name === "checkbox") {
					if (item.result.property.arrangement) {
						//纵向排列
					}
					else {
						//横向排列
						styleModel["display"] = "flex";
					}
				}
				else if (item.name === "radio") {
					if (item.result.property.arrangement) {
						//横向排列
						styleModel["display"] = "flex";
					}
					else {
						//纵向排列
						styleModel["display"] = "block";
					}
				}
				return styleModel;
			},
			//设置当前字体样式
			getActiveModuleStyle(item) {
				this.loadData(this.item);
				if (item.name === "input" || item.name == 'textarea' || item.name === "label" || item.name === "select" || item.name === "datetime" 
					|| item.name === "checkbox" || item.name === "radio" || item.name === "pageNumber" ) {
					return this.setGeneralModuleStyle(item);
				}
				else if (item.name === "space") {
					var styleModel = { 
						"min-height": "20px",
					};
					if (item.result.pattern.width > 0 || item.result.pattern.width.length > 0) {
						styleModel["width"] = tool.mmToPx(item.result.pattern.width) + "px";
					}
					return styleModel;
				}
				else if (item.name === "divider") {
					return this.setDividerModuleStyle(item);
				}
				else if (item.name === "image" || item.name === "ultrasoundImage" || item.name === "imageList") {
					return this.setImageModuleStyle(item);
				}
			},
			//设置分割线样式
			setDividerModuleStyle(item) {
				var styleModel = { 
					height: "2px",
					border: "none",
					margin: "5px"
				};
				var borderTop = "";
				if (item.result.pattern.borderWeight > 0 || item.result.pattern.borderWeight.length > 0) {
					borderTop += item.result.pattern.borderWeight + "px ";
				}
				else {
					borderTop += "1px ";
				}
				if (item.result.pattern.borderStyle.length > 0) {
					borderTop += item.result.pattern.borderStyle + " ";
				}
				else {
					borderTop += "solid ";
				}
				if (item.result.pattern.borderColor.length > 0) {
					borderTop += item.result.pattern.borderColor + " ";
				}
				else {
					borderTop += "#747474;";
				}
				styleModel["border-top"] = borderTop;
				if (item.result.pattern.borderWidth > 0 || item.result.pattern.borderWidth.length > 0) {
					styleModel["width"] = tool.mmToPx(item.result.pattern.borderWidth) + "px";
				}
				else {
					styleModel["width"] = "100%";
				}
				return styleModel;
			},
			//设置输入组件样式
			setGeneralModuleStyle(item) {
				var styleModel = {
					height: "auto",
					"min-height": "20px",
					"line-height": "20px"
				};
				var selectDom = null;
				if (item.name === "select" || item.name === "datetime") {
					selectDom = document.getElementById(item.id+item.result.property.bindField);
					if (selectDom) {
						selectDom.style.width = styleModel["width"];
					}
				}
				if (item.name === "checkbox" || item.name === "radio") {
					//height:25px;display:block;
					styleModel["height"] = "25px";
					styleModel["display"] = "block";
				}
				if (item.result.pattern.fontColor.length > 0) {
					styleModel["color"] = item.result.pattern.fontColor;
					if (selectDom) {
						selectDom.style.color = styleModel["color"];
					}
				}
				if (item.name === "label") {
					var upperFontSizeLabel = this.upperNextFontSize(item.result.pattern.fontSize);
					if (parseFloat(upperFontSizeLabel) > 14) {
						styleModel["padding-right"] = "5px";
						if (selectDom) {
							selectDom.style.paddingRight = styleModel["min-width"];
						}
					}
				}
				if (item.result.pattern.width > 0 || item.result.pattern.width.length > 0) {
					if (item.name === "input" || item.name === "select") {
						styleModel["min-width"] = tool.mmToPx(item.result.pattern.width - 1) + "px";
						if (selectDom) {
							selectDom.style.minWidth = styleModel["min-width"];
						}
					}
					else if (item.name === "radio" || item.name === "checkbox") {
						// styleModel["min-width"] = tool.mmToPx(item.result.pattern.width - 1) + "px";
						// if (selectDom) {
						// 	selectDom.style.minWidth = styleModel["min-width"];
						// }
					}
					else if (item.name === "datetime")
					{
						var widthValue = 0;
						var displayFormat = item.result.property.displayFormat;
						if (displayFormat === "yyyy-MM-dd" || displayFormat === "yyyy/MM/dd" || displayFormat === "yyyy.MM.dd")
						{
							widthValue = 21;
						}
						else if (displayFormat === "yyyy年MM月dd日")
						{
							widthValue = 29;
						}
						else if (displayFormat === "yyyy-MM-dd hh:mm")
						{
							widthValue = 31;
						}
						else
						{
							widthValue = 39;
						}
						styleModel["max-width"] = tool.mmToPx(widthValue) + "px";
						if (selectDom) {
							selectDom.style.minWidth = styleModel["min-width"];
						}
					}
					else if (item.name === "label") {
						if (parseInt(item.result.pattern.width) <= 0) {
							styleModel["min-width"] = "10px";
							if (selectDom) {
								selectDom.style.minWidth = styleModel["min-width"];
							}
						}
						else {
							styleModel["max-width"] = tool.mmToPx(item.result.pattern.width - 1) + "px";
							if (selectDom) {
								selectDom.style.maxWidth = styleModel["max-width"];
							}
						}
					}  
					else {
						styleModel["min-width"] = tool.mmToPx(item.result.pattern.width) + "px";
						if (selectDom) {
							selectDom.style.minWidth = styleModel["min-width"];
						}
					}
				}
				if (item.result.pattern.fontName.length > 0) {
					styleModel["font-family"] = item.result.pattern.fontName;
					if (selectDom) {
						selectDom.style.fontFamily = styleModel["font-family"];
					}
				}
				if (item.result.pattern.fontSize.length > 0 || item.result.pattern.fontSize > 0) {
					var upperFontSize = this.upperNextFontSize(item.result.pattern.fontSize);
					if (parseFloat(upperFontSize) >= 12)
					{
						styleModel["font-Size"] = upperFontSize + 'px';
					}
					else if (parseFloat(upperFontSize) === 10)
					{
						styleModel["font-Size"] = '12px';
						styleModel["-webkit-transform-origin-x"] = "0";
						styleModel["-webkit-transform"] = "scale(0.925)";
					}
					else if (parseFloat(upperFontSize) === 10.5)
					{
						styleModel["font-Size"] = '12px';
						styleModel["-webkit-transform-origin-x"] = "0";
						styleModel["-webkit-transform"] = "scale(0.95)";
					}
					else if (parseFloat(upperFontSize) === 11)
					{
						styleModel["font-Size"] = '12px';
						styleModel["-webkit-transform-origin-x"] = "0";
						styleModel["-webkit-transform"] = "scale(0.98)";
					}
					else 
					{
						styleModel["font-Size"] = '12px';
						styleModel["-webkit-transform-origin-x"] = "0";
						styleModel["-webkit-transform"] = "scale(0." + upperFontSize.toString().replace(".", "") + ")";
					}
					if (selectDom) {
						selectDom.style.fontSize = styleModel["font-Size"];
					}
					styleModel["line-height"] = (parseFloat(upperFontSize) + 6) + 'px';
					if (selectDom) {
						selectDom.style.lineHeight = styleModel["line-height"];
					}
						
				}
				if (item.result.pattern.fontItalic) {
					styleModel["font-style"] = "italic";
					if (selectDom) {
						selectDom.style.fontStyle = styleModel["font-style"];
					}
				}
				if (item.result.pattern.fontUnderLine) {
					styleModel["text-decoration"] = "underline ";
					if (item.result.pattern.fontColor.length > 0) {
						styleModel["text-decoration"] += item.result.pattern.fontColor;
					}
					if (selectDom) {
						selectDom.style.textDecoration = styleModel["text-decoration"];
					}
				}
				if (item.result.pattern.horizontalAlignment.length > 0) {
					if (item.result.property.bindField === "HospitalName") {
						styleModel["text-align"] = "center";
						if (selectDom) {
							selectDom.style.textAlign = styleModel["text-align"];
						}
					}
					else if (item.name === "label" && item.result.property.placeholder === "超声检查报告单" || item.result.property.placeholder === "超声检查咨询单") {
						styleModel["text-align"] = "center";
						if (selectDom) {
							selectDom.style.textAlign = styleModel["text-align"];
						}
					}
					else {
						switch (item.result.pattern.horizontalAlignment) {
							case "Center":
								styleModel["text-align"] = "center";
								break;
							case "Right":
							case "Bothends":
								styleModel["text-align"] = "right";
								break;
							default:
								styleModel["text-align"] = "left";
								break;
						}
						if (selectDom) {
							selectDom.style.textAlign = styleModel["text-align"];
						}
					}
				}
				if (item.result.pattern.verticalAlignment.length > 0) {
					switch (item.result.pattern.verticalAlignment) {
						case "Top":
							styleModel["vertical-align"] = "top";
							break;
						case "Bottom":
							styleModel["vertical-align"] = "bottom";
							break;
						default:
							styleModel["vertical-align"] = "middle";
							break;
					}
					if (selectDom) {
						selectDom.style.verticalAlign = styleModel["vertical-align"];
					}
				}
				if (item.result.pattern.fontWeight > 0) {
					styleModel["font-weight"] = item.result.pattern.fontWeight;
					if (selectDom) {
						selectDom.style.fontWeight = styleModel["font-weight"];
					}
				}
				if (item.name === "textarea") {
					styleModel["border"] = "0px";
					styleModel["height"] = "124px";
					if (item.result.pattern.fontSize.length > 0 || item.result.pattern.fontSize > 0) {
						var textAreaUpperFontSize = this.upperNextFontSize(item.result.pattern.fontSize);
						if (parseFloat(textAreaUpperFontSize) > 18) {
							styleModel["height"] = 'auto';
							if (selectDom) {
								selectDom.style.height = styleModel["height"];
							}
						}
					} 
				}
				return styleModel;
			},
			upperNextFontSize(fontSize)
			{
				var resValue = 0;
				switch(fontSize)
				{
					case 48:
					case "48":
						resValue = 56
						break;
					case "56":
					case 56:
						resValue = 72
						break;
					case "72":
					case 72:
						resValue = 90
						break;
					case "42.0":
					case 42:
					case 42.0:
						resValue = 48
						break;
					case "36.0":
					case "36":
					case 36.0:
					case 36:
						resValue = 42
						break;
					case "28":
					case 28:
					case 28.0:
						resValue = 36
						break;
					case "26.0":
					case "26":
					case 26.0:
					case 26:
						resValue = 28
						break;
					case "24.0":
					case 24.0:
					case 24:
						resValue = 26
						break;
					case "22.0":
					case "22":
					case 22.0:
					case 22:
						resValue = 24
						break;										
					case "20":									
					case 20:								
					case 20.0:
						resValue = 22
						break;
					case "18.0":
					case "18":
					case 18.0:
					case 18:
						resValue = 20
						break;
					case "16.0":
					case "16":
					case 16.0:
					case 16:
						resValue = 18
						break;
					case "15.0":
					case 15.0:
					case 15:
						resValue = 16
						break;
					case "14.0":
					case 14.0:
					case 14:
						resValue = 15
						break;
					case "12.0":
					case 12.0:
					case 12:
						resValue = 14
						break;
					case "11.0":
					case 11.0:
					case 11:
						resValue = 12
						break;
					case "10.5":
					case 10.5:
						resValue = 11
						break;
					case "10.0":
					case "10":
					case 10.0:
					case 10:
						resValue = 10.5
						break;
					case "9.0":
					case 9.0:
					case 9:
						resValue = 10
						break;
					case "8.5":
					case 8.5:
						resValue = 9
						break;
					case "8.0":
					case "8":
					case 8.0:
					case 8:
						resValue = 8.5
						break;
					case "7.5":
					case 7.5:
						resValue = 8
						break;
					case "7.0":
					case "7":
					case 7.0:
					case 7:
						resValue = 7.5
						break;
					case "6.5":
					case 6.5:
						resValue = 7
						break;
					case "6.0":
					case "6":
					case 6.0:
					case 6:
						resValue = 6.5
						break;
					case "5.5":
					case 5.5:
						resValue = 6
						break;
					default:
						resValue = 11
						break;
				}
				return resValue;
			},
			//设置图片组件样式
			setImageModuleStyle(item) {
				var imageStyle = {};	
				if (item.name === "imageList") {
					if (item.result.base.gridWidth > 0) {
						if (item.result.parentName === "cell") {
							imageStyle["max-width"] = tool.mmToPx(item.result.base.gridWidth) + "px";
						}
						else {						
							imageStyle["width"] = tool.mmToPx(item.result.base.gridWidth) + "px";
						}
					}
					else {
						imageStyle["width"] = "100%";
					}
					if (item.result.base.gridHeight > 0) {
						imageStyle["height"] = tool.mmToPx(item.result.base.gridHeight) + "px";
					}
					else {
						imageStyle["height"] = "100%";
					}
					if (item.result.pattern.showImageBorder) {
						imageStyle["border"] = "2px solid #727272";
					}
					else {
						imageStyle["border"] = "0px";
					}
					if (item.result.pattern.backgroundShadow) {
						imageStyle["background"] = "white";
					}
					else {
						imageStyle["background"] = "black";
					}
					if (item.result.pattern.showImageInterval) {
						imageStyle["margin-left"] = "3px";
					}
					else {
						imageStyle["margin-left"] = "0px";
					}
				}		
				else {				
					if (item.result.pattern.width > 0) {	
						if (item.result.parentName === "cell") {
							imageStyle["max-width"] = tool.mmToPx(item.result.pattern.width) + "px";
						}
						else {						
							imageStyle["width"] = tool.mmToPx(item.result.pattern.width) + "px";
						}
					}
					else {
						imageStyle["width"] = "100%";
					}
					if (item.result.pattern.border) {
						imageStyle["border"] = "2px solid #727272";
						imageStyle["padding"] = "4px";
					}
					else {
						imageStyle["border"] = "0px";
						if (item.result.pattern.width < 80 && item.name === "ultrasoundImage") 
						{
							imageStyle["padding"] = "0px 10px";
						}
						else {
							imageStyle["padding"] = "0px";
						}
					}
					if (item.result.pattern.height > 0) {
						imageStyle["height"] = tool.mmToPx(item.result.pattern.height) + "px";
					}
					else {
						imageStyle["height"] = "100%";
					}
					if (item.result.pattern.backgroundShadow) {
						imageStyle["background"] = "white";
					}
					else {
						imageStyle["background"] = "black";
					}
				}
				
				return imageStyle;
			},
			//设置checkbox和select等options的动态数据
			setOptionsData(item) {
				var dataItems = [];
				if (item.result.property && item.result.property.dataSourceType) {
					if (item.result.property.dataSourceType.value === "0") {
						//静态数据
						dataItems = item.result.property.staticOptions;
					}
					else {
						//动态数据
						dataItems = item.result.property.dynamicOptions;
					}
				}
				return dataItems;
			},
			//处理动态隐藏
			hideHandle(item){
				if(item.hideHandle){
					const exp = eval(item.hideHandle.replace(/\$/g,"this.form"))
					return exp
				}
				return false
			},
			//处理动态必填
			rulesHandle(item){
				if(item.requiredHandle){
					const exp = eval(item.requiredHandle.replace(/\$/g,"this.form"))
					var requiredRule = item.rules.find(t => 'required' in t)
					requiredRule.required = exp
				}
				return item.rules
			},
		}
	}
</script>

<style scoped>
	.divItem {
		width: 100%;
		padding: 0px;
	}
	.select-popper {
		color:red;
	}
::v-deep .el-form-item__content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    position: relative;
    font-size: var(--font-size);
    min-width: 0;
}

::v-deep .el-form-item--default .el-form-item__content {
    min-height: auto;line-height: 2px;
}
</style>
