/* ********** */
Root = window.top.Root;
RootRole = window.top.RootRole;
dataRoot = window.top.dataRoot;
dataRootFields = window.top.dataRootFields;
buttonsconfig = window.top.buttonsconfig;
Server = window.top.Server;

Sortable = window.top.Sortable;
system_config = window.top.config.system_config;

//显示大小基准
//分辨率基准
var screen_draft = [1920, 1080];
//var screen_draft = [1366, 768];
//可视范围基准
var wh_draft = [1366, 728];
var h_language = localStorage.getItem("userlanguage") || "zh";

dateFormat = window.top.dateFormat;

/* 流程架构 */
Vue.component("h-flow", {
	template: [
		'<div :class="[\'z_left_menu_tree\', isCheckbox ? \'z_left_menu_checkbox\' : \'\']">',
			'<div v-if="isfilter" style="height: 38px; line-height: 38px; padding: 0px 12px;">',
				'<el-input placeholder="输入关键字搜索" v-model="filterText"></el-input>',
			'</div>',
			
			'<div v-if="treeheight" :style="{height: treeheight - 38 + \'px\', overflow: \'auto\'}">',
				'<el-tree ref="hierTree" class="filter-tree" :node-key="nodekey" :indent="indent" ',
				' :default-expand-all="defaultExpandAll" ',
				' highlight-current ',
				' :data="treeData" ',
				' show-checkbox ',
				' :accordion="accordion" ',
				' :expand-on-click-node="expandOnClickNode" ',
				' :current-node-key="currentnodekey" ',
				' :default-expanded-keys="defaultExpandedKeys" ',
				' :default-checked-keys="selectCheckedKeys" ',
				' :filter-node-method="filterNode" ',
				' :icon-class="iconclass" ',
				' :icon-expanded-class="iconExpandedClass" ',
				' :draggable="isDraggable" ',
				' :allow-drop="allowDrop" ',
				' :allow-drag="allowDrag" ',
				' :check-strictly="checkstrictly"',
				' :check-on-click-node="checkOnClickNode"',
				
				' @node-drag-end="handleDragEnd" ',
				' @node-drop="handleDrop" ',
				' @node-click="nodeClick" ',
				' @check-change="checkClick" ',
				' >',
					'<span class="custom-tree-node z_menu_tree" slot-scope="{ node, data, itm }"',
					' @mouseenter="node_isShow(data, true)"',
					' @mouseleave="node_isShow(data, false)"',
					'>',
						'<span>',
							// '<div class="nodeLabel nodeLabel_l" style="height: 32px; line-height: 32px;">',
							// '</div>',
							
							// '<div class="nodeLabel z_left_menu_tree_txt">',
							// 	'<i v-if="!node.isLeaf" :class="!node.expanded ? \'el-icon-plus\':\'el-icon-minus\'" style="font-size: 12px; margin-right: 10px; border: 1px solid #a7a9a9; color: #a7a9a9;"></i>',
							// 	'<i v-else-if="!data.parent_id" style="font-size: 12px;"></i>',
							// 	'<i v-else style="font-size: 12px; margin-right: 10px;"></i>',
							// '</div>',
							'<div v-if="data.nodeformatfield" class="nodeLabel z_left_menu_tree_txt">',
								'<span>{{ data[data.nodeformatfield] }}</span>',
							'</div>',
							'<div v-else class="nodeLabel z_left_menu_tree_txt">',
								'<span v-for="(nodeTxt, k) in treeTxtList">',
									'<span v-if="nodeTxt.type == \'value\'">{{ nodeTxt.value }}</span>',
									'<span v-else-if="nodeTxt.type == \'field\'">{{ data[nodeTxt.value] }}</span>',
								'</span>',
								// '<el-badge :ref="\'dadgeid_\' + data.id" v-show="data.isBadge ? true : false" is-dot class="item">',
								// '<el-badge :ref="\'dadgeid_\' + data.id" v-show="(data.isBadge || data.badgeval) ? true : false" :value="data.badgeval" :is-dot="data.badgeval ? false : true" class="h_tree_badge_dot">',
								// '</el-badge>',
							'</div>',
							'<template v-if="markfields && markfields.length" v-for="(markfield, mfk) in markfields">',
								// 标记
								'<div v-if="markfield.field && data[markfield.field]" class="nodeLabel z_left_menu_tree_txt">',
									'<el-tag v-if="markfield.isclick" :type="markfield.tagtype" size="mini"',
									'@click.stop="onMarkClick(markfield, data, node)" class="z_node_button_mb">{{markfield.name ? markfield.name : data[markfield.field]}}</el-tag>',
									
									'<el-tag v-else size="mini" :type="markfield.tagtype" class="z_node_button_mt">{{markfield.name ? markfield.name : data[markfield.field]}}</el-tag>',
								'</div>',
							'</template>',
							
							'<el-badge :ref="\'dadgeid_\' + data.id" v-show="(data.isBadge || data.badgeval) ? true : false" :value="data.badgeval" :is-dot="data.badgeval ? false : true" class="h_tree_badge_dot">',
							'</el-badge>',
						'</span>',
						'<span v-if="data.isnotnode_edit || (markdelfield && data[markdelfield])">',
						'</span>',
						'<span v-else>',
							'<div :ref="data.id" v-show="false" class="nodeLabel" style="max-width: 128px;">',
								'<template v-if="maxlevel" >',
									'<el-button v-if="node.level < maxlevel &&  (!data.parent_id || (data.children && data.children.length) || data.ishnodeadd || isbottomadd) && editTreeButton.add.isshow && !data.isnot_nodeadd" type="text" ',
									'@click.stop="addNode(data,node)" class="z_node_button aaa1" icon="el-icon-circle-plus-outline">',
									'</el-button>',
								'</template>',
								'<template v-else>',
									'<el-button v-if="(!data.parent_id || (data.children && data.children.length) || data.ishnodeadd || isbottomadd) && editTreeButton.add.isshow && !data.isnot_nodeadd" type="text" ',
									'@click.stop="addNode(data,node)" class="z_node_button bbb" icon="el-icon-circle-plus-outline">',
									'</el-button>',
								'</template>',
								
								// '<el-button v-if="editTreeButton.edit.isshow && !data.edit_disabled" type="text" ',
								'<el-button v-if="editTreeButton.edit.isshow && !data.isnot_nodeedit" type="text" ',
								'@click.stop="editNode(data,node)" class="z_node_button" icon="el-icon-edit">',
								'</el-button>',
								'<el-button v-if="!(data.children && data.children.length) && editTreeButton.del.isshow && !data.isnot_nodedel" type="text" ',
								'@click.stop="delNode(data,node)" class="z_node_button" icon="el-icon-delete">',
								'</el-button>',
							'</div>',
							
							/* '<div class="nodeLabel" style="margin-right: 30px;">',
								// '<span v-if="!node.isLeaf && !data.badgeval">{{data.children.length}}</span>',
								// '<span v-if="!node.isLeaf && data.badgeval">{{data.badgeval}}</span>',
							'</div>', */
						'</span>',
					'</span>',
				'</el-tree>',
			'</div>',
			
			'<div v-else>',
				'<el-tree ref="hierTree" class="filter-tree" :node-key="nodekey" :indent="indent" ',
				' :default-expand-all="defaultExpandAll" ',
				' highlight-current ',
				' :data="treeData" ',
				' show-checkbox ',
				' :accordion="accordion" ',
				' :draggable="isDraggable" ',
				' :expand-on-click-node="expandOnClickNode" ',
				' :current-node-key="currentnodekey" ',
				' :default-expanded-keys="defaultExpandedKeys" ',
				' :default-checked-keys="selectCheckedKeys" ',
				' :filter-node-method="filterNode" ',
				' :icon-class="iconclass" ',
				' :icon-expanded-class="iconExpandedClass" ',
				' :allow-drop="allowDrop" ',
				' :allow-drag="allowDrag" ',
				' :check-strictly="checkstrictly"',
				' :check-on-click-node="checkOnClickNode"',
				
				' @node-drag-end="handleDragEnd" ',
				' @node-drop="handleDrop" ',
				' @node-click="nodeClick" ',
				' @check-change="checkClick" ',
				' >',
					'<span class="custom-tree-node z_menu_tree" slot-scope="{ node, data, itm }"',
					' @mouseenter="node_isShow(data, true)"',
					' @mouseleave="node_isShow(data, false)"',
					'>',
						'<span>',
							// '<div class="nodeLabel nodeLabel_l" style="height: 32px; line-height: 32px;">',
							// '</div>',
							
							// '<div class="nodeLabel z_left_menu_tree_txt">',
							// 	'<i v-if="!node.isLeaf" :class="!node.expanded ? \'el-icon-plus\':\'el-icon-minus\'" style="font-size: 12px; margin-right: 10px; border: 1px solid #a7a9a9; color: #a7a9a9;"></i>',
							// 	'<i v-else-if="!data.parent_id" style="font-size: 12px;"></i>',
							// 	'<i v-else style="font-size: 12px; margin-right: 10px;"></i>',
							// '</div>',
							'<div class="nodeLabel z_left_menu_tree_txt">',
								'<span v-for="(nodeTxt, k) in treeTxtList">',
									'<span v-if="nodeTxt.type == \'value\'">{{ nodeTxt.value }}</span>',
									'<span v-else-if="nodeTxt.type == \'field\'">{{ data[nodeTxt.value] }}</span>',
								'</span>',
								// '<el-badge :ref="\'dadgeid_\' + data.id" v-show="data.isBadge ? true : false" is-dot class="item">',
								// '<el-badge :ref="\'dadgeid_\' + data.id" v-show="(data.isBadge || data.badgeval) ? true : false" :value="data.badgeval" :is-dot="data.badgeval ? false : true" class="h_tree_badge_dot">',
								// '</el-badge>',
							'</div>',
							'<el-badge :ref="\'dadgeid_\' + data.id" v-show="(data.isBadge || data.badgeval) ? true : false" :value="data.badgeval" :is-dot="data.badgeval ? false : true" class="h_tree_badge_dot">',
							'</el-badge>',
						'</span>',
						'<span v-if="!data.isnotnode_edit">',
							'<div :ref="data.id" v-show="false" class="nodeLabel" style="max-width: 128px;">',
								'<template v-if="maxlevel" >'+
									'<el-button v-if="node.level < maxlevel &&  (!data.parent_id || (data.children && data.children.length) || data.ishnodeadd || isbottomadd) && editTreeButton.add.isshow && !data.isnot_nodeadd" type="text" ',
									'@click.stop="addNode(data,node)" class="z_node_button aaa2" icon="el-icon-circle-plus-outline">',
									'</el-button>',
								'</template>'+
								'<template v-else>'+
									'<el-button v-if="(!data.parent_id || (data.children && data.children.length) || data.ishnodeadd || isbottomadd) && editTreeButton.add.isshow && !data.isnot_nodeadd" type="text" ',
									'@click.stop="addNode(data,node)" class="z_node_button bbb" icon="el-icon-circle-plus-outline">',
									'</el-button>',
								'</template>'+
								
								// '<el-button v-if="editTreeButton.edit.isshow && !data.edit_disabled" type="text" ',
								'<el-button v-if="editTreeButton.edit.isshow && !data.isnot_nodeedit" type="text" ',
								'@click.stop="editNode(data,node)" class="z_node_button" icon="el-icon-edit">',
								'</el-button>',
								'<el-button v-if="!(data.children && data.children.length) && editTreeButton.del.isshow && !data.isnot_nodedel" type="text" ',
								'@click.stop="delNode(data,node)" class="z_node_button" icon="el-icon-delete">',
								'</el-button>',
							'</div>',
							
							/* '<div class="nodeLabel" style="margin-right: 30px;">',
								// '<span v-if="!node.isLeaf && !data.badgeval">{{data.children.length}}</span>',
								// '<span v-if="!node.isLeaf && data.badgeval">{{data.badgeval}}</span>',
							'</div>', */
						'</span>',
					'</span>',
				'</el-tree>',
			'</div>',
		'</div>'].join(""),
	props: {
		flowData: Array, // 全部节点
		highlightData: Array, // 高亮节点
		isReadonly: {//是否只读
			type: Boolean,
			default: false
		},
		nodeDictionary: { // 节点字典
			type: Array,
			default: function(){
				return [
					{code: "ApprovalNode", name: "审批人"},
					{code: "ConditionsNode", name: "条件分支"},
				]
			}
		},
		
		isDraggable: {//是否可拖拽节点
			type: Boolean,
			default: false
		},
		draggableType: {// 允许拖拽节泛范围， sameLevel同级拖拽， 
			type: String,
			default: ""
		},
		
		isCheckbox: {//是否显示复选框
			type: Boolean,
			default: false
		},
		checkstrictly: {//在显示复选框的情况下，是否严格的遵循父子不互相关联的做法
			type: Boolean,
			default: false
		},
		checkOnClickNode: { // 是否可以点击节点进行选中
			type: Boolean,
			default: false
		},
		isfilter: {//是否可查询
			type: Boolean,
			default: false
		},
		isfilterchildren: { // 关键字查询结果是否带出子节点 
			type: Boolean,
			default: true
		}, 
		
		defaultExpandAll: {//是否全部展开
			type: Boolean,
			default: true
		},
		expandOnClickNode: { // 是否在点击节点的时候展开或者收缩节点
			type: Boolean,
			default: false
		},
		accordion: {//是否手风琴
			type: Boolean,
			default: false
		},
		nodekey: { //
			type: String,
			default: "id"
		},
		markdelfield: { // 标记删除的字段，和标记字段没有关系
			type: String,
			default: "is_delete"
		}, 
		markfields: { // 标记字段
			type: Array,
			default: function(){
				return [
					{
						field: "is_delete",
						name: "已删除",
						tagtype: "danger", // 标记
						isclick: false,
					}
				] 
			}
		},
		treeTxtFormatter: {//
			type: String,
			default: "#{name}-{name}%"
		},
		
		defaultExpandedKeys: {//默认展开节点数组
			type: Array,
			default: function(){
				return [];
			}
		},
		defaultCheckedKeys: {//默认勾选节点数组
			type: Array,
			default: function(){
				return [];
			}
		},
		maxlevel: {//最大层级，可用来控制添加按键的显示
			type: Number,
			default: 0
		},
		isbottomadd: { // 最底层是否允许添加按键
			type: Boolean,
			default: false
		},
		currentnodekey: "",//默认选中节点
		
		editTreeButton: {//编辑界面行按键（编辑，删除）
			type: Object,
			default: function(){
				return {
					add: {
						isshow:true,
						txt:"编辑"
					},
					edit: {
						isshow:true,
						txt:"编辑"
					},
					del: {
						isshow:true,
						txt:"删除"
					},
				}
			}
		},
		
		treeheight: {// 树容器的高度
			type: Number,
			default: 0
		},
	},
	
	data() {
		return {
			selectCheckedKeys: clone(this.defaultCheckedKeys),
			iconclass: "el-icon-plus",
			iconExpandedClass: "el-icon-minus", // 需要改element-ui中的index.js
			indent: 24,
			filterText: "", // 关键字查询
			filterField: [], // 关键字查询的字段
			treeTxtList: [
				{value: "", type: "value/field"}
			],
			
			filterDataObj: {}, // 关键字查询的结果对象
		}
	},
	watch: {
	    filterText(val) {
			this.filterDataObj = {};
	        this.$refs.hierTree.filter(val);
	    },
		defaultCheckedKeys() {
			this.selectCheckedKeys = clone(this.defaultCheckedKeys)
		}
	},
		
	mounted() {
		this.nodeTxtFormatter();
	},
	methods: {
		
	}
});


