<!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 BasicsVue({
					el: "#vbody",
					data: {
						dataname:  "agm_record", 
						
						filterTxt: " state_code = 'Draft'",
						orderby: "update_time desc",
						
						dataRequest: [],
						title: "版本时间线",
						
						tableData: [
							{id: "111", code: "BA202207170001", versionno: "V4", type_name: "区域备案", state_name: "生效", update_time: "2022-07-14 11:25:04", remark: "测试4"},
							{id: "111", code: "BA202207170001", versionno: "V3", type_name: "区域备案", state_name: "失效", update_time: "2022-07-13 13:20:52", remark: "测试3"},
							{id: "111", code: "BA202207170001", versionno: "V2", type_name: "区域备案", state_name: "失效", update_time: "2022-07-10 10:35:64", remark: "测试2"},
							{id: "111", code: "BA202207170001", versionno: "V1", type_name: "区域备案", state_name: "失效", update_time: "2022-07-07 16:05:22", remark: "测试1"},
						],
					},
					created() {
						this.popupParames = clone(Root.popupParames);
						
						if (this.popupParames.data) {
							this.formData = clone(this.popupParames.data);
						}
					},
					
					mounted() {
						var me = this;
						//预加载数据
						if (this.dataRequest.length) {
							var result = {};
							this.loadRequestData(this.dataRequest, result, function(data) {
								me.dataRequestObj = data;
								//预加载数据后给哪些字段设置options或formatterjson
								
								me.initData();
							});
						}
						else {
							this.initData();
						}
						
						this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
							hideLoading();
							
							//重新设置弹窗宽高
							this.$nextTick(function(){
								//let w_ = this.$refs.popup_body.offsetWidth + "px";
								let w_ = "900px";
								let h_ = this.$refs.popup_body.offsetHeight + "px";
								Root.setPopupWH(w_, h_);
							})
						});
					},
					
					methods:{
						closeDialog() {
							var me = this;
							if (me.popupParames.totab){
								Root.tab.removeItem(Root.tab.selected);
								Root.tab.open(me.popupParames.parentOption, false); 
							}
							else {
								Root.hidePopup();
							}
						},
						saveAfter() {//调回调的关闭
							var me = this;
							if(this.popupParames.callback) {
								let obj = {
									//row: this.formData
								}
								this.popupParames.callback(obj, function() {
									me.closeDialog();
								});
							}
							else {
								me.closeDialog();
							}
						},
						
						initData() {
							let me = this
							//tableData
							
							// if (this.formData.id) {
							// 	filter_table = "parentid = '" + this.formData.id + "'";
							// }
							
							// let param_table = {
							// 	isClientMode: false,
							// 	dataname: this.table_dataname,
							// 	filter: filter_table,
							// }
							
							// Server.call("root/data/getEntitySet", param_table, function(result) {
							// 	if (result && result.data) {
							// 		me.tableData2= result.data.entityset;
							// 	}
							// });
						},
						
						showVersion(operation, row) {
							let me = this;
							let url_ = "";
							if (operation == "browse") {//查看
								url_ = "module/agreement/page/recordById.html"
							}
							else if (operation == "contrast") {//对比
								url_ = "module/agreement/page/recordContrastById.html"
							}
							Root.showPopup({
								url: url_,
								width: 800,
								height: 550,
								data: row,
								sceneCode: "browse",
								callback: function(obj, callback) {
									if (callback) {
										callback();
									}
								}
							});
						},
						
					}
				});
			};
			
			loadJsCss(function () {
				initVue();
			});
		</script>
		<style>
			/*  在vue.js中 v-cloak 这个指令是防止页面加载时出现 vuejs 的变量名而设计的 */
			[v-cloak] {
				display: none !important;
			}
			html {
				overflow: hidden;
			}
			.popup_mainbody {
				height: 90vh;
				overflow: auto;
			}
			.el-descriptions :not(.is-bordered) .el-descriptions-item__cell {
			    padding-bottom: 2px;
			}
		</style>
		
	</head>
	
	<body style="margin: 0px;">
		<div v-cloak id="vbody">
			<div id="page_root">
				<div ref="popup_body" style="padding: 0px 20px;">
					<div class="el-dialog__header">
						<div class="dialog-title">
						  <i class="iconfont icon-customermanagement"></i>
						  <span> {{title}} </span>
						</div>
					</div>	
					<div style="height: 550px; ">
						<div style="height: 530px; overflow-y: auto; margin: 10px 0px;">
							<el-timeline>
								<el-timeline-item v-for="(row, k) in tableData" :key="k" :timestamp="row.update_time" placement="top">
									<el-card>
										<el-button-group style="float: right;">
										  <el-button size="mini" type="primary" @click="showVersion('browse', row)">详情</el-button>
										  <el-button size="mini" type="primary" @click="showVersion('contrast', row)">对比</el-button>
										</el-button-group>
										<el-descriptions :title="row.type_name" :column="2" size="mini">
											<el-descriptions-item label="备案编号">{{row.code}}</el-descriptions-item>
											<el-descriptions-item label="版本">{{row.versionno}}</el-descriptions-item>
											
											<el-descriptions-item label="状态">
												<el-tag :type="row.state_name == '生效' ? 'success' : 'danger'" size="mini">{{row.state_name}}</el-tag>
											</el-descriptions-item>
											<el-descriptions-item label="æ›´æ–°æ—¶é—´">{{row.update_time}}</el-descriptions-item>
											<el-descriptions-item label="备注">{{row.remark}}</el-descriptions-item>
										</el-descriptions>
									</el-card>
								</el-timeline-item>
							</el-timeline>
						</div>
					</div>
					<div class="el-dialog__footer">
						<el-button size="small" type="default" @click="closeDialog">å…³ é—­</el-button>
					</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>
		</div>
			
	</body>
</html>