(function(mui, window, document, undefined) {
	mui.init();
	var get = function(id) {
		return document.getElementById(id);
	};
	var qsa = function(sel) {
		return [].slice.call(document.querySelectorAll(sel));
	};
	var ui = {
		question: get('question'),
		contact: get('contact'),
		imageList: get('image-list'),
		submit: get('submit')
	};
	ui.clearForm = function() {
		ui.question.value = '';
		ui.contact.value = '';
		ui.imageList.innerHTML = '';
		ui.newPlaceholder();
	};
	ui.getFileInputArray = function() {
		return [].slice.call(ui.imageList.querySelectorAll('input[type="file"]'));
	};
	ui.getFileInputIdArray = function() {
		var fileInputArray = ui.getFileInputArray();
		var idArray = [];
		fileInputArray.forEach(function(fileInput) {
			if(fileInput.value != '') {
				idArray.push(fileInput.getAttribute('id'));
			}
		});
		return idArray;
	};
	var imageIndexIdNum = 0;
	ui.newPlaceholder = function() {
		var fileInputArray = ui.getFileInputArray();
		if(fileInputArray &&
			fileInputArray.length > 0 &&
			fileInputArray[fileInputArray.length - 1].parentNode.classList.contains('space')) {
			return;
		}
		imageIndexIdNum++;
		var placeholder = document.createElement('div');
		placeholder.setAttribute('class', 'image-item space');
		var closeButton = document.createElement('div');
		closeButton.setAttribute('class', 'image-close');
		closeButton.innerHTML = 'X';
		closeButton.addEventListener('click', function(event) {
			event.stopPropagation();
			event.cancelBubble = true;
			setTimeout(function() {
				ui.imageList.removeChild(placeholder);
			}, 0);
			return false;
		}, false);
		var fileInput = document.createElement('input');
		fileInput.setAttribute('type', 'file');
		fileInput.setAttribute('class', 'image-box ');
		fileInput.setAttribute('accept', 'image/*');
		fileInput.setAttribute('id', 'image-' + imageIndexIdNum);

		fileInput.addEventListener('change', function(event) {
			var file = fileInput.files[0];
			var lengh = document.getElementsByClassName("image-item").length;
			if(lengh <6) {
				if(file) {
					var filename = $("#image-" + imageIndexIdNum).val();
					fileName = filename.split("\\")[2];
//					alert(fileName);
					var reader = new FileReader();
					reader.onload = function() {
						//处理 android 4.1 兼容问题
						var base64 = reader.result.split(',')[1];
						var dataUrl = 'data:image/png;base64,' + base64;
						var usercode = localStorage.getItem("user"); //获取本地存储
						//image-box 
						//
						placeholder.style.backgroundImage = 'url(' + dataUrl + ')';
						$.ajax({
							type: "post",
							url: huayi.config.callcenter_url + 'Index/UploadCL64',
							async: true,
							dataType: 'json',
							data: {
								dataurl: dataUrl,
								usercode: usercode,
								filename:fileName,
								token:localStorage.getItem('token') 
							},

							success: function(data) {
								if(data.state == "success") {
									fileInput.setAttribute('indexs', data.data.F_Id);
									mui.toast('上传成功'); 
									
								} else {
									mui.alert(data.message);
								}
							}
						});
					}

					reader.readAsDataURL(file);
					placeholder.classList.remove('space');
					ui.newPlaceholder();
				}
			}else{
				mui.toast('最多上传五张');
			}

		}, false);
		placeholder.appendChild(closeButton);
		placeholder.appendChild(fileInput);
		ui.imageList.appendChild(placeholder);
	};
	ui.newPlaceholder();
})(mui, window, document, undefined);