<!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/page.js"></script>
		<script src="../../js/myelement.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" style="width: 400px; height: 490px;padding-right: 20px;">
					<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"style="height: 350px;">
						<!-- <el-upload action="https://jsonplaceholder.typicode.com/posts/" style="height: 100px;">
							<el-button size="small" type="primary">ç‚¹å‡»ä¸Šä¼ </el-button>
						</el-upload> -->
						<el-button type="default" @click="onPopupByUploadFile">ä¸Šä¼ é™„ä»¶</el-button>
						
						<div style="margin-top: 20px; height: 230px" align="center">
							<div v-if="!imgUrl" v-for="(item, index) in fileList" >
								<img :src="item.url" alt="å›¾" height="120px" style="float: left;"/>
							</div>
							<div v-if="imgUrl" >
								<img :src="imgUrl" alt="å›¾" height="230px" style="float: left;"/>
							</div>
						</div>
					</div>
					<div class="el-dialog__footer" >
					  <el-button type="default" @click="closeDialog">å…³ é—</el-button>
					  <el-button type="primary" @click="saveRowTable" >ä¿ å˜</el-button><!-- style="display:none;" -->
					</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 ListVue({
				el: "#vbody",
				data: {
					role: RootRole,
					formAttr: {
						istitle: false,
						title: "é™„ä»¶ä¿¡æ¯",
						columnnumber: 2,
						labelwidth: "100px",
						labelposition: "right",
						size: "medium",
						border: "0px solid #c6c6c600"
					},
					imgUrl: "",
					popupParames: "",
					fileList: [
						{name: "medicine1.jpeg",url: "../../../../img/sjwt1.jpg"},
						{name: "medicine2.jpeg",url: "../../../../img/sjwt2.jpg"},
						{name: "medicine3.jpeg",url: "../../../../img/sjwt3.jpg"},
					],
					revocationid: "",
					fileObj: null
				},
				
				created() {
					this.popupParames = clone(Root.popupParames);
				},
				mounted() {
					var me = this;
					if (this.popupParames.imgUrl) {
						this.imgUrl = clone(Root.popupParames.imgUrl);
					}
					if (this.popupParames.data && this.popupParames.data.id) {
						me.revocationid = me.popupParames.data.id;
						popupParames = me.popupParames;
						getDownloadImgURL(this.popupParames.data.file_id, function(result) {
							me.imgUrl = result.data.fileurl;
						});
					}
					
					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() {
						var me = this;
						if (this.popupParames.callback) {
							let obj = {
								row: this.fileObj
							}
							this.popupParames.callback(obj, function() {
								if (me.popupParames.totab) {
									Root.tab.removeItem(Root.tab.selected);
									Root.tab.open(me.popupParames.parentOption, false);
								} else {
									Root.hidePopup();
								}
							});
						} else {
							alert("è¯¥æŒ‰é”®äº‹ä»¶ç¼ºå¤±ï¼")
						}
					},
					handleChange(file, fileList) {
						this.fileList = fileList.slice(-4);
					},
					
					onServerInitData(data) {
						var me = this.data;
					},
					
					onPopupByUploadFile() {
						var me = this;
						
						var config = {
							totab: false,
							width: "1500px",
							icon: "icon-product",
							text: "é™„ä»¶ä¸Šä¼ ",
							id: "popupByUploadFile",
							url: "../tool/popup_uploadFile.html",
							data: {},
							delta: {filetypelist: [".png", ".jpg"]},
							callback: function(obj, callback) {
								me.fileObj = obj;
								
								getDownloadImgURL(obj.row[0].id, function(result) {
									me.imgUrl = result.data.fileurl;
								});
								if (callback) {
									callback();
								}
							}
						};
						this.doPopupByPublic(config);
					},
					
					doPopupByPublic(config) {
						if (config.totab) {
							if (config.url) {
								if (config.text.length > 4) {
									config.text = config.text.substr(0, 4) + "...";
								}
							}
							
							var callback_ = config.callback;
							var parames = {
								url: config.url,
								sceneCode: config.sceneCode,
								data: config.data,
								delta: config.delta,
								disabled: config.disabled,
								disabledone: config.disabledone,
								operationtype: config.operationtype,
								parentOption: window.top.tab.selected.option,
								callback: function(obj, callback) {
									if (callback_) {
										callback_(obj);
									}
									if (callback) {
										callback();
									}
								}
							};
							
							Root.popupParames = parames;
							
							window.top.tab.open(config);
						}
						else {
							this.doPopup(config);
						}
					},
					
				}
			});
		</script>
		
		<style>
			.el-input__inner{
				padding: 0 2px;
			}
		</style>
		
	</body>
</html>