{extend name="admin/base" /}
{block name="resources"/}
<style type="text/css">
dd {
	margin-left: 0px;
}

#albumList li:hover {
	background-color: rgb(230, 230, 230);
}
#albumList li:hover .date {
	display:none;
}
#albumList li:hover .buttons {
	display: block;
}
.input-file{
	position: absolute;
	top: -10px !important;
	right: 9px !important;
	height: 26px !important;
	width: 94px !important;
	filter: alpha(opacity : 0) !important; 
	opacity: 0 !important;
	line-height:auto;
}
</style>
{/block} {block name="right_tab"}
	<li>
		<a id="open_uploader" style="right: 100px; position: static;" class="ncsc-btn ncsc-btn-acidblue" >
		<i class="fa fa-cloud-upload" ></i>上传图片
		</a>
		<input accept="image/*"  style="top:-12px !important; width:89px !important;right:10px !important;height: 30px !important;" type="file" id="fileupload" hidefocus="true" size="1" class="input-file" name="file_upload" multiple="multiple"/>	
	</li>

{/block} {block name="main"}
<input type="hidden" id="album_id" value="{$album_id}" />
<div style="clear: both;"></div>
<dl class="ncsc-album-intro">
	<dt class="album-name">{$album_name}</dt>
	<dd class="album-covers">
<!-- 		<i class="icon-picture"></i> -->
		<img src="ADMIN_IMG/album/album_cover_default.png" id="album_cover" >
	</dd>
	<dd class="album-info"></dd>
</dl>
<table class="search-form">
	<tbody>
		<tr >
			<th style="width: 70px;">批量处理</th>
			<td>
				<a href="JavaScript:void(0);" class="ncsc-btn-mini" onclick="checkAll()">全选</a>
				<a href="JavaScript:void(0);" class="ncsc-btn-mini" onclick="uncheckAll()">取消</a>
				<a href="JavaScript:void(0);" class="ncsc-btn-mini" onclick="switchAll()">反选</a>
				<a href="JavaScript:void(0);" class="ncsc-btn-mini" onclick="submit_form('del')">删除</a>
				<!-- <a
				href="JavaScript:void(0);" class="ncsc-btn-mini" id="img_move"
				onclick="submit_form('del')"><i class="icon-move"></i>转移相册</a> <a
				href="JavaScript:void(0);" class="ncsc-btn-mini"
				onclick="submit_form('watermark')"><i class=" icon-paste"></i>添加水印</a> -->
				<dd id="batchClass" style="display: none;">
					<span>选择相册：</span> <select name="cid" id="cid"
						style="width: 100px;">
						<option value="2" style="width: 80px;">个梵蒂冈</option>
					</select> <input type="button" onclick="submit_form('move')" value="开始转移">
				</dd></td>
			
		</tr>
	</tbody>
</table>
<div class="ncsc-picture-list">
	<div class="alert alert-info">
		<strong>注：在使用‘替换上传’功能时，请保持图片的扩展名与被替换图片相同。</strong>
	</div>
	<ul id="albumList" style="border-top: 1px solid #E6E6E6;"></ul>
</div>

<input type="hidden" value="UPLOAD" id="op"/>
<script src="ADMIN_JS/ajax_file_upload.js" type="text/javascript"></script>
<script src="__STATIC__/js/file_upload.js" type="text/javascript"></script>
{include file="admin/System/uploadAlbumImg"/}
{/block} {block name="script"}

