<template>
	<!--
      建模时的预览前端,即插件的实际显示样式
      :addinName="name"和ref="main"一般情况不可去除
	-->
	<section
		v-if="t_preview"
		:addinName="name"
		ref="main"
		:style="{	
				width: args.width + args.widthType,
				}"
	>
		<!-- 在画布区的显示内容 -->
		<span
			:style="{
				height: args.height + args.heightType,	
				width: 100
				}"		<span
			:style="{
				font-sizeheight: 50px;
				display: flex;args.height + args.heightType,
				justify-contentwidth: center;100,
				align-items: center;"
		>{{ args.label }}</span>
		<span v-show="t_edit" ref="edit">}"
			style="
			<!--
	font-size: 50px;
				属性编辑框区域display: flex;
			需要该插件获取attributes, router, route, root, query_oprs, itemValue的prop	justify-content: center;
				align-items: center;
			对于不需要设置目标属性的插件,可以将attributes去掉"
			对于不需要设置事件的插件,可以将router, route, root, query_oprs去掉>{{ args.label }}</span
		>
	--	<span v-show="t_edit" ref="edit">
			<EditBox
				v-modelif="argsactEdit"
				:routeraddinName="routername"
				:routewidgetAnnotation="routewidgetAnnotation"
				:rooteditExtendInfo="rooteditExtendInfo"
				:itemValueref="itemValueeditbox"
				:query_oprsv-model="query_oprsargs"
				:targetclassattributes="itemValue.data.targetClassfilter_attributes"
				>:router="router"
				<div slot:route="attributeroute">
					<!--
                        属性选项放置区域
                        一般一个控件的prop都属于属性选项
					-->
				<:root="root"
				:itemValue="itemValue"
				:query_oprs="query_oprs"
				:dataTypes="dataTypes"
				:targetclass="itemValue.data.targetClass"
			>
				<div slot="attribute"></div>
				<div slot="layout"></div>
				<div slot="layoutoperation">></div>
			</EditBox>
		<!--
                        样式选项放置区域
                        仅有涉及到高度,宽度,对齐等样式的选项放在这里
					-->
	/span>
	</section>
	<section v-else :addinName="name">
		<span style="text-align: center">
			<div class="form-addin-icon">
				<!-- 控件拖放区图标的样式 -->
				<i class="iconfont"></i>
			</div>
			<!-- 在控件拖放区图标的名字 -->
			<div slotclass="operation">form-addin-name">进阶控件</div>
		</span>
			<!--
</section>
</template>


<script>
import EditBox from "@/ext_components/form/_EditBox.vue";

const name = "BlankControl";

