<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>å•†åŠ¡åŒºåŸŸç¼–è¾‘</title>
		<script src="../../../js/vue/vue.js"></script>
		<script src="../../../js/vue/element-ui/lib/index.js"></script>
		<!-- <script src="../../../js/vue/elementDefault.js"></script> -->
		<script src="../../../js/vue/page.js"></script>
		<script src="../../../js/myelement.js"></script>
		<!-- <script src="../../../data/data.js"></script> -->
		
		<link href="../../../js/vue/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
		<link href="../../../css/myelement.css" rel="stylesheet">
		<link href="../../../css/iconfont.css" rel="stylesheet">
		<link href="../../../css/page.css" rel="stylesheet">
		<link href="//at.alicdn.com/t/font_2374495_mkoo966o0uo.css" rel="stylesheet">
	</head>
	
	<body>
		<div id="vbody">
			<div id="page_root">
				<div ref="popup_body">
					<div class="el-dialog__header">
						<div class="dialog-title">
						  <i class="iconfont icon-customermanagement"></i>
						  <span> {{formAttr.title}} </span>
						</div>
					</div>	
					<div class="el-dialog__body">
						<h-form
							ref="form1"
							:form-attr="formAttr"
							:table-fields="tableFields"
							:form-data="formData"
							v-on:show-popup="showPopup"
						>
						</h-form>
					</div>
					
					<div class="el-dialog__footer">
					  <el-button type="default" @click="closeDialog">å– æ¶ˆ</el-button>
					  <el-button type="primary" @click="saveRowTable">ä¿ å˜</el-button>
					</div>
				</div>
				
				<el-dialog title="é€‰æ‹©" :visible.sync="popupByFieldsDialog">
					{{selectFormField.field}}
					{{selectFormField.dataurl}}
					
					<div slot="footer" class="dialog-footer" >
					  <el-button @click="popupByFieldsDialog = false">å– æ¶ˆ</el-button>
					  <el-button type="primary" @click="saveFormValByField('123')">ç¡® å®š</el-button>
					</div>
				</el-dialog>
			</div>
			
			<div id="page_loading" style="position: absolute; top:0px; width: 100vw; height: 100vh;">
				<div class="spinner">
				  <div class="cube1"></div>
				  <div class="cube2"></div>
				</div>
			</div>
		</div>	
		
		<script type="text/javascript">
			new Vue({
				el: "#vbody",
				data: {
					formAttr: {
						istitle: false,
						title: "å•†åŠ¡åŒºåŸŸ",
						columnnumber: 2,
						labelwidth: "100px",
						labelposition: "right",
						size: "medium",
						border: "0px solid #c6c6c600"
					},
					tableFields: [],
					formData: {},
					selectFormField: {},
					popupByFieldsDialog: false
				},
				created() {
					
				},
				
				mounted() {
					if (Root.popupParames.data) {
						this.formData = clone(Root.popupParames.data);
					}
					if (Root.popupParames.delta) {
						this.tableFields = Root.popupParames.delta;
					}
					this.$nextTick(() => { // ä»¥æœåŠ¡çš„æ–¹å¼è°ƒç”¨çš„ Loading éœ€è¦å¼‚æ¥å…³é—
						document.getElementById('page_root').style.display =  "block";
						document.getElementById('page_loading').style.display =  "none";
						
						//é‡æ–°è®¾ç½®å¼¹çª—å®½é«˜
						this.$nextTick(function(){
							let w_ = this.$refs.popup_body.offsetWidth + "px";
							let h_ = this.$refs.popup_body.offsetHeight + "px";
							Root.setPopupWH(w_, h_);
						})
					});
				},
				
				methods:{
					closeDialog() {
						Root.hidePopup();
					},
					
					saveRowTable() {
						if(Root.popupParames.callback) {
							let obj = {
								row: this.formData
							}
							Root.popupParames.callback(obj, function() {
								Root.hidePopup();
							});
						}
						else {
							alert("è¯¥æŒ‰é”®äº‹ä»¶ç¼ºå¤±ï¼")
						}
					},
					
					//è¡¨å•
					showPopup(obj) {
						this.selectFormField = obj.obj;
						this.popupByFieldsDialog = true;
					},
					saveFormValByField(val) {
						this.popupByFieldsDialog = false;
						this.$refs.form1.setFormValByField(this.selectFormField, val);
					},
				}
			});
		</script>
		
	</body>
</html>