Vue.component('fs-input', KeeVue.extend({
		template: `<div :class="{'input-error':component.error}">

			<template v-if="thisForm!=null">
				<div class="el-form-item" thisform="thisform">
					<!--<template v-if="debug==true">
					<el-input v-model="component.value" size="small" type="text"  auto-complete="off" :placeholder="component.cp.help"></el-input>
				</template>-->
					<template>
						
						
					 
						
				 
						<label class="el-form-item__label" v-show="component.cp.isShowTitle!=false" :style="{width: component.cp.isShowTitle!=false?(thisForm.cp.labelPosition=='top'?'100%':component.cp.labelWidth+'px'):'0px'}">{{component.cp.required==true&&component.cp.title!=null&&component.cp.title!=''?'*'+component.cp.title:component.cp.title}}
							<template v-if="type=='fs-radio'||type=='fs-checkbox'"><div style="color:#999999;line-height:12px; font-size:12px;margin-top:-8px">{{component.cp.help}}</div></template>
						</label>
						<div class="el-form-item__content" :style="{'margin-left': (component.cp.isShowTitle!=false&&thisForm.cp.labelPosition!='top'?component.cp.labelWidth+'px':'0px')}">

							<template v-if="(editable==false||component.cp.editable==false)&&type!='fs-upload'&&type!='fs-html-editor'&&type!='fs-switch'&&type!='fs-cms-config'&&type!='fs-img'&&type!='fs-cascader'&&type!='fs-ztree'&&type!='fs-select'&&type!='fs-roles'&&type!='fs-users'">
								<template v-if="component.cp.filter!=null&&component.cp.filter!=''">
									<div class="kee-static-div">
										<div v-html="component.htmlField"></div>
									</div>
								</template>
								<template v-else>									 
									<div class="kee-static-div">{{component.value}}</div>
								</template>

							</template>
							<template v-else>
								
									<div style="min-height: 14px;">
										<template v-if="type=='fs-input'">
											<el-input v-model="component.value" size="small" type="text" :readonly="debug==true" @blur="handleBlur(component)"   @keyup.native.13="onEnter(component)" @change="valueChange(component)" @input="valueChange(component)" auto-complete="off" :placeholder="component.cp.help"></el-input>

										</template>

										<template v-if="type=='fs-switch'">
											<el-switch v-model="component.value"  :disabled="editable==false||component.cp.editable==false" @change="valueChange(component)"></el-switch>
										</template>

										<template v-if="type=='fs-textarea'">
											<el-input v-model="component.value" type="textarea" @blur="handleBlur(component)"   @keyup.native.13="onEnter(component)" @change="valueChange(component)" :autosize="{minRows:component.cp.minRows,maxRows:component.cp.maxRows}" auto-complete="off" :placeholder="component.cp.help"></el-input>
										</template>

										<template v-if="type=='fs-select'||type=='fs-radio'||type=='fs-checkbox'">
										 
											<template v-if="component.cp.dsType==null">
												<fs-select :component="component" field="value" :type="component.name" :url="component.cp.url" @change="valueChange(component)" :editable="editable!=false&&component.cp.editable!=false"></fs-select>
											</template>

											<template v-if="component.cp.dsType=='dict'">
												<fs-select :component="component" field="value" :type="component.name" :dict="component.cp.dict" @change="valueChange(component)" :editable="editable!=false&&component.cp.editable!=false"></fs-select>
											</template>
											<template v-if="component.cp.dsType=='listOptions'">
												<fs-select :component="component" field="value" :type="component.name" :list-options="component.cp.listOptions" @change="valueChange(component)" :editable="editable!=false&&component.cp.editable!=false"></fs-select>
											</template>
											<template v-if="component.cp.dsType=='url'">
												<fs-select :component="component" field="value" :type="component.name" :url="component.cp.url" @change="valueChange(component)" :editable="editable!=false&&component.cp.editable!=false"></fs-select>
											</template>
											<template v-if="component.cp.dsType=='list'">
												<fs-select :component="component" field="value" :type="component.name"   @change="valueChange(component)" :editable="editable!=false&&component.cp.editable!=false"></fs-select>
											</template>
										</template>

										<template v-if="type=='fs-date'">

											<template v-if="component.cp.subType!='dateRange'">
												<el-date-picker v-model="component.value" :editable="false" :readonly="debug==true" :clearable="true" :type="component.cp.subType!=null&&component.cp.subType!=''?component.cp.subType:'date'" @blur="handleBlur(component)" @change="valueChange(component)" :value-format="component.cp.format!=null&&component.cp.format!=''?component.cp.format:'yyyy-MM-dd'" placeholder="选择日期">
												</el-date-picker>
											</template>

											<template v-if="component.cp.subType=='dateRange'">
												<el-date-picker v-model="component.value" :editable="false" :readonly="debug==true" :value-format="component.cp.format!=null&&component.cp.format!=''?component.cp.format:'yyyy-MM-dd'" type="daterange" placeholder="选择日期范围">
												</el-date-picker>
											</template>

										</template>
										<template v-if="type=='fs-rate'">
											<el-rate v-model="component.value"></el-rate>
										</template>
										
										<template v-if="type=='fs-qr'">
											{{type}}
										</template>
										
										
										<template v-if="type=='fs-img'">
											<fs-upload type="img" :component="component" @change="valueChange(component)" :editable="editable!=false&&component.cp.editable!=false"></fs-upload>
										</template>

										<template v-if="type=='fs-upload'">
											<!--<feas-form-input-file type="file" :form="component" field="value" :num="component.cp.num!=null?component.cp.num:1" @change="valueChange(component)" :editable="editable!=false&&component.cp.editable!=false"></feas-form-input-file>-->
											<fs-upload type="file" :component="component" @change="valueChange(component)" :editable="editable!=false&&component.cp.editable!=false"></fs-upload>

										</template>
										
										<template v-if="type=='fs-icon'">
											<fs-icon :form="component" :field="'value'" :editable="editable!=false&&component.cp.editable!=false" @change="valueChange(component)"></fs-icon>
										</template>
										
										<template v-if="type=='fs-cascader'">
											<fs-select :component="component" field="value" type="fs-cascader" :url="component.cp.url" @change="valueChange(component)" :editable="editable!=false&&component.cp.editable!=false"></fs-select>
										</template> 
										 
						<template v-if="type=='fs-users'">
										<fs-ztree :component="component" type="fs-users" @change="valueChange(component)" :debug="debug" :editable="editable!=false&&component.cp.editable!=false"></fs-ztree>
									</template>

									<template v-if="type=='fs-roles'">
										<fs-ztree :component="component" type="fs-roles" @change="valueChange(component)" :debug="debug" :editable="editable!=false&&component.cp.editable!=false"></fs-ztree>
									</template>
									
						
						 
								<template v-if="type=='fs-ztree'">
								<fs-ztree :component="component" type="fs-ztree" @change="valueChange(component)" :debug="debug" :editable="editable!=false&&component.cp.editable!=false"></fs-ztree>
								</template>
								<template v-if="type=='fs-html-editor'">
								<fs-html-editor :component="component" type="fs-html-editor" @change="valueChange(component)" :debug="debug" :editable="editable!=false&&component.cp.editable!=false"></fs-html-editor>
								</template>
								<template v-if="type=='fs-code-editor'">
								<fs-code-editor :component="component" type="fs-code-editor" @change="valueChange(component)" :debug="debug" :editable="editable!=false&&component.cp.editable!=false"></fs-code-editor>
								</template>
								<template v-if="type=='fs-color'">
								<fs-color :component="component" type="fs-color" @change="valueChange(component)" :debug="debug" :editable="editable!=false&&component.cp.editable!=false"></fs-color>
								</template>
								<template v-if="type=='fs-cms-config'">
								<fs-cms-config :component="component" type="fs-cms-config" @change="valueChange(component)" :debug="debug" :editable="editable!=false&&component.cp.editable!=false"></fs-cms-config>
								</template>
								<template v-if="type=='fs-pic-select'">
								<fs-pic-select :component="component" type="fs-pic-select" @change="valueChange(component)" :debug="debug" :editable="editable!=false&&component.cp.editable!=false"></fs-pic-select>
								</template>
  
									</div>
								<!--<el-tooltip :content="component.errorMsg" :disabled="!component.error" placement="right" effect="light">
								</el-tooltip>-->
								<div style="color:#FF0000;font-size:10px;margin:0;padding:0;line-height: 10px;">{{component.errorMsg}}</div>
							</template>

						</div>

					</template>

				</div>
			</template>
			<template v-else>

				<template v-if="(editable==false||component.cp.editable==false)&&type!='fs-upload'&&type!='fs-img'&&type!='fs-icon'">
					<template v-if="component.cp.filter!=null&&component.cp.filter!=''">
						<div class="kee-static-div">
							<div v-html="component.htmlField"></div>
						</div>
					</template>
					<template v-else>
						<div class="kee-static-div">{{component.value}}</div>
					</template>

				</template>
				<template v-else>

					<div style="min-height: 14px;">
						<template v-if="type=='fs-input'">
							<el-input v-model="component.value" size="small" type="text" :readonly="debug==true" @blur="handleBlur(component)"  @keyup.native.13="onEnter(component)" @change="valueChange(component)" @input="valueChange(component)" auto-complete="off" :placeholder="component.cp.help"></el-input>

						</template>

						<template v-if="type=='fs-switch'">
							<el-switch v-model="component.value"  :disabled="editable==false||component.cp.editable==false"  @change="valueChange(component)"></el-switch>
						</template>

						<template v-if="type=='fs-textarea'">
							<el-input v-model="component.value" type="textarea" @blur="handleBlur(component)"   @keyup.native.13="onEnter(component)" @change="valueChange(component)" :autosize="{minRows:component.cp.minRows,maxRows:component.cp.maxRows}" auto-complete="off" :placeholder="component.cp.help"></el-input>
						</template>

						<template v-if="type=='fs-select'||type=='fs-radio'||type=='fs-checkbox'">
							<template v-if="component.cp.dsType==null">
								<fs-select :component="component" field="value" :type="component.name" :url="component.cp.url" @change="valueChange(component)" :editable="editable!=false&&component.cp.editable!=false"></fs-select>
							</template>
							
							 

							<template v-if="component.cp.dsType=='dict'">
								<fs-select :component="component" field="value" :type="component.name" :dict="component.cp.dict" @change="valueChange(component)" :editable="editable!=false&&component.cp.editable!=false"></fs-select>
							</template>
							<template v-if="component.cp.dsType=='listOptions'">
								<fs-select :component="component" field="value" :type="component.name" :list-options="component.cp.listOptions" @change="valueChange(component)" :editable="editable!=false&&component.cp.editable!=false"></fs-select>
							</template>
							<template v-if="component.cp.dsType=='url'">
								<fs-select :component="component" field="value" :type="component.name" :url="component.cp.url" @change="valueChange(component)" :editable="editable!=false&&component.cp.editable!=false"></fs-select>
							</template>
							<template v-if="component.cp.dsType=='list'">
												<fs-select :component="component" field="value" :type="component.name"   @change="valueChange(component)" :editable="editable!=false&&component.cp.editable!=false"></fs-select>
											</template>
						</template>

						<template v-if="type=='fs-date'">

							<template v-if="component.cp.subType!='dateRange'">
								<el-date-picker v-model="component.value" :editable="false" :readonly="debug==true" :clearable="true" :type="component.cp.subType!=null&&component.cp.subType!=''?component.cp.subType:'date'" :value-format="component.cp.format!=null&&component.cp.format!=''?component.cp.format:'yyyy-MM-dd'" @blur="handleBlur(component)" @change="valueChange(component)" placeholder="选择日期">
								</el-date-picker>
							</template>

							<template v-if="component.cp.subType=='dateRange'">
								<el-date-picker v-model="component.value" :editable="false" :readonly="debug==true" :value-format="component.cp.format!=null&&component.cp.format!=''?component.cp.format:'yyyy-MM-dd'" type="daterange" placeholder="选择日期范围">
								</el-date-picker>
							</template>

						</template>

						<template v-if="type=='fs-icon'">
							<fs-icon :form="component" :field="'value'" :po="po" :editable="editable!=false&&component.cp.editable!=false" @change="valueChange(component)"></fs-icon>
						</template>

						<template v-if="type=='fs-rate'">
							<el-rate v-model="component.value"></el-rate>
						</template>

						<template v-if="type=='fs-img'">
							<fs-upload type="img" :component="component" @change="valueChange(component)" :editable="editable!=false&&component.cp.editable!=false"></fs-upload>
						</template>

						<template v-if="type=='fs-upload'">
							<!--<feas-form-input-file type="file" :form="component" field="value" :num="component.cp.num!=null?component.cp.num:1" @change="valueChange(component)" :editable="editable!=false&&component.cp.editable!=false"></feas-form-input-file>-->
							<fs-upload type="file" :component="component" @change="valueChange(component)" :editable="editable!=false&&component.cp.editable!=false"></fs-upload>

						</template>

						<template v-if="type=='fs-cascader'">
							<fs-select :component="component" field="value" type="fs-cascader" :url="component.cp.url" @change="valueChange(component)" :editable="editable!=false&&component.cp.editable!=false"></fs-select>
						</template>

					 

						<template v-if="type=='fs-qr'">
							{{type}}
						</template>
						<template v-if="type=='fs-users'">
										<fs-ztree :component="component" type="fs-users" @change="valueChange(component)" :debug="debug" :editable="editable!=false&&component.cp.editable!=false"></fs-ztree>
									</template>

									<template v-if="type=='fs-roles'">
										<fs-ztree :component="component" type="fs-roles" @change="valueChange(component)" :debug="debug" :editable="editable!=false&&component.cp.editable!=false"></fs-ztree>
									</template>
									
						
						 
							<template v-if="type=='fs-ztree'">
								<fs-ztree :component="component" type="fs-ztree" @change="valueChange(component)" :debug="debug" :editable="editable!=false&&component.cp.editable!=false"></fs-ztree>
							</template>
							<template v-if="type=='fs-html-editor'">
								<fs-html-editor :component="component" type="fs-html-editor" @change="valueChange(component)" :debug="debug" :editable="editable!=false&&component.cp.editable!=false"></fs-html-editor>
							</template>
							<template v-if="type=='fs-code-editor'">
								<fs-code-editor :component="component" type="fs-code-editor" @change="valueChange(component)" :debug="debug" :editable="editable!=false&&component.cp.editable!=false"></fs-code-editor>
							</template>
							<template v-if="type=='fs-color'">
								<fs-color :component="component" type="fs-color" @change="valueChange(component)" :debug="debug" :editable="editable!=false&&component.cp.editable!=false"></fs-color>
							</template>
							<template v-if="type=='fs-cms-config'">
								<fs-cms-config :component="component" type="fs-cms-config" @change="valueChange(component)" :debug="debug" :editable="editable!=false&&component.cp.editable!=false"></fs-cms-config>
							</template>
							<template v-if="type=='fs-pic-select'">
								<fs-pic-select :component="component" type="fs-pic-select" @change="valueChange(component)" :debug="debug" :editable="editable!=false&&component.cp.editable!=false"></fs-pic-select>
							</template>

					</div>

				</template>

			</template>

		</div>`,
		props: ['component', 'viewName', 'editable', 'thisForm', 'parentForm', 'debug', 'po', 'alias', 'type'],

		data: function() {

			return {
				devConfig: typeof devConfig == 'undefined' ? false : devConfig,
				randId: KeeUtils.getRandString(),
				currentUserName: currentUserName,
				currentUserId: currentUserId,
				pagination: {
					total: 0,
					rows: 10,
					page: 1,
					totalPage: 0,
				},
				sort: 'id',
				order: 'desc',
				groupby: '',
				listName: '',
				isShowGrid: false,
				pageSize: 10,
				currentPage4: 1,
				height: 500,
				gridData: [],

				hasFixedField: false,
				componentState: {
					refreshTime: 0
				},
				showType: "grid", // 是否采用grid，或card方式显示
				configWindow: null,

				dtoFields: '',
				selectedRows: [],
			}
		},

		mounted: function() {

			var that = this;
			// 注册组件,fs-select 有自己的注册机制，这里如果注册会覆盖子组件已注册的信息
			if(this.component.name == 'fs-input'||this.component.name == 'fs-ztree'||this.component.name == 'fs-switch'||this.component.name == 'fs-textarea'||this.component.name == 'fs-date'||this.component.name == 'fs-rate') {
				this.registComponent();
			}

		},
		watch: {

		},
		methods: {

			//			getValue: function() {
			//				if(this.component != null) {
			//					return this.component.value;
			//				}
			//
			//				return null;
			//
			//			},

			itemClick: function(item) {
				//alert(item.title);
			},

			validValue: function(item) {

				// 验证用户输入的值是否符合要求；

				var error = false;
				var errorMsg = "";

				if(item.type == "dateRange") {
					if(item.cp.required != null && item.cp.required == true) {

						//alert(JSON.stringify(item.value));

						var str = JSON.stringify(item.value);

						if(str.length < 26 || str.indexOf("N") != -1) {
							error = true;
							errorMsg = "必填项";
						}
					}
				} else {
					if(item.cp.required != null && item.cp.required == true) {
						if(KeeUtils.isNotBlank(item.value) != true) {
							error = true;
							errorMsg = "必填项";
						}
					}
				}

				if(item.cp.format != null && item.cp.format != "") {
					if(item.cp.format == "text") {

					}
					if(item.cp.format == "email" && item.value != null && item.value != "" && KeeUtils.isEmail(item.value) == false) {
						error = true;
						errorMsg = "邮箱格式错误";
					}
					if(item.cp.format == "phone" && item.value != null && item.value != "" && KeeUtils.isPhone(item.value) == false) {
						error = true;
						errorMsg = "电话格式错误";
					}
					if(item.cp.format == "tel" && item.value != null && item.value != "" && KeeUtils.isTel(item.value) == false) {
						error = true;
						errorMsg = "手机号格式错误";
					}
					if(item.cp.format == "idcard" && item.value != null && item.value != "" && KeeUtils.isIdCard(item.value) == false) {
						error = true;
						errorMsg = "身份证格式错误";
					}
					if(item.cp.format == "ip" && item.value != null && item.value != "" && KeeUtils.isIp(item.value) == false) {
						error = true;
						errorMsg = "IP格式错误";
					}
					if(item.cp.format == "number" && item.value != null && item.value != "" && KeeUtils.isNumber(item.value) == false) {
						error = true;
						errorMsg = "只能输入数字";
					}
					if(item.cp.format == "float" && item.value != null && item.value != "" && KeeUtils.isFloat(item.value) == false) {
						error = true;
						errorMsg = "只能输入小数";
					}
					if(item.cp.format == "int" && item.value != null && item.value != "" && KeeUtils.isInt(item.value) == false) {
						error = true;
						errorMsg = "只能输入正整数";
					}

				}

				if(item.cp.minLength != null && item.cp.minLength != "") {
					if(item.value != null && item.value.length < parseInt(item.cp.minLength)) {
						error = true;
						errorMsg += "输入长度最小为" + item.cp.minLength + "个字符";
					}
				}
				if(item.cp.maxLength != null && item.cp.maxLength != "") {
					if(item.value != null && item.value.length > parseInt(item.cp.maxLength)) {
						error = true;
						errorMsg += "输入长度最大为" + item.cp.maxLength + "个字符";
					}
				}

				if(item.cp.format == 'number' || item.cp.format == 'float' || item.cp.format == 'int') {
					if(KeeUtils.isNotBlank(item.cp.min)) {
						if(item.value != null && parseInt(item.value) < parseInt(item.cp.min)) {
							error = true;
							errorMsg += "不能小于值" + item.cp.min + "";
						}
					}

					if(KeeUtils.isNotBlank(item.cp.max)) {
						if(item.value != null && parseInt(item.value) > parseInt(item.cp.max)) {
							error = true;
							errorMsg += "不能大于值" + item.cp.max + "";
						}
					}
				}

				// 读取数据库系统的验证条件，待完善；

				// 验证长度

				// 验证格式

				item.error = error;
				item.errorMsg = errorMsg;

			},

			handleBlur: function(item) {
				// 当失去焦点时
				if(item.value != null)
					item.value = item.value.trim();
				this.validValue(item);
			},
			
			onEnter: function(item) {
				 
				CMap[item.viewName].$emit(item.alias + ".enter", item, this.po, this.thisForm, this.parentForm);
			},
			
			valueChange: function(item) {
				var that = this;
				//console.log("feas-form组件，valueChange:item.field:" + item.field + " item.value:" + item.value + "   " + this.isWatchChange + ", this.vueApp.isAutoSubmit," + this.vueApp.isAutoSubmit + " item.error=" + item.error + " isEditModel=" + this.isEditModal);
				//alert(item.field + " " + item.value + this.isWatchChange+", this.vueApp.isAutoSubmit,"+this.vueApp.isAutoSubmit+" item.error="+item.error+" isEditModel="+this.isEditModal )

				// 实时校验
				that.validValue(item);
				//console.log(JSON.stringify(item))
				if(item.error == false) {

					// 如果是数字类型的，需要转换成数字格式
					if(item.type == 'text' && "number" == item.cp.format && KeeUtils.isNotBlank(item.value)) {
						item.value = parseInt(item.value);
					}

					//alert("item.cp.field:"+item.cp.field)
					 
					if(that.po!=null)
					{
						setVueAttr(that.po, item.cp.field, item.value);
					}

					// 实时联动更新，看看这个值是否有被子表单依赖

				}

				this.$emit("command", "change", item, this.po, this.thisForm, this.parentForm);

				this.sendPageEvent("change", item.value, this.po);

			},

		}
	}));
 

 
 
 
 
 

 
 
 
 
 
 
 // 组件渲染器