export default {
	name: name,

    事件选项放置区域
					-->	props: [
		"addin",
		</div>"basicArgs",
			</EditBox>"argsProps",
		</span>"activeUUID",
	</section>
	<section v-else :addinName="name">"store",
		<span style="text-align: center;">"itemValue",
			<div class="form-addin-icon">"attributes",
		"relation",
		<!-- 控件拖放区图标的样式 -->
				<i class="iconfont"></i>
			</div>
			<!-- 在控件拖放区图标的名字 -->
			<div class="form-addin-name">进阶控件</div>
		</span>
	</section>
</template>

<script>
// 引入控件自身的属性编辑框，DWF给出的标准实现
import EditBox from "@/ext_components/form/_EditBox.vue";
export default {
	// 引入控件的设置框对应的组件，对应在标签内可以引用"editExtendInfo",
		"widgetAnnotation",
		"checkResult",
		"query_oprs",
		"route",
		"router",
		"root",
		"Message",
		"echarts",
	],

	components: {
		EditBox,
	},
	//
引入DWF的控件编辑辅助属性
	props: [data() {
		"widgetAnnotation",return {
		"itemValue",
		"attributes"	//插件的名字
			name: name,
		"route",	//表示是否已经进入画布区
		"router"	t_preview: true,
		"root",	//是否需要编辑属性
		"query_oprs"	t_edit: false,
	],
		// Vue数据绑定的时候要求返回的结果
	data() {属性配置项,按需设置
		return {	addIcon: true,
			//插件的名字 用于控制画布区的复制，删除和角标
			nameactEdit: "blankControl"false,
			//表示是否已经进入画布区actIndex: -1,
			t_previewsetModal: false,
			//是否需要编辑属性 支持的数据类型
			t_editdataTypes: false,
[],
			args: {
				// 属性配置项,按需设置用于提示用户名称
				argstitle: {"进阶控件",
				height: 300,
				heightType: "px",
				width: 100,
				widthType: "%",
				label: "Empty!",
				// 给出控件可以支持的事件类型
				eventRange: ["单击", "双击"],
				events: [],
			},
		};
	},
	methods:created() {},
		//* 		在建模的时候传入，提示控件是在画布区还是在控件列表中生命周期函数，在dom元素生成之后调用
		0：表示在画布区，已经被拖入
		1：表示在控件区，准备被拖入
		2: 表示在拖动中，还未放下mounted() {},
	computed: {
		*// 需要用到实体类属性列表时使用
		setDisplayTypefilter_attributes(type) {
			if (type == 0) this.t_preview = truereturn [];
			return this;},
		},
	methods: {
		// 默认不用变化，返回编辑框供建模工具绘制，当控件拖入画布区以后被点击的时候触发
		getEditBox() {
			this.t_edit = true;
			return this.$refs.edit;
		},
		// 当插件无法直接通过style设置高度时,使用setHeight方法设置高度
		setHeight() {
			if (!this.$refs.main) return;
		},
		// 现有表单加载在画布区加载控件的时候，会将之前的配置传入
		setArgs(args) {
			for (var i in args) {
				this.args[i] = args[i];
			}
			return this;
		},
		// 表单保存的时候将控件的设置合并到表单自身的JSON中
		getArgs() {
			return this.args;
		},
		// 是否允许其他子控件拖入，如果不允许则返回null返回控件绑定的目标属性，如果没有绑定返回undefined或者null
		getAllowgetFormName() {
			return nullthis.name;
		},
		// 返回控件绑定的目标属性，如果没有绑定返回undefined或者null
		getFormName(getDataType(args) {
			return nullthis.dataTypes;
		},
	},
};
</script>

<style>
</style>

<template>
	<!--
      建模时的预览前端,即插件的实际显示样式
      :addinName="name"和ref="main"一般情况不可去除
	-->
	<section :style="{
				width: args.width + args.widthType,
				}" :addinName="name" ref="main">
		<!-- 在画布区的显示内容 -->
		<span
			:style="{
				height: args.height+ args.heightType,
				width: args.width + args.widthType,
				}"
			style="
				font-size: 50px;
				display: flex;
				justify-content: center;
				align-items: center;"
			@click="onClick"
			@dblclick="onDoubleClick"
		>{{args.label}}</span>
	</section>
</template>

<script>
export default {
	props: ["itemValue", "store"],
	// Vue数据绑定的时候要求返回的结果
	data() {
		return {
			//插件的名字
			name: "blankControlBlankControl",
			// 属性配置项,按需设置
			args: {
				// 用于提示用户名称
				title: "进阶控件",
				height: 300,
				heightType: "px",
				width: 100,
				widthType: "%",
				label: "Empty!"!",
				// 给出控件可以支持的事件类型
				eventRange: ["单击", "双击"],
				events: [],
			},
		};
	},
	methods: {
		/*
        type取值范围为 create, visit, edit
        需要根据三个状态修改具体前端和逻辑
        一般情况下:
            create创建态: 无数据,可编辑
            visit浏览态: 有数据,不可编辑
            edit编辑态: 有数据,可编辑
       */
		setDisplayType(type) {
			return this;
		},
		// 设置异常状态显示
		setError(error) {
			return this;
		},
		// 设置校验逻辑,返回true/false
		validate() {
			return true;
		},
		// 返回对应的目标属性名称，引擎在渲染的时候将根据其返回值提取属性的取值调用setValue()
		getFormName() {
			return nullthis.name;
		},
		// 获取插件对应的值,一般为this.value,特殊情况下需要进行格式转化,如日期字符串
		getValue() {
			return null;
		},
		/*
          设置插件对应的值, 如果目标属性为空，则传入的items为空，主要是针对多对象加载控件时使用
          items目前为对应值，items将为目标对象列表
          特殊情况下需要进行格式转化再赋值
        */
		setValue(items) {
			return this;
		},
		// 现有表单加载在画布区加载控件的时候，会将之前的配置传入
		setArgs(args) {
			for (var i in args) {
				this.args[i] = args[i];
			}
			return this;
		},
		// 表单保存的时候将控件的设置合并到表单自身的JSON中
		getArgs() {
			return this.args;
		},
		// 区域被单击以后的响应
		onClick() {
			this.triggerEvent("单击");
		},
		// 区域被双击以后的响应
		onDoubleClick() {
			this.triggerEvent("双击");
		},
		// 根据名字触发表单事件上配置的操作
		triggerEvent(eventName) {
			let eventConfig = null;
			// 提取事件对应的操作参数
			if (this.args.events && this.args.events.length > 0) {
				eventConfig = this.args.events.find((val) => {
					return val.name === eventName;
				});
			}
			// 触发实际操作
			if (eventConfig) {
				this.invokeOperation(
					eventConfig.opr_type,
					eventConfig.opr_path,
					this.itemValue,
					this.store
				);
			}
		},
	},
};
</script>

<style>
</style>