<!doctype html>
<html>
	<head>
		<meta charset="utf-8"><meta http-equiv="Expires" content="0"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-control" content="no-cache"><meta http-equiv="Cache" content="no-cache">
		<title>报表中心</title>
		
		<script type="text/javascript">
			var pageVue = null;
			function loadJsCss(callback) {
				var jscss_urls = [];
				window.top.initJsCss(document, jscss_urls, callback);
			};
			
			function initVue() {
				new TreeVue({
					el: "#vbody",
					data: {
						dataname: "sys_page_report", // "md_prod_category",
						title: "报表中心",
						tree_title: "报表菜单",
						treeTxtFormatter: "{title}",
						isTreeReadonly: true,
						
						dataRequest: [
							{
								name: "sys_report", // 
								dataname: "sys_report",
								// url: "root/approve/getOutline",
								paramsobj: {},
								isnotoption: true, //true:不是选项
								filter: "",
							},
						],
						
						currentnodekey: "",
						tableFields: [],
						tableData: [],
						tableHeight: 0,
						tablefieldClick: {},
						tablebuttonClick: [],
						tableloading: false,
						filterFieldsObj: {},
						filterObj: {},
						ispagination: true,
						report_map: {},
						isTreeRefresh: true,
					},
					created() {
						let clientHeight = document.documentElement.clientHeight;
						this.treeHeight = clientHeight - 22 - 32 - 30;
					},
					
					mounted() {
						var me = this;
						if (window.top.tab.selected.option.page_id) {
							getPageByPageId(window.top.tab.selected.option.page_id, function(result) {
								// me.ctabs_r = result.tabs_r; // 一级菜单
								// me.cbuttons_r = result.buttons_r; // 二级菜单
								var initTreeData_ = [];
								result.tabs.map(tr=>{
									initTreeData_.push(tr);
								})
								
								//预加载数据
								if (me.dataRequest && me.dataRequest.length) {
									var result_ = {};
									me.loadRequestData(me.dataRequest, result_, function(data) {
										me.dataRequestObj = data;
										//预加载数据后给哪些字段设置options或formatterjson
										if (me.dataRequestObj.sys_report) {
											var report_map_ = {}
											me.dataRequestObj.sys_report.map(r=>{
												r.id = r.button_id;
												r.title = r.name;
												if (!r.default_filter) {
													r.default_filter = "1=1"
												}
												report_map_[r.button_id] = r
											})
											
											result.buttons.map(br=>{
												var nr_ = report_map_[br.id]
												initTreeData_.push(nr_);
											})
											me.initTreeData = initTreeData_;
											// me.report_map = clone(report_map_);
										}
										me.initData();
										me.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
											hideLoading();
										});
									});
								}
								else {
									me.initData();
									me.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
										hideLoading();
									});
								}
							})
						}
					},
					
					methods:{
						initData() {
							var me = this;
							let initTreeData_ = ArrayToTree(clone(me.initTreeData), "name", "tab_id", null, null, null);
							me.treeData = initTreeData_;
							if(me.treeData[0]) {
								const leafNode = me.findLeafNode(me.treeData[0]);
								let objInit = {
									data: leafNode,
									node: {},
									el: {},
								};
								me.currentnodekey = leafNode.id;
								
								this.isTreeRefresh = false;
								this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
									me.isTreeRefresh = true;
									me.onNodeClick(objInit);
								});
							}
						},

						findLeafNode(node) {
							if (!node.children || node.children.length === 0) {
								return node;
							}
							for (let i = 0; i < node.children.length; i++) {
								const child = node.children[i];
								const leafNode = this.findLeafNode(child);
								if (leafNode) {
									return leafNode;
								}
							}
							return null;
						},
						
						onNodeClick(obj) {
							var me = this;
							var data = obj.data, node = obj.node, el = obj.el;
							if (this.selectedrow) {
								this.selectedrow = null;
							}
							this.selectednode = data;
							this.pagenum = 1;
							this.total = 0;
							
							this.filterFieldsObj = {};
							this.filterObj = {};
							
							this.tableData = [];
							this.tableFields = [];
							
							if (this.selectednode.dataname) {
								this.getDataByNode(true);
								// this.getTableMeta(function() {
								// 	me.getDataByNode();
								// });
							}
						},
						
						getDataByNode(attachMeta, callback) {
							var me = this;
							var filter = this.getFilterData(me.selectednode.default_filter, this.filterObj, this.filterFieldsObj) || "";
							var param_ = {
								dataname: me.selectednode.dataname,
								attachMeta: attachMeta,
								page: {
									pageno: me.pagenum,
									pagesize: me.pagesize,
								},
								orderby: "",
							}
							
							if (me.selectednode.orderby) {
								param_.orderby = me.selectednode.orderby
							}
							
							if (filter) {
								param_.filter = filter
							}
							Server.call("root/data/getEntitySet", param_, function(result) {
								if (result && result.data && result.data.entityset) {
									me.tableData = result.data.entityset;
								}
								me.total = result.data.page ? result.data.page.recordcount : 0;
								
								if (result.meta && result.meta[me.selectednode.dataname] && result.meta[me.selectednode.dataname].fields) {
									var metas = clone(result.meta[me.selectednode.dataname].fields);
									var filterFields_ = [];
									var tableFields_ = [];
									var tableFields_last_ = [];
									
									metas.map(f=>{
										f.isshow = "T";
										
										tableFields_.push(clone(f));
									})
									
									if (me.selectednode.dataname == 'so_order' && tableFields_last_.length) {
										var tableFields_a = [];
										tableFields_.map(f=>{
											if (f.field == "type_name") {
												tableFields_last_.map(fl=>{
													tableFields_a.push(clone(fl));
												})
											}
											tableFields_a.push(f);
										})
										
										tableFields_ = clone(tableFields_a);
									}
									
									// me.filterFields = clone(filterFields_);
									me.tableFields = clone(tableFields_);
									//字段数组转字段obj,目的为了筛选时获取字段属性
									// me.fieldsToFieldsObj();
									var formFieldsObj_ = {}
									me.tableFields.map(f=>{
										formFieldsObj_[f.field] = f;
									});
									
									me.filterFieldsObj = clone(formFieldsObj_);
									
									me.tableDataAfter();
									//设置字段事件
									me.tableFieldClick();
									
									if (callback) {
										callback()
									}
								}
							})
						},
						
						tableDataAfter() {
							var me = this;
							if (this.tableFields.length > 0){
								this.$nextTick(function(){
									this.isRefresh = true;
									this.$nextTick(function(){
										var el_list = [];
										me.tableHeight = me.treeHeight - 32;
									})
								})
							}
						},
						
						getData(page) {
							this.pagesize = page.pagesize;
							this.pagenum = page.pagenum;
							if (page.filtersobj) { //  && Object.keys(page.filtersobj).length
								this.filterObj = clone(page.filtersobj);
							}
							this.getDataByNode(false);
						},
						
						tableFieldClick() {
							var me = this;
							
							//表格字段事件设置
							var tablefieldClick = {
								state_name: {//状态
									val: {
										notclick_val: "",//不可点击的值
										notclick_bindfield: [],
										onclick: function(obj) {//数据值点击事件
											var config = {
												totab: false, //true: 以Tab导航的方式打开
												width: "1100px",
												height: "520px",
												icon: "icon-product",
												text: "流程步骤",
												id: "customer_acct" + obj.row.id,//totab: true时需设置,用于判断是否已打开此页面
												url: "module/tool/page/popup_workflow_step_user.html?v=2023020703",
												data: obj.row,
												delta: {dataname: me.selectednode.dataname},
												sceneCode: "browse",//"refuseedit",//"approval", //"add"//"browse",
												callback: function(obj, callback) {
													if (callback) {
														callback();
													}
												}
											};
											me.doPopupByPublic(config);
										},
									},	
								},
								
								h_operate: {
									defaultval: {
										val: me.activeTabName == "list" ? "审批" : "详情",//空值时的显示值
										onclick: function(obj) {//数据值点击事件
											var sceneCode = "browse";
											if (me.activeTabName == "list") {
												sceneCode = "approval";
											}
											me.doToApproval(sceneCode, obj.row);
										},
									},
								}
							};
							this.tablefieldClick = tablefieldClick;
						},
						onDownload() {
							let me = this;
							var filter_ = "";
							filter_ = this.getFilterData(this.selectednode.default_filter, this.filterObj, this.filterFieldsObj);
							var ioname_ = me.selectednode.io_name;
							var orderby_ = me.selectednode.orderby ? me.selectednode.orderby : "";
							
							let param = {
								filter: filter_,
								ioname: ioname_,
								orderby: orderby_,
								token: Root.getToken()
							}
							// window.top.vue.onDownload(param);
							window.top.vue.textdownloadForm(param);
						},
						
						
					}
				});
			};
			
			loadJsCss(function () {
				initVue();
			});
		</script>
		<style>
			/*  在vue.js中 v-cloak 这个指令是防止页面加载时出现 vuejs 的变量名而设计的 */
			[v-cloak] {
				display: none !important;
			}
			.el-tabs__nav-scroll {
			    overflow: hidden;
			    position: relative;
			    padding-left: 20px;
			}
			.nodeLabel {
			    max-width: 220px !important;
			}
			.h_table .h_h_table .h_table_tool_right .h_table_right_filter {
				width: 100% !important;
			}
		</style>
		
	</head>
	
	<body style="margin: 0px;">
		<div v-cloak id="vbody">
			<div id="page_root">
				<div class="h_dialog__body">
					<div :style="{position: 'absolute', left: '5px', width: '205px', top: '5px', bottom: '5px', border: '1px solid #ccc'}">
						<div style="height: 32px;line-height: 32px;border-bottom: 1px solid #ccc ;">
							<span style="font-size: 14px;margin-left: 20px;">{{tree_title}}</span>
						</div>
						<div :style="{padding: '16px 0', height: treeHeight + 'px', overflow: 'auto'}">
							<h-tree
							v-if="isTreeRefresh"
							:tree-data="treeData"
							:tree-txt-formatter="treeTxtFormatter"
							:currentnodekey="currentnodekey"
							:is-readonly="isTreeReadonly"
							
							@node-click="onNodeClick"
							>
							</h-tree>
						</div>
					</div>
					<div :style="{position: 'absolute', left: '220px', right: '5px', top: '5px', bottom: '5px', border: '1px solid #ccc'}">
						<div style="height: 32px;line-height: 32px;border-bottom: 1px solid #ccc ;">
							<span style="font-size: 14px;margin-left: 20px;">{{selectednode ? selectednode.name : ""}}</span>
							<div style="float: right;">
								<el-button v-if="tableFields && tableFields.length" @click="onDownload" :icon="buttonsconfig.export.icon">{{buttonsconfig.export.name}}</el-button>
							</div>
						</div>
						<div v-if="false" style="height: 100%; width: 100%;">
							<iframe ref="edition_data_iframe" style="height: 100%; width: 100%;" frameborder="0" :src="edition_data_page"></iframe>
						</div>
						
						<div v-else>
							<h-table
								v-if="tableFields && tableFields.length"
								ref="table1"
								:table-fields="tableFields" 
								:table-data="tableData" 
								:pagesize="pagesize"
								:pagenum="pagenum"
								:total="total"
								:table-height="tableHeight - 64 + 24"
								:table-field-click="tablefieldClick"
								:table-buttons-click="tablebuttonClick"
								:tableloading="tableloading"
								:isdraggableorder="false"
								:filtersobj="filterObj"
								:is-highlight-row="true"
								:is-pagination="ispagination"
								
								v-on:get-data="getData"
							>
							</h-table>
						</div>
					</div>
					
				</div>
			</div>
		</div>
		
		<div id="page_loading" style="position: absolute; top:0px; width: 100vw; height: 50vh;">
			<div class="spinner">
			  <div class="cube1"></div>
			  <div class="cube2"></div>
			</div>
		</div>
		
	</body>
</html>