<script type="text/javascript">

	//查询用户列表
	function LoadingInfo(page_index) {
		var album_id = $("#album_id").val();
		$.ajax({
			type : "post",
			url : "ADMIN_MAIN/System/albumPictureList",
			async : true,
			data : {
				"page_index" : page_index,
				"page_size" : $("#showNumber").val(),
				"album_id" : album_id
			},
			success : function(data) {
				var html = '';
				if (data["data"].length > 0) {
					for (var i = 0; i < data["data"].length; i++) {
						if(i == 0){
							$("#album_cover").attr("src",'__ROOT__/'+data["data"][i]["pic_cover"]);
						}
						if(i==0||i%5==0){
							html += '<li style="opacity: 1;border-width:0 1px 1px 1px;"><dl><dt><div class="picture"><a href="JavaScript:void(0);"> <img id="img_'+data["data"][i]["pic_id"]+'" src="__ROOT__/'+data["data"][i]["pic_cover"]+'"></a></div>';
						}else{
							html += '<li style="opacity: 1;border-width:0 1px 1px 0;"><dl><dt><div class="picture"><a href="JavaScript:void(0);"> <img id="img_'+data["data"][i]["pic_id"]+'" src="__ROOT__/'+data["data"][i]["pic_cover"]+'"></a></div>';
						}
						html += '<input id="C'+data["data"][i]["pic_id"]+'" name="id[]" value="'+data["data"][i]["pic_id"]+'" type="checkbox" class="checkbox">';
						html += '<input id="' + data["data"][i]["pic_id"] + '" class="editInput1" readonly="" ondblclick="$(this).unbind();_focus($(this));" value="'+data["data"][i]["pic_name"]+'" title="双击名称可以进行编辑" style="cursor:pointer;">';
						html += '<span ondblclick="_focus($(this).prev());" title="双击名称可以进行编辑"><i class="icon-pencil"></i></span></dt><dd class="date"><p>上传时间：'
								+ data["data"][i]["upload_time"]
								+ '</p><p>原图尺寸：'
								+ data["data"][i]["pic_size"]
								+ '</p></dd>';
						html += '<dd class="buttons"><div class="upload-btn"><a href="javascript:void(0);"> <span>';
						html += '<input accept="image/*"  type="file" name="file_upload" id="file_'+data["data"][i]["pic_id"]+'" class="input-file" size="1" data-pic_id = "'+data["data"][i]["pic_id"]+'" onchange="change_photo(this);"></span>';
						html += '<div class="upload-button">替换上传</div><input id="submit_button" style="display:none" type="button" value="" onclick="submit_form($(this))"></a></div>';
						html += '<a href="JavaScript:void(0);" nc_type="dialog" dialog_title="转移相册" uri="rfghfdg"onclick="changeAlbumClassBox('+ data["data"][i]["album_id"]
							+ ','+ data["data"][i]["pic_id"]+ ')">转移相册</a> <a href="JavaScript:void(0);" onclick="changeAlbumClassCover('
								+ data["data"][i]["pic_id"]
								+ ')">设为封面</a> <a href="javascript:void(0)" onclick="deletePicture('+data["data"][i]["pic_id"]+')" >删除图片</a> </dd></dl></li>';
// 								onclick="deletePicture('
// 									+ data["data"][i]["pic_id"]
// 									+ ')"
					}
				} else {
					html += '暂无符合条件的数据记录';
				}
				$("#albumList").html(html);
				initPageData(data["page_count"],data['data'].length,data['total_count']);
				$("#pageNumber").html(pagenumShow(jumpNumber,$("#page_count").val(),{$pageshow}));
			}
		});
}
	//全选
	function checkAll() {
		$('#batchClass').hide();
		$('input[type="checkbox"]').each(function() {
			$(this).attr('checked', true);
		});
	}
	// 取消
	function uncheckAll() {
		$('#batchClass').hide();
		$('input[type="checkbox"]').each(function() {
			$(this).attr('checked', false);
		});
	}
	// 反选
	function switchAll() {
		$('#batchClass').hide();
		$('input[type="checkbox"]').each(function() {
			$(this).attr('checked', !$(this).attr('checked'));
		});
	}

	/**
	 * 批量操作
	 */
	function submit_form(type) {
		if (type != 'move') {
			$('#batchClass').hide();
		}
		var id = '';
		$('input[type=checkbox]:checked').each(function() {
			if (!isNaN($(this).val())) {
				id = $(this).val() + "," + id;
			}
		});
		if (id == '') {
			$( "#dialog" ).dialog({				
	            buttons: {
	                "确定,#e57373": function() {
	                    $(this).dialog('close');
	                }
	            },
	            contentText:"请选择图片"
	        });
			return false;
		} else {
			id = id.substring(0, id.length - 1);
		}
		if (type == 'del') {
			deletePicture(id);
		}
		
	}

	/**
	 * 删除图片
	 */
	function deletePicture(pic_id_array) {
		$( "#dialog" ).dialog({				
            buttons: {
                "确定": function() {
                    $(this).dialog('close');
                    $.ajax({
    					type : "post",
    					url : "ADMIN_MAIN/System/deletePicture",
    					async : true,
    					data : {
    						"pic_id_array" : pic_id_array
    					},
    					success : function(data) {
    						/* if (data) {
    							location.href = 'ADMIN_MAIN/System/albumPictureList?album_id={$album_id}&&album_name={$album_name}';
    						} */
    						if (data['code'] > 0) {
    							LoadingInfo(getCurrentIndex(pic_id_array,'#albumList'));
    							$( "#dialog" ).dialog({
    					            buttons: {
    					                "确定": function() {
    					                    $(this).dialog('close');
    					                }
    					            },
    					            contentText:data["message"],
    					      		time:3
    					        });
    						}else{
    							$( "#dialog" ).dialog({
    					            buttons: {
    					                "确定,#e57373": function() {
    					                    $(this).dialog('close');
    					                }
    					            },
    					            contentText:"该图片正在商品中使用，不可被删除"
    					        });
    						}	
    					}
    				})
                },
                "取消,#e57373":function() {
                	$(this).dialog('close');
                }
            },
            contentText:"您确定进行该操作吗?<br/>注意：使用中的图片将不会删除"
        });
		/* if (!confirm('您确定进行该操作吗?\n注意：使用中的图片也将被删除')) {
			return false;
		} */
		
	}
	/**
	 *图片上传
	 */
	function imgUpload(event) {
		var fileid = "uploadImg";
		var album_id = $("#album_id").val();
		var data = {
				"album_id" : album_id,
				"type" : "1,2,3,4",
				'file_path' : UPLOADGOODS
			};

		uploadFile(fileid,data,function(res){
			if(res.code>0){
				showTip(res.message,"success");
				LoadingInfo(getCurrentIndex(album_id,'#albumList'));
			}else{
				showTip(res.error,"success");
			}
		});
	}
	/**
	 *
	 */
	function addImgBox() {
		if ($("#uploader").is(":hidden")) {
			$("#uploader").show();
		} else {
			$("#uploader").hide();
		}
	}
	/**
	*替换上传
	*/
	function change_photo(event){
		var fileid = $(event).attr("id");
		var pic_id = $(event).data("pic_id");
		var album_id = Number($("#album_id").val());
		var data = {
				"album_id" : album_id,
				"type" : "1,2,3,4",
				"pic_id":pic_id,
				'file_path' : UPLOADGOODS
			};

		uploadFile(fileid,data,function(res){
			if(res.code>0){
				LoadingInfo(getCurrentIndex(album_id,'#albumList'));
				showTip(res.message,"success");
			}else{
				showTip(res.error,"success");
			}
		});
	}
	//控制图片名称input焦点可编辑
	function _focus(o){
		var name;
	        obj = o;
	        name=obj.val();
	        obj.removeAttr("readonly");
	        obj.attr('class','editInput2');
	        obj.select();
	        obj.blur(function(){
				if(name != obj.val()){
	               _save(this);
				}else{
					obj.attr('class','editInput1');
					obj.attr('readonly','readonly');
				}
	        });
	}
	function _save(obj){
		var pic_id = obj.id;
		var pic_name = obj.value;
		$.ajax({
			type : "post",
			url : "ADMIN_MAIN/System/modifyAlbumPictureName",
			async : true,
			data : {
				"pic_id" : pic_id,
				"pic_name":pic_name
			},
			success : function(data) {
				if (data["code"] > 0) {
					LoadingInfo(1);
					$( "#dialog" ).dialog({
			            buttons: {
			                "确定,#e57373": function() {
			                    $(this).dialog('close');
			                }
			            },
			            contentText:data["message"],
			      		time:3,
			        });
				}else{
					$( "#dialog" ).dialog({
			            buttons: {
			                "确定,#e57373": function() {
			                    $(this).dialog('close');
			                }
			            },
			            contentText:data["message"]
			        });
				}	
				/* if (data == 1) {
					location.reload();
				} */
			}
		}) 
	}
	function changeAlbumClassBox(album_id,pic_id){
		$('#change_album_class').modal('show');
		$("#change_album_id").val(album_id);
		$("#change_pic_id").val(pic_id);
	}
	function changeAlbumClass(){
		var pic_id = $("#change_pic_id").val();
		var album_id = $("#change_album_id").val();
		$.ajax({
			type : "post",
			url : "ADMIN_MAIN/System/modifyAlbumPictureClass",
			async : true,
			data : {
				"pic_id" : pic_id,
				"album_id":album_id
			},
			success : function(data) {	
				if (data["code"] > 0) {
					$('#change_album_class').modal('hide');
					LoadingInfo(1);
					$( "#dialog" ).dialog({				
			            buttons: {
			                "确定,#66BB6A": function() {
			                    $(this).dialog('close');
			                }
			            },
			            contentText:data["message"],
			      		time:3,
			        });
				}else{
					$( "#dialog" ).dialog({
			            buttons: {
			                "确定,#66BB6A": function() {
			                    $(this).dialog('close');
			                }
			            },
			            contentText:data["message"]
			        });
				}	
				/* if (data == 1) {
					location.reload();
				} */
			}
		}) 
	}
	function changeAlbumClassCover(pic_id){
		var album_id = $("#album_id").val();
		$.ajax({
			type : "post",
			url : "ADMIN_MAIN/System/modifyAlbumClassCover",
			async : true,
			data : {
				"pic_id" : pic_id,
				"album_id":album_id
			},
			success : function(data) {	
				if (data["code"] > 0) {
					$( "#dialog" ).dialog({
			            buttons: {
			                "确定,#66BB6A": function() {
			                    $(this).dialog('close');
			                }
			            },
			            contentText:data["message"],
			      		time:3,
			        });
				}else{
					$( "#dialog" ).dialog({
			            buttons: {
			                "确定,#66BB6A": function() {
			                    $(this).dialog('close');
			                }
			            },
			            contentText:data["message"]
			        });
				}	
			}
		}) 
	}
</script>
<!-- 图片更换相册  -->
<div class="modal fade hide" id="change_album_class" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">相册创建</h4>
			</div>
			<div class="modal-body">
				<div class="dislog-style">
					<input type="hidden" id="change_pic_id" value="" />
					<ul>
						<li>
							<span>选择相册：</span>  
							<select name="album_id" id="change_album_id" class="select"
								style="width: 90px;margin-bottom:0px;"> {foreach $album_list as $vo} {if
								condition="$vo['is_default'] eq '1'"}
								<option value="{$vo.album_id}" class="w80" selected>{$vo.album_name}</option>
								{else /}
								<option value="{$vo.album_id}" class="w80">{$vo.album_name}</option>
								{/if} {/foreach}
							</select>
						</li>
					</ul>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" onclick="changeAlbumClass();">修改</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			</div>
		</div>
	</div>
</div>
{/block}