<template>
	<div id="attrModelEditorContainer"
			 class="container panel panel-ulli">
		<div class="container-header"
				 style="height: 90px;">
			<div>
				<a-col :span="2"
							 class="shiti-img">
					<div v-if="entIcon">
						<img :src="entIcon"
								 alt="" />
					</div>
					<div v-else><img :src="blankPicture"
								 alt="" /></div>
					<!-- ../../../assets/kong-01.png -->
				</a-col>
			</div>
			<div class="panel-header shiti_panel-header"
					 style="padding-top: 0px;display: flex;    top: 10px;position: relative;">
				<a-icon type="dropbox" />
				<div style="margin-right:40px;"
						 :style="{ 'color': !entity ? '#f5222d' : ''}">
					{{ entity ? entity : '无名称' }}
					<h5 style="color: #8c8c8c;">
						<!-- <ellipsis :length="50"
											tooltip>
							{{ entMemo }}
						</ellipsis> -->
					</h5>
				</div>
				<a-icon type="slack" />
				<div style="">
					{{ entityClass }}
				</div>

				<a-button @click="edit"
									style="margin-right: 10px;margin-left: 10px">基础信息更新</a-button>
				<a-button v-if="false"
									style="float: right;margin-right: 10px">运行</a-button>
				<!--                <a-button v-if="!isModel" @click="goSta" style="float: right;margin-right: 10px">可视化统计</a-button>-->
			</div>
		</div>
		<!-- <a-divider /> -->
		<a-row :gutter="10"
					 style="    display: flex;height: calc(100% - 90px);">
			<!-- 左侧菜单 -->
			<a-col :span="4"
						 class="left-menu"
						 style="height:100%;background:#f5f7fa;padding:0px">
				<div @click="tabsChange('ELEM')"
						 class="left-menu-item"
						 :class="{ active: activePanel === 'ELEM' }">
					基本属性
				</div>
				<div @click="tabsChange('OTHER')"
						 class="left-menu-item"
						 :class="{ active: activePanel === 'OTHER' }">
					其他属性
				</div>
				<a-collapse v-model="activeColl"
										:expandIconPosition="'right'"
										class="left-menu-coll"
										ref="collapse"
										style="height: calc(100% - 90px);">
					<a-collapse-panel key="relation"
														header="关联关系"
														:style="{ border: 'none' }">
						<a-collapse v-model="activerelclsColl"
												:expandIconPosition="'right'"
												class="left-menu-coll"
												ref="collapse">
							<a-collapse-panel v-for="item in relclsLists"
																:key="item.name"
																:header="item.name"
																:style="{ border: 'none' }">
								<div class="menu-panel">
									<p v-for="tab in item.children"
										 :key="tab.relClsId"
										 class="left-menu-item"
										 :class="{ active: activePanel === tab.relClsId }"
										 @click="tabsChange(tab.relClsId)">
										<a-icon v-if="tab.direction === 'START'"
														type="left-square" />
										<a-icon v-if="tab.direction !== 'START'"
														type="right-square" />
										<!-- <ellipsis :length="50"
															tooltip>
											{{ tab.otherVName }}
											<span slot="tooltipTitle"
														v-if="tab.direction === 'START'">
												{{ entityClass }}->{{ tab.relClsName }}->{{
                          tab.otherVName
                        }}
											</span>
											<span slot="tooltipTitle"
														v-else>
												{{ tab.otherVName }}->{{ tab.relClsName }}->{{
                          entityClass
                        }}
											</span>
										</ellipsis> -->
									</p>
								</div>
							</a-collapse-panel>
						</a-collapse>
						<div class="menu-panel">
							<p v-for="tab in relclsList"
								 :key="tab.relClsId"
								 class="left-menu-item"
								 :class="{ active: activePanel === tab.relClsId }"
								 @click="tabsChange(tab.relClsId)">
								<a-icon v-if="tab.direction === 'START'"
												type="left-square" />
								<a-icon v-if="tab.direction !== 'START'"
												type="right-square" />
								<!-- <ellipsis :length="50"
													tooltip>
									{{ tab.relClsName }}
									<span slot="tooltipTitle"
												v-if="tab.direction === 'START'">
										{{ entityClass }}->{{ tab.relClsName }}->{{
                      tab.otherVName
                    }}
									</span>
									<span slot="tooltipTitle"
												v-else>
										{{ tab.otherVName }}->{{ tab.relClsName }}->{{
                      entityClass
                    }}
									</span>
								</ellipsis> -->
							</p>
						</div>
					</a-collapse-panel>

					<a-collapse-panel v-if="ATTRCLS_GROUP_TAB"
														key="attrcls"
														header="复合属性"
														:style="{ border: 'none' }">
						<div class="menu-panel">
							<p v-for="tab in attrcls"
								 :key="tab.relClsId"
								 class="left-menu-item"
								 :class="{ active: activePanel === tab.relClsId }"
								 @click="tabsChange(tab.relClsId)">
								<a-icon v-if="tab.direction === 'START'"
												type="left-square" />
								<a-icon v-if="tab.direction !== 'START'"
												type="right-square" />
								<!-- <ellipsis :length="50"
													tooltip>
									{{ tab.relClsName }}
									<span slot="tooltipTitle"
												v-if="tab.direction === 'START'">
										{{ entityClass }}->{{ tab.relClsName }}->{{
                      tab.otherVName
                    }}
									</span>
									<span slot="tooltipTitle"
												v-else>
										{{ tab.otherVName }}->{{ tab.relClsName }}->{{
                      entityClass
                    }}
									</span>
								</ellipsis> -->
							</p>
						</div>
					</a-collapse-panel>
				</a-collapse>
			</a-col>
			<!-- 中间内容 -->
			<a-col :span="10"
						 class="center-box">
				<div v-if="activePanel === 'ELEM'"
						 style="height: 100%; overflow-y: auto;">
					<!-- 基础属性 -->
					<div class="card-content">
						<h3 style="font-weight: 400;color: #1f2f3d;    margin: 0px 0 20px;">
							<a-icon type="info-circle"
											class="warnIcons"
											theme="filled" />
							基础属性
						</h3>
						<div class="card_elem">
							<a-row v-for="item in ELEMAttr"
										 :key="item.attrClsId" :gutter="16">
								<a-col :span="8">
									<span v-if="item.notNull"
												style="color: #f5222d">*</span>
									{{ item.attrClsName }}：
								</a-col>
								<a-col :span="16">
									<attr-edit-input :record="item"
																	 ref="editorRef"
																	 :pValue="item.attrValue"
																	 @change="handleChange"></attr-edit-input>
								</a-col>
							</a-row>
						</div>
					</div>
					<!-- 能力属性 -->
					<div class="card-content">
						<h3 style="font-weight: 400;color: #1f2f3d;margin: 0 0 20px;">
							<a-icon type="info-circle"
											class="warnIcons"
											theme="filled" />
							能力属性
						</h3>
						<div class="card_elem">
							<a-row v-if="version=='bf'" v-for="item in CIDXAttr"
										 :key="item.attrClsId" :gutter="16">
								<a-col :span="8">
									<span v-if="item.notNull"
												style="color: #f5222d">*</span>
									{{ item.attrClsName }}：
								</a-col>
								<a-col :span="12">
									<attr-edit-input :record="item" ref="editorRef" :pValue="item.attrValue" @change="handleChange"></attr-edit-input>
								</a-col>
								<a-col :span="4">
									<a-button @click="handlerRunFlow(item)">运行</a-button>
								</a-col>
							</a-row>
							<a-row v-else v-for="item in CIDXAttr"
										 :key="item.attrClsId" :gutter="16">
								<a-col :span="8">
									<span v-if="item.notNull"
												style="color: #f5222d">*</span>
									{{ item.attrClsName }}：
								</a-col>
								<a-col :span="16">
									<attr-edit-input :record="item" ref="editorRef" :pValue="item.attrValue" @change="handleChange"></attr-edit-input>
								</a-col>
							</a-row>
						</div>
					</div>
					<!-- 多媒体属性 -->
					<div class="card-content"
							 style="margin-bottom: 40px">
						<h3 style="font-weight: 400;color: #1f2f3d;margin: 0 0 20px;">
							<a-icon type="info-circle"
											class="warnIcons"
											theme="filled" />
							多媒体属性
						</h3>
						<div class="card_elem">
							<a-row v-for="mime in MIMEAttr"
										 :key="mime.attrClsId">
								<a-col :span="10"> {{ mime.attrClsName }}： </a-col>
								<a-col :span="14">
									<p v-if="mime.attrID">
										<a :href="
                        `${baseUrl}/attr/media/download/${mime.attrID}`
                      ">{{ mime.attrValue }}</a>
									</p>
									<p>
										<a-button size="small"
															type="primary"
															style="margin-right:5px"
															@click="uploadFile(mime)">上传</a-button>
										<a-button v-if="mime.attrID"
															@click="downloadFile(mime)"
															size="small">下载</a-button>
									</p>
								</a-col>
							</a-row>
						</div>
					</div>
					<div style="position: absolute; bottom: 10px;right: 10px">
						<a-button @click="goBak"
											style="float: right">完成</a-button>
						<a-button type="primary"
											@click="saveElem"
											style="float: right;margin-right: 10px;">下一步</a-button>
						<a-button @click="goBakNoSubmit"
											style="float: right;margin-right: 10px;">取消</a-button>
					</div>
				</div>
				<div v-if="activePanel === 'OTHER'"
						 style="padding: 15px 20px 0 20px">
					<h3>
						<a-icon type="info-circle"
										class="warnIcons"
										theme="filled" />
						待审属性
					</h3>
					<div class="card_elem">
						<none-attr-editor :entId="entId"
															:clsId="clsId"
															:tType="'NONE'"
															:isModel="isModel"></none-attr-editor>
					</div>
					<h3>
						<a-icon type="info-circle"
										class="warnIcons"
										theme="filled" />
						标签属性
					</h3>
					<div class="card_elem">
						<tag-attr-editor :entId="entId"
														 :isModel="isModel"></tag-attr-editor>
					</div>
					<a-button @click="goBak"
										style="float: right">完成</a-button>
					<a-button type="primary"
										@click="next"
										style="float: right;margin-right: 10px;">下一步</a-button>
					<a-button type="primary"
										@click="prev"
										style="float: right;margin-right: 10px;">上一步</a-button>
				</div>
				<div v-for="(tab, $index) in rlsList"
						 :key="tab.relClsId">
					<div v-if="activePanel === tab.relClsId"
							 style="padding: 15px 20px 0 20px;">
						<attr-table ref="attrTableRef"
												:entId="entId"
												:clsId="clsId"
												:otherVID="tab.otherVID"
												:relClsId="tab.relClsId"
												:direction="tab.direction"
												:isModel="isModel"></attr-table>
						<a-button type="primary"
											@click="goBak"
											style="float: right">完成</a-button>
						<a-button v-if="$index < rlsList.length - 1"
											type="primary"
											@click="next"
											style="float: right;margin-right: 10px;">下一步
						</a-button>
						<a-button type="primary"
											@click="prev"
											style="float: right;margin-right: 10px;">上一步</a-button>
					</div>
				</div>
			</a-col>
			<!-- 右侧可视化图谱 -->
			<a-col :span="10"
						 style="text-align: right;">
				<a-button @click="openRightMenu"
									style="margin-right: 5px;">筛选</a-button>
				<a-button v-if="isModel === false || isModel === 'false'"
									@click="goSta">可视化统计</a-button>
				<chart-comp ref="chart"
										style="max-height: 730px;"
										@c_click="getInfoTooltip"
										:isShowChart="true"
										:enable="true"
										:nodes="nodes"
										:links="links"
										:isDivisionColor="version=='bf'"
										@reloadChart="reloadChart"></chart-comp>
			</a-col>
		</a-row>
		<entity-details-tooltip class="chart_tooltip"
														ref="entityRef"
														:id="tooltip.entID"
														:key="tooltip.entID"
														v-if="tooltip.entID"
														:throwClickDetail="true"
														@clickDetail="onClickDetail"
														style="position: absolute;z-index: 1;border-radius: 3px"
														:style="{'left': tooltip.x, 'top': tooltip.y}"></entity-details-tooltip>
		<link-details-tooltip class="chart_tooltip"
													:id="tooltip.relID"
													:key="tooltip.relID"
													v-if="tooltip.relID"
													style="position: absolute;z-index: 1;border-radius: 3px"
													:style="{'left': tooltip.x, 'top': tooltip.y}">
		</link-details-tooltip>
	</div>