Vue.component('feas-components', KeeCRUDVue.extend({

	props: ['components','style', 'parentLayout', 'po', 'name', 'query', 'debug', 'thisForm', 'parentForm', 'editable'],

	render: function(createElement) {
		var that = this;

		return createElement('div', {
			attrs: {
				"tag": "fscomponents"
			},
			'style':this.style,
			'class': {
				'kee-full-div': (this.parentLayout != null ? true : false)
			}
		}, this.renderComponents(createElement));
	},

	data: function() {
		return {
			randId: KeeUtils.getRandString(),
			currentUserName: currentUserName,
			currentUserId: currentUserId,
			 
		}
	},

	mounted: function() {

	},

	methods: {

		renderChildren: function(h, item) {

			return h("div", {
				'class': {
					'el-row': item.name == 'el-row'
				}

			}, [
				h('feas-components', {
					attrs: {
						'components': item.child,
						'po': this.po,
						'this-form': this.thisForm,
						'parent-form': this.parentForm,
						'name': this.name,
						'query': this.query,
						'editable': this.editable,
						'debug': this.debug,
						'style':  item.style
					},
					on: {
						command: this.onCommand,
						changed: this.onChanged,
					}

				})
			])

		},

		renderFsInput: function(h, item) {

			return h('fs-input', {
				attrs: {
					'component': item,
					'po': this.po,
					'type': item.name,
					'alias': item.alias,
					'thisForm': this.thisForm,
					'parentForm': this.parentForm,
					 'name': this.name,
					 
					'editable': this.editable,
					'debug': this.debug,

				},
				on: {
					command: this.onCommand,
					changed: this.onChanged,
				}

			});

		},

		renderFsButton: function(h, item) {
			return h('fs-button', {
				attrs: {
					'component': item,
					'po': this.po,
					'this-form': this.thisForm,
					'parent-form': this.parentForm,
					'name': this.name,
					'query': this.query,
					'editable': this.editable,
					'debug': this.debug,

				},
				on: {
					command: this.onCommand,
					changed: this.onChanged,
				}

			});
		},

		renderFsCard: function(h, item) {
		
			if(item.cp.onlydiv==true)
			{
			return h("div", { }, [h('div', {
				style: {
					'padding-top': '3px',
				}

			}, [
				h('feas-components', {
					attrs: {
						'components': item.child,
						'po': this.po,
						'this-form': this.thisForm,
						'parent-form': this.parentForm,
						'name': this.name,
						'query': this.query,
						'editable': this.editable,
						'debug': this.debug,
						'style':  item.style
					},
					on: {
						command: this.onCommand,
						changed: this.onChanged,
					}
				})
			])])
			}
			else
			{
				return h("el-card", {
				'class': {
					'box-card': true
				}

			}, [h('div', {
				style: item.style

			}, [
				h('feas-components', {
					attrs: {
						'components': item.child,
						'po': this.po,
						'this-form': this.thisForm,
						'parent-form': this.parentForm,
						'name': this.name,
						'query': this.query,
						'editable': this.editable,
						'debug': this.debug,
						'style':  item.style
					},
					on: {
						command: this.onCommand,
						changed: this.onChanged,
					}
				})
			])])
			}
			

			

		}, 
		renderFsIcon: function(h, item) {
			if(this.editable != false && item.cp.editable != false) {
				if(item.visiable != false || this.debug == true) {
					return h('div', {
						attrs: {
							id: item.id,
							tid: item.id,
							'testtest':'是一个div'
						},
						'class': {
							'kee-relative-div': true,
							'kee-inline-block': true,
						}

					}, [this.renderFsInput(h, item)])
				}
			} else {
				if(this.debug == true) {

					return h('div', {
						style: {
							width: '20px',
							height: '20px'
						}
					}, [h('span', {
						'class': {
							'el-icon-edit': true
						}
					})])
				} else {
					var cls = {};
					cls[this.po[item.cp.field]] = true;
					return h('span', {
						'class': cls
					})
				}

			}
		},

		renderComponentItem: function(h, item,components) {

			console.log("渲染：" + item.name+" 别名："+item.alias);

			var children = [];
			var added = false;
			if(item.name == 'el-col' || item.name == 'kee-div' || item.name == 'el-row') {
			
				
				children.push(this.renderChildren(h, item));
				added = true;
			}
			if(item.name == "fs-card") {
				children.push(this.renderFsCard(h, item));
				added = true;
			}

			if(item.type == 'form' && item.name != 'el-button' && item.name != 'fs-text' && item.name != 'fs-icon') {
				children.push(this.renderFsInput(h, item));
				added = true;
			}

			if(item.name == "el-button") {
				children.push(this.renderFsButton(h, item));
				added = true;
			}
			if(item.name == "fs-icon") {
				children.push(this.renderFsIcon(h, item));
				added = true;
			}
			// 其他为正常渲染组件
			if(added == false) {
				children.push(h(item.name, {
					attrs: {
						'component': item,
						'components':components,
						'po': this.po,
						'this-form': this.thisForm,
						'alias': item.alias,
						'parent-form': this.parentForm,
						'name': this.name,
						'query': this.query,
						'editable': this.editable,
						'debug': this.debug,
					},
					on: {
						command: this.onCommand,
						changed: this.onChanged,
						add: this.add,
						remove: this.remove,
					}
				}));
			}

			if(this.debug == true && (item.child == null || item.child.length == 0) && item.name != 'fs-text' && item.name != 'fs-video' && item.name != 'fs-pic' && item.name != 'el-col' && item.name != 'el-row' && item.name != 'fs-form' && item.name != 'fs-card') {
				children.push(h('div', {
					'class': {
						'kee-zhezhao': true
					}
				}));
			}

			if(this.debug == true && item.isKeeShowBorder == true) {
				children.push(h('fs-active', {
					'attrs': {
						component: item
					}
				}));
			}

			return children;

		},
		// 渲染组件
		renderComponents: function(createElement) {
			var children = [];
			
			 

			for(var i = 0; i < this.components.length; i++) {
				var item = this.components[i];
				
				// 看看有没有权限				
				if(KeeUtils.isNotBlank(item.permission))
				{
					if(!hasPermission(item.permission)&&debug != true)
					{
						continue;
					}
				}			 

				// 先创建一个 div 节点；
				var cls = {};
				cls["kee-comonent-div"] = (this.debug == true);
				cls['el-col'] = (item.name == 'el-col');
				cls['el-col-' + item.cp.span] = (item.name == 'el-col');
				cls['kee-relative-div'] = true;
				cls['kee-relative-margin'] = (item.isKeeShowBorder == true && item.name != 'fs-box');
				cls['kee-full-div'] = (this.parentLayout != null && item.name == 'fs-layout');

				if(item.style == null) {
					item.style = {};
				}
 
				if(item.name=='el-row'&&item.style!=null&&item.style.display=='inline-block')
				{ 
					// 强行设置display 属性
					item.style.display='block';
				}
				 
				 
				
				children.push( createElement("div", {
					attrs: {
						cname: item.name,
						key: item.id,
						id: item.id,
						tid: item.id,
						tttid:'test'+item.visiable,
						boxid: item.name == 'fs-box' || item.name == 'fs-form' || item.name == 'fs-index-config'|| item.name == 'fs-form-config'||item.name == 'fs-cms-config'|| item.name == 'fs-table' || item.name == 'el-col' || item.name == 'el-row' || item.name == 'fs-card' ? item.id : '',
					},
					'class': cls,
					key:item.id,
					style: item.style,
					directives:[ {
  						name: 'show',
  						value: (!(item.visiable === false) || debug == true)
					}]

				}, this.renderComponentItem(createElement, item,this.components)) );

			}

			return children;

		},

		onStopEvent: function() {

		},

		add: function(newItem) {
			this.components.push(newItem);
			 
		},

		remove: function(item) {
			console.log("待删除的alias:"+item.alias);
			console.log(this.components);
			//this.components.remove(item);

		},

		// 向上传递命令
		onCommand: function(cmdName, item, po, thisForm, parentForm) {
			console.log(" 收到command事件：" + cmdName);
			if(cmdName=='remove')
			{			 
				this.components.remove(thisForm);				
			}
			
			if(cmdName=='add')
			{
				//this.components.push(item);
			}
			else
			{
			  console.log("向上传递command")
				this.$emit("command", cmdName, item, po, thisForm, parentForm);
			}
			
			
		},

		handleBlur: function(item) {

		},

		// 所有表单类的值改变，都走这里
		valueChange: function(item) {
			//  将值设置到 query 里面去 
			this.po[item.cp.modelName] = item.value;
			//setAttr(this.query, item.cp.modelName, item.value);
			// 看看有没有绑定关系,由page层统一处理
			this.sendEvent(this.name + ".change", item);

			// 触发组件的更新事件
			this.sendEvent(item.alias + ".change", item);

			this.$emit("change", item);

		},
		onChanged: function(ret) {
			this.$emit("changed", ret);
		}

	}
}));






