<!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 style="margin: 0px;">
		<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 style="height: 250px; overflow-y: auto;">
						<div class="el-dialog__body">
							<h-table
								v-if="isRefresh"
								ref="table2"
								:table-fields="tableFields" 
								:table-data="tableData2" 
								:is-within-edit-table-data= "isWithinEditTableData"
								:pagesize="pagesize"
								:pagenum="pagenum"
								:total="total"
								:table-height="tableHeight2"
								:is-pagination="false"
								:is-show-index="true"
							>
							</h-table>
						</div>
					</div>
					<div class="el-dialog__footer">
					  <el-button 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>	
		
		<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"
					},
					authorize: {
						edit: true,
					},
					tableFields: [
						{field: "field1", name: "", isshow: "F"},
						{field: "field2", name: "å•ä½åç§°", isshow: "T", align: "center", type: "input", required: true},
						{field: "field3", name: "ç¨Žå·", isshow: "T", align: "center", width: "150", required: true, type: "input"},
						{field: "field4", name: "å¼€ç¥¨æ—¥æœŸ", isshow: "T", align: "center", width: "150", type: "input"},
						{field: "field5", name: "é‡‘é¢", isshow: "T", align: "center", width: "60", type: "input"},
						{field: "field6", name: "å‘ç¥¨ç±»åž‹", isshow: "T", align: "center", width: "120", type: "input"},
						{field: "field7", name: "å‘ç¥¨å·", isshow: "T", align: "center", width: "170", type: "input"},
						{field: "field8", name: "ç¨ŽçŽ‡", isshow: "T", align: "center", width: "50", type: "input"},
					],
					pagesize: 5,
					pagenum: 1,
					total: 0,
					tableData_old: [],
					tableData_new: [],
					tableData2: [],
					tableData: [],
					tableHeight2: 180,
					urlImg2: "./img/wushuju.png",
					isEditTableData:true,
					isWithinEditTableData:false,
					formData: {},
					isRefresh: true,
					selectFormField: {},
					popupByFieldsDialog: false,
					
					selectrow: {}
				},
				
				created() {
					this.tableData_new = dataRoot.database.dispatchInvoiceDetail;
					this.tableData_old = clone(dataRoot.database.dispatchInvoiceDetail);
					this.popupParames = clone(Root.popupParames);
				},
				
				mounted() {
					//this.initTableData();
					if (this.popupParames.data) {
						this.formData = clone(this.popupParames.data);
						let  result = [];
						if (this.formData.field1) {
							result = this.tableData_new.filter(item => {
								let bo = true;
								let k_val = this.formData.field1;
								let bo_ = item.field1.toLowerCase().indexOf(k_val.toLowerCase()) > -1;
								if (!bo_) {
									return false;
								}
								return bo;
							});
						}
						console.info(result)
						this.tableData2 = result;
					}
					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();
					},
				}
			});
		</script>
	</body>
</html>