</template>

<script>
	import entityDetailsTooltip from '@/views/knowledge/common/entityDetails'
	import linkDetailsTooltip from '@/views/knowledge/common/linkDetails'
	import attrTable from "@/views/knowledge/graphEntity/relationClsAttrEditor";
	import tagAttrEditor from "@/views/knowledge/common/tagEditor";
	import noneAttrEditor from "@/views/knowledge/graphEntity/attrEditor";
	// import Ellipsis from "@/components/Ellipsis";
	import attrEditInput from "@/views/knowledge/common/attrEditInput";
	import chartComp from "@/views/knowledge/common/chart";
	
	import { getEntityListByEntityId } from '@/api/graph/statisticalMap'
	import { getRelationClsByEntCls, getEntityDetailById, saveEntAttr, getRelationEnt, getChart } from '@/api/graph/entity'
	import { getEntityAttrById, runFlow } from '@/api/graph/entityAttrEditor'

	const version = 'base' // 版本控制
	const directionsList = [
		{ label: "出度", value: "OUT", checked: true },
		{ label: "入度", value: "IN", checked: true },
	];
	import eventBus from "@/plugins/knowledge/eventBus";
	export default {
		name: "attrModelEditor",
		components: {
			attrTable,
			tagAttrEditor,
			noneAttrEditor,
			attrEditInput,
			chartComp,
			entityDetailsTooltip,
			linkDetailsTooltip
		},
		events: {
		},
		data () {
			return {
				version: version,
				//  权限控制
				ATTRCLS_GROUP_TAB: false,
				baseUrl: window.global.baseUrl(),
				entity: "",
				entityClass: "",
				clsId: "",
				entId: "",
				entIcon: "",
				entMemo: "",
				isModel: false, // 是否是模板，默认为实体
				rlsList: [],
				attrcls: [], // 复合属性列表
				relclsList: [], // 含有多个关系类的关系列表
				activerelclsColl: "",
				relclsLists: [], // 含有单个关系类的关系列表
				ELEMAttr: [],
				CIDXAttr: [],
				MIMEAttr: [],
				tabs: ["ELEM", "OTHER"],
				tabCount: 0,
				activePanel: "ELEM",
				activeColl: "",
				searchLeftMenu: "",
				//  以下是画可视化图需要的变量
				nodes: [],
				links: [],
				entityClassList: [],
				linkClassList: [],
				degreeCache: 1,
				entityClassCache: undefined,
				linkClassCache: undefined,
				directionCache: undefined,
				directionsList,
				tooltip: { entID: false, relID: false },// 点击的实体或关系的悬浮层

                entName: '',
                ruleList: {},
				blankPicture: require('@/assets/knowledge/kong-01.png')
			};
		},
		computed: {
			leftMenuList: function () {
				return this.rlsList.filter((item) => {
					return item.relClsName.indexOf(this.searchLeftMenu) > -1;
				});
			},
		},
		mounted () {

			this.clsId = this.$route.params.classId;
			this.entId = this.$route.params.entityId;
			this.isModel = this.$route.query.isModel;
			this.getRelList(); // 获取关系类列表（复合属性）
			this.getEntityInfo(); // 获取实体信息
			this.getELEMAttr(); // 获取基础属性
			this.getCIDXAttr(); // 获取能力属性
			this.getMIMEAttr(); // 获取多媒体属性
			this.$nextTick(() => {
				this.drawChart();
			});
			const vm = this
			eventBus.eventBus.$on('graph:exportData', function () {
				vm.$refs.chart.exportChartData()
			})
		},
		destroyed () {
			eventBus.eventBus.$off('graph:exportData')
		},
		methods: {
			/**
			 * 根据ID获取实力列表和关系列表
			 * @params id: 实体ID _string，
			 * @params degree： 度数（跳） _string，
			 *     entityClassList： 实体类ID列表 _string，linkClassList：关系类ID列表 _string
			 * */
			getEntityList (id, degree, entityClassList, linkClassList, direction) {
				// 根据搜索记录获取实力列表，以及实体类、关系类列表
				return getEntityListByEntityId(
					id,
					degree,
					entityClassList,
					linkClassList,
					direction
				);
			},
			getRelList () {
				const vm = this;
				const relclsCache = {};
				getRelationClsByEntCls(this.clsId).then((res) => {
					res.data.forEach((item) => {
						if (vm.ATTRCLS_GROUP_TAB) {
							// 如果有权限控制
							if (item.relClsName.slice(item.relClsName.length - 2) !== "关系" && item.relClsName.slice(item.relClsName.length - 2) !== "GX") {
								//从关系类中拆分复合属性
								// 这个是复合属性
								this.attrcls.push(item);
							} else {
								// 这些是关系类
								if (typeof relclsCache[item.relClsName] === "undefined") {
									relclsCache[item.relClsName] = [];
								}
								relclsCache[item.relClsName].push(item);
							}
						} else {
							// 如果没有权限控制或者没有权限（默认的就是没有权限，因为咱们自己用不上这个复合属性）
							if (typeof relclsCache[item.relClsName] === "undefined") {
								relclsCache[item.relClsName] = [];
							}
							relclsCache[item.relClsName].push(item);
						}
					});
					for (const key in relclsCache) {
						// 拆分关系类里的中只有一个关系类和有多个关系类的情况
						const value = relclsCache[key];
						if (value.length > 1) {
							this.relclsLists.push({
								name: key,
								children: value,
							});
						} else {
							this.relclsList.push(value[0]);
						}
					}

					this.relclsLists.forEach((item) => {
						item.children.forEach((_item) => {
							vm.tabs.push(_item.relClsId);
							vm.rlsList.push(_item);
						});
					});
					this.relclsList.forEach((item) => {
						vm.tabs.push(item.relClsId);
					});
					this.attrcls.forEach((item) => {
						vm.tabs.push(item.relClsId);
					});
					vm.rlsList = this.rlsList.concat(this.relclsList.concat(this.attrcls));
				});
			},
			edit () {
				this.$open(
					"addEntityModal",
					{
						title: this.isModel ? "编辑模板" : "编辑实体",
						isLink: true, // 添加路由后改变路由
						isModel: this.isModel,
						entityName: this.entity, // 实体名字
						entityMemo: this.entMemo,
						entClsIcon: this.entIcon,
						entityId: this.entId, // 实体id
					},
					function (data) {
						if (data) {
							this.getEntityInfo();
						}
					}
				);
			},
			// 悬浮框内点击详情
			onClickDetail (info) {
				const baseUrl = this.$getBaseUrl()
				if (info) window.open(baseUrl + '/model/quota/entity_model/' + info.entID + '?page=1&clsName=' + info.entClsName + '&isModel=false')
			},
			/**
			 * 获取实体或关系的悬浮框
			 * @params event:zoomchart返回的event，args：zoomchart返回的变量，包含了当前点击的实体或关系的数据
			 * */
			getInfoTooltip (event, args) {
				const vm = this
				this.$set(this.tooltip, 'x', event.pageX + 'px')
				this.$set(this.tooltip, 'y', event.pageY + 'px')
				if (args.clickNode) {
					vm.tooltip.entID = args.clickNode.data.entID
					vm.tooltip.relID = false
				} else if (args.clickLink) {
					vm.tooltip.entID = false
					vm.tooltip.relID = args.clickLink.data.relID
				} else {
					vm.tooltip.entID = false
					vm.tooltip.relID = false
				}
			},
			goSta () {
				window.location.href = `#/sta?entId=${this.entId}&entName=${this.entity}`;
			},
			async goBak () {
				let saveStatus = true;
				if (this.activePanel === "ELEM") {
					saveStatus = await this.saveElem(true);
				}
				if (saveStatus) {
					this.goBakNoSubmit();
				}
			},
			goBakNoSubmit () {
				this.$router.push({
					name: "class_entity_v2",
					params: { classId: this.clsId },
					query: {
						...this.$route.query,
						clsName: this.entityClass,
					},
				});
			},
			getEntityInfo () {
				const vm = this;
				getEntityDetailById(this.entId, this.isModel).then((res) => {
					vm.entity = res.data.entName;
					vm.entityClass = res.data.entClsName;
					vm.entMemo = res.data.entMemo;
					vm.entIcon = res.data.entIcon || res.data.entClsIcon;
				});
			},
			// 获取基础和高级的属性
			getELEMAttr () {
				getEntityAttrById(this.entId, { attrType: "ELEM" }, this.isModel)
					.then((res) => {
						res.data.forEach((item) => {
							const rule = item.domain;
							if (rule) {
								const jsonRule = JSON.parse(rule);
								item.required =
									jsonRule.domainKey !== null ||
									(jsonRule.minValue !== null && jsonRule.maxValue !== null);
							} else {
								item.required = false;
							}
						});
						this.ELEMAttr = res.data;
					});
			},
			// 获取基础和高级的属性
			getCIDXAttr () {
				getEntityAttrById(this.entId, { attrType: "CIDX" }, this.isModel)
					.then((res) => {
						this.CIDXAttr = res.data;
					});
			},
			getMIMEAttr () {
				getEntityAttrById(this.entId, { attrType: "MIME" }, this.isModel)
					.then((res) => {
						this.MIMEAttr = res.data;
					});
			},
			// 属性中切换下一项
			next () {
				this.tabCount++;
				this.activePanel = this.tabs[this.tabCount];
				const count = this.tabCount;
				const varLength = 2; // 基础属性+能力属性的长度
				const relclsLength2 = this.relclsList.length; // 单个关系类的长度
				const attrclsLength = this.attrcls.length; // 复合属性的长度
				let relclsLength = 0; // 多个关系类的长度
				this.relclsLists.forEach((item) => {
					relclsLength += item.children.length;
				});
				// 如果当前在关系类中
				if (
					count >= varLength &&
					this.tabCount <= relclsLength + relclsLength2 + varLength
				) {
					this.activeColl = "relation";
					// 当前在多个关系类中
					if (count >= varLength && count < relclsLength + varLength) {
						let childLength = 0;
						let relclsIndex = 0;
						this.relclsLists.forEach((relcls, index) => { });
						for (let i = 0; i < this.relclsLists.length; i++) {
							const relcls = this.relclsLists[i];
							childLength += relcls.children.length;
							if (count > childLength + varLength - 1) {
								relclsIndex = i + 1;
								break;
							}
						}
						this.activerelclsColl = this.relclsLists[relclsIndex].name;
					} else if (count >= relclsLength + varLength) {
						// 当前在单个关系类中
						this.activerelclsColl = "";
					}
				} else if (count >= relclsLength + relclsLength2 + varLength) {
					// 当前在复合属性中
					this.activeColl = "attrcls";
				}
			},
			// 属性中切换上一项
			prev () {
				this.tabCount--;
				this.activePanel = this.tabs[this.tabCount];
				const count = this.tabCount;
				const varLength = 2; // 基础属性+能力属性的长度
				const relclsLength2 = this.relclsList.length; // 单个关系类的长度
				const attrclsLength = this.attrcls.length; // 复合属性的长度
				let relclsLength = 0; // 多个关系类的长度
				this.relclsLists.forEach((item) => {
					relclsLength += item.children.length;
				});
				if (count < varLength) {
					this.activeColl = "";
				} else if (
					count >= varLength &&
					count < relclsLength + varLength + relclsLength2
				) {
					this.activeColl = "relation";
					// 当前在多个关系类中
					if (count >= varLength && count < relclsLength + varLength) {
						let childLength = 0;
						let relclsIndex = 0;
						this.relclsLists.forEach((relcls, index) => { });
						for (let i = 0; i < this.relclsLists.length; i++) {
							const relcls = this.relclsLists[i];
							childLength += relcls.children.length;
							if (count > childLength + varLength - 1) {
								relclsIndex = i + 1;
								break;
							}
						}
						this.activerelclsColl = this.relclsLists[relclsIndex].name;
					} else if (count >= relclsLength + varLength) {
						// 当前在单个关系类中
						this.activerelclsColl = "";
					}
				} else if (count >= relclsLength + relclsLength2 + varLength) {
					// 当前在复合属性中
					this.activeColl = "attrcls";
				}
			},
			// tab标签切换时的回调
			tabsChange (key) {
				this.tabCount = this.tabs.indexOf(key);
				this.activePanel = key;
				if (key === "ELEM") {
					this.getELEMAttr();
					this.getCIDXAttr();
				} else if (key === "OTHER") {
				} else {
					if (
						this.$refs.attrTableRef &&
						this.$refs.attrTableRef[this.tabs.indexOf(key) - 2]
					) {
						this.$refs.attrTableRef[this.tabs.indexOf(key) - 2].getAttr();
					}
				}
			},
			uploadFile (mime) {
				this.$open(
					"uploadMIMEFileModal",
					{
						entId: this.entId,
						attrClsId: mime.attrClsId,
					},
					function (data) {
						if (data) {
							this.getMIMEAttr();
						}
					}
				);
			},
			downloadFile (mime) {
				window.location = `${window.global.baseUrl()}/attr/media/download/${mime.attrID
					}`;
			},
			// 保存能力属性/基础属性
			async saveElem (back) {
				let check = true;
				const editorRefs = this.$refs.editorRef;
				if (editorRefs) {
					editorRefs.forEach((ref) => {
						const checkResult = ref.check();
						if (!checkResult) {
							check = checkResult;
						}
					});
				}
				if (!check) {
					return false;
				}
				let count = 0;
				// const content = {
				// 	entId: this.entId,
				// 	isModel: this.isModel,
				// };
				// this.CIDXAttr.forEach((item) => {
				// 	if (item.attrValue_z) {
				// 		content["list[" + count + "].attrClsId"] = item.attrClsId;
				// 		content["list[" + count + "].attrId"] = item.attrID;
				// 		content["list[" + count + "].attrValue"] = item.attrValue_z;
				// 		content["list[" + count + "].entAndAttrType"] = "CIDX";
				// 		count++;
				// 	}
				// });
				// this.ELEMAttr.forEach((item) => {
				// 	if (item.attrValue_z) {
				// 		content["list[" + count + "].attrClsId"] = item.attrClsId;
				// 		content["list[" + count + "].attrId"] = item.attrID;
				// 		content["list[" + count + "].attrValue"] = item.attrValue_z;
				// 		content["list[" + count + "].entAndAttrType"] = "ELEM";
				// 		count++;
				// 	}
				// });
				let attrs = [];
				this.CIDXAttr.forEach((item) => {
					if (item.attrValue_z) {
						let attr = {
							attrID: item.attrID,
							attrValue: item.attrValue_z,
							entId: this.entId,
							attrClsId: item.attrClsId,
							entAndAttrType: "CIDX"
						}
						attrs.push(attr)
					}
				});
				this.ELEMAttr.forEach((item) => {
					if (item.attrValue_z) {
						let attr = {
							attrID: item.attrID,
							attrValue: item.attrValue_z,
							entId: this.entId,
							attrClsId: item.attrClsId,
							entAndAttrType: "ELEM"
						}
						attrs.push(attr)
					}
				});
				if (attrs.length > 0) {
					return saveEntAttr(attrs).then((res) => {
						if (res) {
							this.$notification["success"]({
								message: "属性保存成功",
							});
							if (back === true) {
								return true;
							}
							this.next();
						}
					});
				} else {
					if (back === true) {
						return true;
					}
					this.next();
				}
			},
			// 表单输入框改变的方法
			handleChange (item, value) {
				item.attrValue_z = value;
			},
			reloadChart (nodes, links) {
				this.$refs.chart.drawChart(this.entId, nodes, links);
			},
			drawChart () {
				if (this.isModel === "false" || this.isModel === false) {
					this.getEntityList(this.entId, 1).then((resp) => {
						this.$refs.chart.drawChart(
							this.entId,
							resp.data.entListVO,
							resp.data.relListVO
						);
						this.nodes = data.entListVO;
						this.links = data.relListVO;
						this.entityClassList = resp.data.entClsListVO;
						this.linkClassList = resp.data.relClsListVO;
					});
				} else {
					this.showChart = true;
					getRelationEnt(this.entId, 1, "", "BOTH", true).then((res) => {
						this.$refs.chart.drawChart(this.entId, res.entListVO, res.relListVO);
					});
				}
			},
			/**
			 * 调用右侧菜单，传入实体类列表_entityClassList、关系类列表_relationClassList
			 * */
			// openRightMenu () {
			// 	if (this.entityClassCache !== undefined) {
			// 		this.entityClassList.forEach((v) => {
			// 			if (this.entityClassCache.indexOf(v.entClsID) > -1) {
			// 				v.checked = true;
			// 			} else {
			// 				v.checked = false;
			// 			}
			// 		});
			// 	}
			// 	if (this.linkClassCache !== undefined) {
			// 		this.linkClassList.forEach((v) => {
			// 			if (this.linkClassCache.indexOf(v.relClsID) > -1) {
			// 				v.checked = true;
			// 			} else {
			// 				v.checked = false;
			// 			}
			// 		});
			// 	}
			// 	if (this.directionCache !== undefined) {
			// 		this.directionsList.forEach((v) => {
			// 			if (this.directionCache.indexOf(v.value) > -1) {
			// 				v.checked = true;
			// 			} else {
			// 				v.checked = false;
			// 			}
			// 		});
			// 	}
			// 	this.$open(
			// 		"rightMenuDrawer",
			// 		{
			// 			entityClassList: this.entityClassList,
			// 			linkClassList: this.linkClassList,
			// 			degreeCache: this.degreeCache,
			// 			directionList: this.directionsList,
			// 		},
			// 		function (response) {
			// 			if (response !== false) {
			// 				let _data = response.data ? response.data : {};
			// 				this.entityClassCache = _data.entityIds;
			// 				this.linkClassCache = _data.linkIds;
			// 				this.degreeCache = _data.degree;
			// 				this.directionCache = _data.direction;
			// 				this.getEntityList(
			// 					this.entId,
			// 					_data.degree,
			// 					_data.entityIds,
			// 					_data.linkIds,
			// 					_data.direction
			// 				).then((__data) => {
			// 					this.entityClassList = __data.entClsListVO;
			// 					this.linkClassList = __data.relClsListVO;
			// 					this.nodes = __data.entListVO;
			// 					this.links = __data.relListVO;
			// 					this.directionsList.forEach((v) => {
			// 						v.checked = true;
			// 					});
			// 					this.$refs.chart.reDraw(
			// 						this.entId,
			// 						__data.entListVO,
			// 						__data.relListVO
			// 					);
			// 				});
			// 			}
			// 		}
			// 	);
			// },


            openRightMenu() {
                if (this.entityClassCache !== undefined) {
                    this.entityClassList.forEach((v) => {
                        if (this.entityClassCache.indexOf(v.entClsID) > -1) {
                            v.checked = true
                        } else {
                            v.checked = false
                        }
                    })
                }
                if (this.linkClassCache !== undefined) {
                    this.linkClassList.forEach((v) => {
                        if (this.linkClassCache.indexOf(v.relClsID) > -1) {
                            v.checked = true
                        } else {
                            v.checked = false
                        }
                    })
                }
                if (this.directionCache !== undefined) {
                    this.directionsList.forEach((v) => {
                        if (this.directionCache.indexOf(v.value) > -1) {
                            v.checked = true
                        } else {
                            v.checked = false
                        }
                    })
                }
            
                this.$open(
                    'rightMenuDrawer',
                    {
                        entityClassList: this.entityClassList,
                        linkClassList: this.linkClassList,
                        degreeCache: this.degreeCache,
                        directionList: this.directionsList,
                        ruleList: this.ruleList,
                        delEntityList: this.delEntIds
                    },
                    function(response) {
                        if (response !== false) {
                            this.spinning = true
                            let _data = response.data ? response.data : {}
                            this.entityClassCache = _data.entityIds  //参数
                            this.linkClassCache = _data.linkIds  //参数
                            this.degreeCache = _data.degree      //参数
                            this.directionCache = _data.direction//方向参数
                            this.ruleList = _data.ruleList       //高级筛选
                            let entConditionQueries = []         //高级筛选-参数
                            let delEntIds = _data.delEntityIds   //被删除的id-参数

                            this.delEntIds = _data.delEntList
                            //高级筛选参数拼接
                            if(!!this.ruleList && JSON.stringify(this.ruleList)!='{}'){
                                for(let k in this.ruleList){
                                    let item={}
                                    item.entClsID = k;
                                    // item.entName = decodeURI(getQueryVariable('entName'));
                                    let arr = this.ruleList[k]
                                    let attrFilters = []
                                    arr.forEach((v,i) => {
                                        let innerItem = {
                                            attrClsId: v.attrClsId,
                                            attrValue: v.attrValue,
                                            conditionType: v.conditionType,
                                            operatorType: v.operatorType,
                                            valueType: v.valueType
                                        }
                                        attrFilters.push(innerItem)
                                    })
                                    item['attrFilters']=attrFilters
                                    entConditionQueries.push(item)
                                }
                            }else{
                                if(!this.entityClassCache){
                                    entConditionQueries=[]
                                }else{
                                    this.entityClassCache.split(',').forEach(item => {
                                        let innerItem = {
                                            entClsID: item,
                                            attrFilters: []
                                        }
                                        entConditionQueries.push(innerItem)
                                    })
                                }
                            }

                            //方向参数拼接，如果为 in，out，则为both
                            let direction = ''
                            if(!!this.directionCache && this.directionCache.split(',').length==2){
                                direction = 'BOTH'
                            }else{
                                direction = this.directionCache;
                            }

                            //高级搜索-----所有参数拼接
                            let data = {
                                degree: this.degreeCache,
                                delEntIds: delEntIds,
                                direction: direction,
                                entId: this.entId,
                                entName: this.entName,
                                relClsIDs: this.linkClassCache,
                                limitNum: 3,
                                isModel: false,
                                entConditionQueries: entConditionQueries
                            }
                        
                            getChart(data).then(__data => {
                                this.entityClassList = __data.entClsListVO
                                this.linkClassList = __data.relClsListVO
                                this.nodes = __data.entListVO
                                this.links = __data.relListVO
                                this.directionsList.forEach((v) => {
                                    v.checked = true
                                })
                                this.$refs.chart.reDraw(
                                    this.entId,
                                    __data.entListVO,
                                    __data.relListVO
                                )
                                this.spinning = false
                            })
                        }
                    }
                )
            },
			// 运行测试按钮
			handlerRunFlow(data) {
				const vm = this
				let attrClsId = data.attrClsId
				runFlow(this.entId, attrClsId, this.isModel).then((data) => {
					vm.$message.success('计算流程启动成功');
					this.getCIDXAttr(); // 获取能力属性
				})
			},
		},
	};