Vue.component('feas-component', KeeCRUDVue.extend({

	props: ['component', 'parentLayout', 'po', 'name', 'query', 'debug', 'thisForm', 'parentForm', 'editable'],

	render: function(createElement) {
		var that = this;

		return createElement('div', {
			attrs: {
				 
			},
			'class': { }
		}, this.renderComponents(createElement));
	},

	data: function() {
		return {
			randId: KeeUtils.getRandString(),
			currentUserName: currentUserName,
			currentUserId: currentUserId,
		}
	},

	mounted: function() {

	},

	methods: {

		renderChildren: function(h, item) {

			return h("div", {
				'class': {
					'el-row': item.name == 'el-row'
				}

			}, [
				h('feas-components', {
					attrs: {
						'components': item.child,
						'po': this.po,
						'this-form': this.thisForm,
						'parent-form': this.parentForm,
						'name': this.name,
						'query': this.query,
						'editable': this.editable,
						'debug': this.debug,
						'style':  item.style
					},
					on: {
						command: this.onCommand,
						changed: this.onChanged,
					}

				})
			])

		},

		renderFsInput: function(h, item) {

			return h('fs-input', {
				attrs: {
					'component': item,
					'po': this.po,
					'type': item.name,
					'alias': item.alias,
					'thisForm': this.thisForm,
					'parentForm': this.parentForm,
					 'name': this.name,
					 
					'editable': this.editable,
					'debug': this.debug,

				},
				on: {
					command: this.onCommand,
					changed: this.onChanged,
				}

			});

		},

		renderFsButton: function(h, item) {
			return h('fs-button', {
				attrs: {
					'component': item,
					'po': this.po,
					'this-form': this.thisForm,
					'parent-form': this.parentForm,
					'name': this.name,
					'query': this.query,
					'editable': this.editable,
					'debug': this.debug,

				},
				on: {
					command: this.onCommand,
					changed: this.onChanged,
				}

			});
		},

		renderFsCard: function(h, item) {
		
			if(item.cp.onlydiv==true)
			{
			return h("div", { }, [h('div', {
				style: {
					'padding-top': '3px',
				}

			}, [
				h('feas-components', {
					attrs: {
						'components': item.child,
						'po': this.po,
						'this-form': this.thisForm,
						'parent-form': this.parentForm,
						'name': this.name,
						'query': this.query,
						'editable': this.editable,
						'debug': this.debug,
						'style':  item.style
					},
					on: {
						command: this.onCommand,
						changed: this.onChanged,
					}
				})
			])])
			}
			else
			{
				return h("el-card", {
				'class': {
					'box-card': true
				}

			}, [h('div', {
				style: {
					'padding-top': '3px',
				}

			}, [
				h('feas-components', {
					attrs: {
						'components': item.child,
						'po': this.po,
						'this-form': this.thisForm,
						'parent-form': this.parentForm,
						'name': this.name,
						'query': this.query,
						'editable': this.editable,
						'debug': this.debug,
						'style':  item.style
					},
					on: {
						command: this.onCommand,
						changed: this.onChanged,
					}
				})
			])])
			}
			

			

		}, 
		renderFsIcon: function(h, item) {
			if(this.editable != false && item.cp.editable != false) {
				if(item.visiable != false || this.debug == true) {
					return h('div', {
						attrs: {
							id: item.id,
							tid: item.id,
							'testtest':'是一个div'
						},
						'class': {
							'kee-relative-div': true,
							'kee-inline-block': true,
						}

					}, [this.renderFsInput(h, item)])
				}
			} else {
				if(this.debug == true) {

					return h('div', {
						style: {
							width: '20px',
							height: '20px'
						}
					}, [h('span', {
						'class': {
							'el-icon-edit': true
						}
					})])
				} else {
					var cls = {};
					cls[this.po[item.cp.field]] = true;
					return h('span', {
						'class': cls
					})
				}

			}
		},

		renderComponentItem: function(h, item,components) {

			console.log("渲染：" + item.name+" 别名："+item.alias);

			var children = [];
			var added = false;
			if(item.name == 'el-col' || item.name == 'kee-div' || item.name == 'el-row') {
			
				
				children.push(this.renderChildren(h, item));
				added = true;
			}
			if(item.name == "fs-card") {
				children.push(this.renderFsCard(h, item));
				added = true;
			}

			if(item.type == 'form' && item.name != 'el-button' && item.name != 'fs-text' && item.name != 'fs-icon') {
				children.push(this.renderFsInput(h, item));
				added = true;
			}

			if(item.name == "el-button") {
				children.push(this.renderFsButton(h, item));
				added = true;
			}
			if(item.name == "fs-icon") {
				children.push(this.renderFsIcon(h, item));
				added = true;
			}
			// 其他为正常渲染组件
			if(added == false) {
				children.push(h(item.name, {
					attrs: {
						'component': item,
						'components':components,
						'po': this.po,
						'this-form': this.thisForm,
						'alias': item.alias,
						'parent-form': this.parentForm,
						'name': this.name,
						'query': this.query,
						'editable': this.editable,
						'debug': this.debug,
					},
					on: {
						command: this.onCommand,
						changed: this.onChanged,
						add: this.add,
						remove: this.remove,
					}
				}));
			}

			if(this.debug == true && (item.child == null || item.child.length == 0) && item.name != 'fs-text' && item.name != 'fs-video' && item.name != 'fs-pic' && item.name != 'el-col' && item.name != 'el-row' && item.name != 'fs-form' && item.name != 'fs-card') {
				children.push(h('div', {
					'class': {
						'kee-zhezhao': true
					}
				}));
			}

			if(this.debug == true && item.isKeeShowBorder == true) {
				children.push(h('fs-active', {
					'attrs': {
						component: item
					}
				}));
			}

			return children;

		},
		// 渲染组件
		renderComponents: function(createElement) {
			var children = [];

			 
			{
				var item = this.component;
				
				// 看看有没有权限				
				if(KeeUtils.isNotBlank(item.permission))
				{
					if(!hasPermission(item.permission)&&debug != true)
					{
						return children;
					}
				}	

				// 先创建一个 div 节点；
				var cls = {};
				cls["kee-comonent-div"] = (this.debug == true);
				cls['el-col'] = (item.name == 'el-col');
				cls['el-col-' + item.cp.span] = (item.name == 'el-col');
				cls['kee-relative-div'] = true;
				cls['kee-relative-margin'] = (item.isKeeShowBorder == true && item.name != 'fs-box');
				cls['kee-full-div'] = (this.parentLayout != null && item.name == 'fs-layout');

				if(item.style == null) {
					item.style = {};
				}
 
				if(item.name=='el-row'&&item.style!=null&&item.style.display=='inline-block')
				{ 
					// 强行设置display 属性
					item.style.display='block';
				}
				
				 
				
				children.push(createElement("div", {
					attrs: {
						cname: item.name,
						key: item.id,
						id: item.id,
						tid: item.id,
						show:'show:'+item.visiable,
						ttttid:"testdisplay", 
						boxid: item.name == 'fs-box' || item.name == 'fs-form' || item.name == 'fs-index-config'|| item.name == 'fs-form-config'||item.name == 'fs-cms-config'|| item.name == 'fs-table' || item.name == 'el-col' || item.name == 'el-row' || item.name == 'fs-card' ? item.id : '',
					},
					'class': cls,
					style: item.style,
					directives:[{
  						name: 'show',
  						value: (item.visiable != false || debug == true)
					}]

				}, this.renderComponentItem(createElement, item,this.component.child)));

			}

			return children;

		},

		onStopEvent: function() {

		},

		add: function(newItem) {
			//this.components.push(newItem);
			 
		},

		remove: function(item) {
			console.log("待删除的alias:"+item.alias);
			 
			//this.components.remove(item);

		},

		// 向上传递命令
		onCommand: function(cmdName, item, po, thisForm, parentForm) {
			console.log(" 收到command事件：" + cmdName);
			if(cmdName=='remove')
			{
			 
			//this.components.remove(thisForm);
			 
				
			}
			
			if(cmdName=='add')
			{
				//this.components.push(item);
			}
			else
			{
				this.$emit("command", cmdName, item, po, thisForm, parentForm);
			}
			
			
		},

		handleBlur: function(item) {

		},

		// 所有表单类的值改变，都走这里
		valueChange: function(item) {
			//  将值设置到 query 里面去 
			this.po[item.cp.modelName] = item.value;
			//setAttr(this.query, item.cp.modelName, item.value);
			// 看看有没有绑定关系,由page层统一处理
			this.sendEvent(this.name + ".change", item);

			// 触发组件的更新事件
			this.sendEvent(item.alias + ".change", item);

			this.$emit("change", item);

		},
		onChanged: function(ret) {
			this.$emit("changed", ret);
		}

	}
}));