/* 节点（审批人）、、、预览、新增、删除、编辑 */


/* 节点（条件分支） */














//**************通用事件*******************
//根据分辨率和基准分辨率设置缩放
function bodyScale(el) {
	var win_ratio = window.devicePixelRatio; // 当前显示设备的物理像素分辨率与CSS像素分辨率之比
	var screen_width = window.screen.width; //document.documentElement.clientWidth;//获取当前分辨率下的可是区域宽度
	var screen_height = window.screen.height; //document.documentElement.clientHeight;//获取当前分辨率下的可是区域宽度
	var scale_w = screen_width / win_ratio / screen_draft[0]; // 分母——设计稿的分辨率
	var scale_h = screen_height / win_ratio / screen_draft[1]; // 分母——设计稿的分辨率
	
	var win_width = document.documentElement.clientWidth;//获取当前分辨率下的可是区域宽度
	var win_height = document.documentElement.clientHeight;//获取当前分辨率下的可是区域宽度
	var win_w = win_width / win_ratio / wh_draft[0]; // 分母——设计稿的尺寸
	var win_h = win_height / win_ratio / wh_draft[1]; // 分母——设计稿的尺寸
	
	if (scale_w > 1 && scale_h > 1) {
		el.style.transform = "scale(" + scale_w + "," + scale_h + ")";//放大缩小相应倍数
	}
	else {
		el.style.width = win_width - 2 + "px";
		el.style.height = win_height - 2 + "px";
	}
	
	//el.style.transform = "scale(" + scale_w * win_w + "," + scale_h * win_h + ")";//放大缩小相应倍数
	//document.getElementById('sys_iframe').style.transform = "scale(" + scale_w + "," + scale_h + ")";//放大缩小相应倍数
}

//滚屏效果
const cubic = value => Math.pow(value, 3);
const easeInOutCubic = value => value < 0.5 ? cubic(value * 2) / 2 : 1 - cubic((1 - value) * 2) / 2;