</script>

<style>
	.ant-collapse-content > .ant-collapse-content-box {
		padding: 0px !important;
	}

	.ant-collapse-content > .ant-collapse-content-box > .menu-panel {
		max-height: 300px;
		overflow-y: auto;
	}

	.shu-xing {
		text-align: center;
	}
	#attrModelEditorContainer {
		height: 100%;
	}
	#attrModelEditorContainer .left-menu {
		padding-right: 0;
		/* border-right: 1px solid #ddd; */
		/* background: #f5f7fa; */
	}

	.left-menu-item {
		padding: 12px 16px;
		/* margin: 0 0 16px 0; */
		cursor: pointer;
	}

	.ant-collapse-header:hover {
		background: #0aa67985;
	}

	.left-menu-item:hover {
		color: #fff;
		background: #0aa67985;
	}

	.left-menu-item {
		margin-bottom: 0px;
	}

	.left-menu-item.active {
		background: #0aa679;
		color: #fff;
	}

	.left-menu .left-menu-coll {
		background-color: transparent;
		border: none;
	}

	.left-menu .left-menu-coll .ant-collapse-content {
		border: none;
	}

	#attrModelEditorContainer .ant-tabs .ant-tabs-left-bar .ant-tabs-tab {
		text-align: left;
	}

	.card-content {
		margin: 15px 20px 0 20px;
	}

	.card_elem {
		border: 1px solid #e8e8e8;
		padding: 10px;
		border-radius: 4px;
		margin-bottom: 20px;
		max-height: 255px;
		overflow-y: auto;
	}

	.let_elem {
		text-align: right;
		color: #999;
		height: 32px;
		line-height: 32px;
	}

	.warnIcons {
		margin-right: 5px;
		color: #0aa679 !important;
	}

	.panel-ulli .ant-tabs-nav .ant-tabs-tab-active {
		background: #0aa679;
		color: #fff;
	}

	.panel-ulli .ant-tabs-tab {
		transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	}

	.center-box {
		border: 1px solid #e8e8e8;
		padding: 0 !important;
	}
</style>
