<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,
			}"
			style="
				font-size: 50px;
				display: flex;
				justify-content: center;
				align-items: center;
			"
			>{{ args.label }}</span
		>
		<span v-show="t_edit" ref="edit">
			<EditBox
				v-if="actEdit"
				:addinName="name"
				:widgetAnnotation="widgetAnnotation"
				:editExtendInfo="editExtendInfo"
				ref="editbox"
				v-model="args"
				:attributes="filter_attributes"
				:router="router"
				:route="route"
				:root="root"
				:itemValue="itemValue"
				:query_oprs="query_oprs"
				:dataTypes="dataTypes"
				:targetclass="itemValue.data.targetClass"
			>
				<div slot="attribute"></div>
				<div slot="layout"></div>
				<div slot="operation"></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 class="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",
		"basicArgs",
		"argsProps",
		"activeUUID",
		"store",
		"itemValue",
		"attributes",
		"relation",
		"editExtendInfo",
		"widgetAnnotation",
		"checkResult",
		"query_oprs",
		"route",
		"router",
		"root",
		"Message",
		"echarts",
	],

	components: {
		EditBox,
	},

	data() {
		return {
			//插件的名字
			name: name,
			//表示是否已经进入画布区
			t_preview: true,
			//是否需要编辑属性
			t_edit: false,
			// 属性配置项,按需设置
			addIcon: true,
			// 用于控制画布区的复制，删除和角标
			actEdit: false,
			actIndex: -1,
			setModal: false,
			// 支持的数据类型
			dataTypes: [],
			args: {
				// 用于提示用户名称
				title: "进阶控件",
				height: 300,
				heightType: "px",
				width: 100,
				widthType: "%",
				label: "Empty!",
				// 给出控件可以支持的事件类型
				eventRange: ["单击", "双击"],
				events: [],
			},
		};
	},
	created() {},
	// 生命周期函数，在dom元素生成之后调用
	mounted() {},
	computed: {
		// 需要用到实体类属性列表时使用
		filter_attributes() {
			return [];
		},
	},
	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;
		},
		// 返回控件绑定的目标属性，如果没有绑定返回undefined或者null
		getFormName() {
			return this.name;
		},
		getDataType(args) {
			return this.dataTypes;
		},
	},
};
</script>

<style>
</style>