{extend name="adminblue/base" /}
{block name="resources"/}
<link rel="stylesheet" type="text/css" href="ADMIN_CSS/product.css">
<script type="text/javascript" src="__STATIC__/My97DatePicker/WdatePicker.js"></script>
<style type="text/css">
.tab-content{overflow: hidden;}
.cell i {display: block;}
.remodal-bg.with-red-theme.remodal-is-opening,.remodal-bg.with-red-theme.remodal-is-opened {filter: none;}
.remodal-overlay.with-red-theme {background-color: #f44336;}
.remodal.with-red-theme {background: #fff;}
input[type="radio"], input[type="checkbox"] {margin: -1px 5px 0;margin-left:0px;}
.edit-group{border-bottom: 1px solid #ebebeb;margin-bottom:10px;}
.edit-group label{font-weight:normal;}
.edit-group-title{height:15px;line-height:15px;width:140px;margin-top:3px;margin-bottom:3px;color:#126AE4;}
.edit-group-button{border-color: #3283fa;border: 1px solid #bbb;height: 26px;line-height: 24px;padding: 0 5px;}
.group-button-bg{background: #3283fa;color: #fff;}
.div-pro-view-name {width: 100%;min-height: 60px;}
i.hot,i.recommend,i.new{font-size:12px;margin-right:5px;font-style:normal;color:#fff;background-color:#E84C3D;border-radius:2px;padding:1px 2px;}
.icon-qrcode:before {content: "\f029";}
[class^="icon-"]:before, [class*=" icon-"]:before {text-decoration: inherit;display: inline-block;speak: none;}
[class^="icon-"], [class*=" icon-"] {font-family: FontAwesome;font-weight: normal;font-style: normal;text-decoration: inherit;-webkit-font-smoothing: antialiased;}
.goodsCategory{width: 159px;height: 300px;border: 1px solid #CCCCCC;position: absolute;z-index: 100;background: #fff;right: 0;display: none;overflow-y: auto;top: 31px;}
.goodsCategory::-webkit-scrollbar{width: 3px;} 
.goodsCategory::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);border-radius: 10px;background-color: #fff;}
.goodsCategory::-webkit-scrollbar-thumb{height: 20px;border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: #ccc;}
.goodsCategory ul{height: 280px;margin-top: -2px;margin-left: 0;}
.goodsCategory ul li{text-align: left;padding:0 10px;line-height: 30px;}
.goodsCategory ul li i{float: right;line-height: 30px;}
.goodsCategory ul li:hover{cursor: pointer;}
.goodsCategory ul li:hover,.goodsCategory ul li.selected{background: #0059d6;color: #fff;}
.goodsCategory ul li span{width: 120px;display: inline-block;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;vertical-align: middle;font-size:12px;}
.one{left: 0;}
.two{left: 161px;border-left:0;}
.three{left: 321px;width: 159px;border-left:0;}
.selectGoodsCategory{width: 218px;height: 45px;border:1px solid #CCCCCC;position: absolute;z-index: 100;left: 0;margin-top: 299px;border-collapse: collapse;background: #fff;display: none;}
.selectGoodsCategory a{display: block;height: 30px;width: 100px;text-align: center;color: #fff;line-height: 30px;margin:8px;background: #126AE4;text-decoration:none;}=
.table th, .table td {vertical-align: middle;}
.a-pro-view-img {float: left;}
.thumbnail-img {width: 60px;margin-right: 10px;height: 60px;}
#productTbody td {padding: 5px;font-size: 12px;}
.editGoodsIntroduction{display: inline-block;border:1px dashed #fff;padding: 0;width: 350px;line-height: 25px;max-height: 60px;overflow: hidden;text-overflow: ellipsis;height: 25px;}
.ns-main{margin-top: 0;}
</style>
{/block}
{block name="main"}
<div class="js-mask-category" style="display:none;background: rgba(0,0,0,0);position:fixed;width:100%;height:100%;top:0;left:0;right:0;bottom:0;z-index:90;"></div>
<table class="mytable">
	<tr>
		<th align="left">
			<a class="btn-common-delete" href="javascript:batchDelete()">批量删除</a>
			<a class="btn-common" href="javascript:batchRegainDelete()">批量恢复</a> 
			<input type='hidden' id='goods_type_ids'/>
		</th>
		<th style="position:relative;">
			商品分类：
			<div style="display: inline-block;position: relative;">
				<input type="text" placeholder="请选择商品分类" id="goodsCategoryOne" is_show="false" class="input-common">
				<div class="goodsCategory one">
					<ul>
						{volist name="oneGoodsCategory" id="vo"}
						<li class="js-category-one" category_id="{$vo.category_id}">
							<span>{$vo.category_name}</span>
							{if condition="$vo.is_parent eq 1"}
								<i class="fa fa-angle-right fa-lg"></i>
							{/if}
						</li>
						{/volist}
					</ul>
				</div>
				<div class="goodsCategory two" style="border-left:0;">
					<ul id="goodsCategoryTwo"></ul>
				</div>
				<div class="goodsCategory three">
					<ul id="goodsCategoryThree"></ul>
				</div>
				<div class="selectGoodsCategory">
					<a href="javascript:;" id="confirmSelect" style="float:right;">确认选择</a>
				</div>
			</div>
			<input type="hidden" id="category_id_1">
			<input type="hidden" id="category_id_2">
			<input type="hidden" id="category_id_3">
			商品名称：<input id="goods_name" class="input-medium input-common" type="text" value="{$search_info}" placeholder="要搜索的商品名称" >
			<input type="button" onclick="searchData()" value="搜索" class="btn-common"/>
			<!-- <div style="width:216px;display:inline-block;"></div> -->
		</th>
	</tr>
</table>
<div id="myTabContent" class="tab-content">
	<div class="tab-pane active">
		<table class="table-class" border="0">
			<colgroup>
				<col width="2%">
				<col width="25%">
				<col width="12%">
				<col width="9%">
				<col width="8%">
				<col width="7%">
				<col width="15%">
			</colgroup>
			<tbody>
				<tr class="table-title">
					<th>
						<i class="checkbox-common">
							<input onclick="CheckAll(this)" type="checkbox" id="chek_all">
						</i>
					</th>
					<th style="text-align: left;">商品名称</th>
					<th style="text-align: right;">价格（元）</td>
					<th style="text-align: right;">总库存</th>
					<th style="text-align: right;"> 销量</th>
					<th style="text-align: center;">排序</th>
					<th style="text-align: center;">操作</th>
				</tr>
			</tbody>
			<tbody id="productTbody" style="border: 0px;"></tbody>
		</table>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
function searchData(){
	LoadingInfo(1);
}

//隐藏商品分组
function hideEditGroup(){
	$("#editGroup").popover("hide");
}

function hideSetRecommend(){
	$("#setRecommend").popover("hide");
}

function LoadingInfo(page_index) {
	var start_date = $("#startDate").val();
	var end_date = $("#endDate").val();
	var state = $("#state").val();
	var goods_name =$("#goods_name").val();
	var category_id_1 = $("#category_id_1").val();
	var category_id_2 = $("#category_id_2").val();
	var category_id_3 = $("#category_id_3").val();
	$.ajax({
		type : "post",
		url : "{:__URL('ADMIN_MAIN/goods/recyclelist')}",
		data : {
			"page_index" : page_index,
			"page_size" : $("#showNumber").val(),
			"start_date":start_date,
			"end_date":end_date,
			"state":state,
			"goods_name":goods_name,
			"category_id_1" : category_id_1,
			"category_id_2" : category_id_2,
			"category_id_3" : category_id_3
		},
		success : function(data) {
			if (data["data"].length > 0) {
				$("#productTbody").empty();
				for (var i = 0; i < data["data"].length; i++) {
					var html = '';
					html += '<tr class="tr-title">';
						html += '<td class="td-'+ data["data"][i]["goods_id"]+'" style="border-bottom:0;">';
						html += '</td>';

						html += '<td colspan="9" style="border-bottom:0;">';
							html += '<div style="display: inline-block; width: 100%;font-size:12px;color:#666;" class="pro-code">';
								html += '<span>商家编码'+'：' + data["data"][i]["code"] + '</span>';
								html += '<span class="pro-code" style="margin-left:10px;">创建时间：'+timeStampTurnTime(data["data"][i]["create_time"]);
									html += '<span class="div-flag-style" style="display: inline-block;margin:0 20px;position:relative">';
										html += '<i class="icon-qrcode"style="background: none; color: #555; font-size: 20px; margin-right: 0;"></i>';
										html += '<div class="QRcode" style="display: none; position: absolute;width:110px;top:28px;left:0;"id="qrcode">';
											html += '<p><img src="'+ __IMG(data["data"][i]["QRcode"])+'" style="width:110px;"></p>';
										html += '</div>';
									html += '</span>';
								html += '</span>';
							html += '</div>';
						html += '</td>';
					html += '</tr>';

					html += '<tr>';
						html += '<td align="center">';
							html += '<i class="checkbox-common"><input value="' + data["data"][i]["goods_id"] + '" name="sub" data-state="'+data["data"][i]["state"]+'" type="checkbox"></i>';
						html += '</td>';
						html += '<td colspan="1">';
							html += '<div style="width:450px;">';
								html += '<a class="a-pro-view-img" href="'+__URL('SHOP_MAIN/goods/goodsinfo?goodsid='+data["data"][i]["goods_id"])+'" target="_blank" style="height:70px;line-height:70px;text-align:center;">';
									html += '<img class="thumbnail-img" src="'+__IMG(data["data"][i]["pic_cover_micro"])+'">';
								html += '</a>';
								html += '<div class="div-pro-view-name">';
// 									html += '<span class="thumbnail-name" title='+ data["data"][i]["goods_name"]+'">';
										html += '<div class="editGoodsIntroduction" ondblclick="editGoodsInfo(this)">';
											html += '<a target="_blank" style="word-break:break-all;" href="'+__URL('SHOP_MAIN/goods/goodsinfo?goodsid='+data["data"][i]["goods_id"])+'">' + data["data"][i]["goods_name"] + '</a>';
										html += '</div>';
// 									html += '</span>';
									html += '<br/>';

								html += '</div>';
							html += '</div>';
						html += '</td>';

						html += '<td style="text-align: right;">';
							html += '<div>';
								html += '<span class="price-numble"id="moreChangePrice'+ data["data"][i]["goods_id"]+'" style="color:#FF6600;">' + data["data"][i]["promotion_price"] + '</span>';
							html += '</div>';
						html += '</td>';

						html += '<td style="text-align: right;">';
							html += '<div class="cell">';
								html += '<span class="pro-stock" style="color: #666;" id="moreChangeStock'+ data["data"][i]["goods_id"] + '">' + data["data"][i]["stock"] + '</span>';
							html += '</div>';
						html += '</td>';

						html += '<td style="text-align: right;">';
							html += '<div class="cell">';
								html += '<span class="pro-stock" style="color: #666;" id="moreChangeStock'+ data["data"][i]["goods_id"]+'">' + data["data"][i]["real_sales"] + '</span>';
							html += '</div>';
						html += '</td>';

						html += '<td style="text-align: center;">';
							html += '<div class="cell">';
								html += '<span class="price-numble" style="color: #666;" >'+ data["data"][i]["sort"]+'</span>';
							html += '</div>';
						html += '</td>';

						html += '<td>';
							html += '<div class="bs-docs-example tooltip-demo"style="text-align: center;">';
								html += '<a href="javascript:deleteGoods(' + data["data"][i]["goods_id"] + ')" title="删除商品">删除</a>';

								html += '<a href="javascript:regainGoodsDeleted(' + data["data"][i]["goods_id"] + ');" title="恢复商品" style="padding-right:10px;">恢复</a>';
								
							html += '</div>';
						html += '</td>';
					html += '</tr>';
					$("#productTbody").append(html);
				}
			} else {
				var html = '<tr align="center"><td colspan="8">暂无符合条件的数据记录</td></tr>';
				$("#productTbody").html(html);
			}
			initPageData(data["page_count"],data['data'].length,data['total_count']);
			$("#pageNumber").html(pagenumShow(jumpNumber,$("#page_count").val(),{$pageshow}));
			code();
		}
	});
}

//二维码显示
function code(){
	$(".div-flag-style").mouseover(function(){
		$(this).children('.QRcode').show();
	});
	$(".div-flag-style").mouseout(function(){
		$(this).children('.QRcode').hide();
	});
} 

//全选
function CheckAll(event){
	var checked = event.checked;
	if(checked) $("#productTbody input[type = 'checkbox']").prop("checked",checked).parent().addClass("selected");
	else $("#productTbody input[type = 'checkbox']").prop("checked",checked).parent().removeClass("selected");
}

//批量删除回收站数据
function batchDelete() {
	var goods_ids= new Array();
	$("#productTbody input[type='checkbox']:checked").each(function() {
		if (!isNaN($(this).val())) {
			goods_ids.push($(this).val());
		}
	});
	if(goods_ids.length ==0){
		showTip("请选择需要操作的记录","warning");
		return false;
	}
	deleteGoods(goods_ids);
}

//单个删除回收站数据
function deleteGoods(goods_ids){
	$( "#dialog" ).dialog({
		buttons: {
			"确定": function() {
				$.ajax({
					type : "post",
					url : "{:__URL('ADMIN_MAIN/goods/emptydeletegoods')}",
					data : { "goods_ids" : goods_ids.toString() },
					dataType : "json",
					success : function(data) {
						if(data["code"] > 0 ){
							LoadingInfo(getCurrentIndex(goods_ids,'#productTbody','tr[class="tr-title"]'));
							showTip(data["message"],"success");
							$("#chek_all").prop("checked", false);
						}
					}
				});
				$(this).dialog('close');
			},
			"取消,#f5f5f5,#666": function() {
				$(this).dialog('close');
			},
		},
		contentText:"确定要从回收站彻底删除吗？",
	});
}

//批量恢复
function batchRegainDelete(){
	var goods_ids= new Array();
	$("#productTbody input[type='checkbox']:checked").each(function() {
		if (!isNaN($(this).val())) {
			goods_ids.push($(this).val());
		}
	});
	if(goods_ids.length ==0){
		showTip("请选择需要操作的记录","warning");
		return false;
	}
	regainGoodsDeleted(goods_ids);
}

//单个恢复已删除商品
function regainGoodsDeleted(goods_ids){
	$( "#dialog" ).dialog({
		buttons: {
			"确定": function() {
				$.ajax({
					type : "post",
					url : "{:__URL('ADMIN_MAIN/goods/regaingoodsdeleted')}",
					data : { "goods_ids" : goods_ids.toString() },
					dataType : "json",
					success : function(data) {
						if(data["code"] > 0 ){
							LoadingInfo(getCurrentIndex(goods_ids,'#productTbody','tr[class="tr-title"]'));
							showTip(data['message'],"success");
							$("#chek_all").prop("checked", false);
						}
					}
				});
				$(this).dialog('close');
			},
			"取消,#f5f5f5,#666": function() {
				$(this).dialog('close');
			},
		},
		contentText:"确定要恢复吗？",
	});
}

$("#goodsCategoryOne").click(function(){
	var isShow = $("#goodsCategoryOne").attr('is_show');
	if(isShow == "false"){
		$(".one").show();
		$(".selectGoodsCategory").css({
			'width' : 159,
			'right' : 530
		});
		$(".selectGoodsCategory").show();
		$("#goodsCategoryOne").attr('is_show','true');
		$(".js-mask-category").show();
	}else{
		$(".one").hide();
		$(".two").hide();
		$(".three").hide();
		$(".selectGoodsCategory").css({
			'width' : 159,
			'right' : 530
		});
		$(".selectGoodsCategory").hide();
		$("#goodsCategoryOne").attr('is_show','false');
	}
})

$(".js-mask-category").click(function(){
	$(".one").hide();
	$(".selectGoodsCategory").hide();
	$(".two").hide();
	$(".three").hide();
	$("#goodsCategoryOne").attr('is_show', 'false');
	$(this).hide();
})

$(".js-category-one").click(function(){
	parentId = $(this).attr("category_id");
	category_name = $(this).text();
	$(".one ul li").not($(this)).removeClass("selected");
	$(this).addClass("selected");
	$("#goodsCategoryOne").val($.trim(category_name)+">");
	$("#category_id_1").val(parentId);
	$("#category_id_2").val('');
	$("#category_id_3").val('');
	$.ajax({
		type : 'post',
		url : "{:__URL('ADMIN_MAIN/goods/getcategorybyparentajax')}",
		data : {"parentId":parentId},
		success : function(data){
			if(data.length>0){
				var html = '';
				for (var i = 0; i < data.length; i++) {
					html += '<li class="js-category-two" category_id="'+data[i]['category_id']+'">'+data[i]['category_name'];
						if(data[i]['is_parent'] == 1){
							html += '<i class="fa fa-angle-right fa-lg"></i>';
						}
						html += '</li>';
					}
				$("#goodsCategoryTwo").html(html);
				$(".two").show();
				$(".selectGoodsCategory").css({
					'width' : 319,
					'right' : 311
				});
			}else{
				$(".one").hide();
				$(".two").hide();
				$(".js-mask-category").hide();
				$(".selectGoodsCategory").hide();
				$("#goodsCategoryOne").attr('is_show', 'false');
			}
			$(".three").hide();
		}
	});
	return false;
});

$(".js-category-two").live("click",function(event){
	var parentId = $(this).attr("category_id");
	var category_name = $(this).text();
	$(".two ul li").not($(this)).removeClass("selected");
	$(this).addClass("selected");
	var goodsCategoryOne = $("#goodsCategoryOne").val();
	$("#goodsCategoryOne").val(goodsCategoryOne+''+category_name+'>');
	$("#category_id_2").val(parentId);
	$("#category_id_3").val('');
	$.ajax({
		type : 'post',
		url : "{:__URL('ADMIN_MAIN/goods/getcategorybyparentajax')}",
		data : {"parentId":parentId},
		success : function(data){
			if(data.length>0){
				var html = '';
				for (var i = 0; i < data.length; i++) {
					html += '<li onclick="goodsCategoryThree(this);" category_id="'+data[i]['category_id']+'">'+data[i]['category_name']+'<i class="fa fa-angle-right fa-lg"></i></li>';
				}
				$("#goodsCategoryThree").html(html);
				$(".three").show();
				$(".selectGoodsCategory").css({
					'width' : 479,
					'right' : 112
				});
			}else{
				$(".one").hide();
				$(".two").hide();
				$(".three").hide();
				$(".selectGoodsCategory").hide();
				$(".js-mask-category").hide();
				$("#goodsCategoryOne").attr('is_show', 'false');
			}
		}
	})
	event.stopPropagation();
});

function goodsCategoryThree(obj){
	var parentId = $(obj).attr("category_id");
	var category_name = $(obj).text();
	$(".three ul li").not($(obj)).removeClass("selected");
	$(obj).addClass("selected");
	var goodsCategoryOne = $("#goodsCategoryOne").val();
	$("#goodsCategoryOne").val(goodsCategoryOne+''+category_name);
	$("#category_id_3").val(parentId);
	$(".one").hide();
	$(".two").hide();
	$(".three").hide();
	$(".selectGoodsCategory").hide();
	$(".selectGoodsCategory").css({
		'width' : 218,
		'right' : 530
	});
	$(".js-mask-category").hide();
	$("#goodsCategoryOne").attr('is_show','false');
}

$("#confirmSelect").click(function(){
	$(".one").hide();
	$(".two").hide();
	$(".three").hide();
	$(".selectGoodsCategory").hide();
	$(".selectGoodsCategory").css({
		'width' : 218,
		'right' : 530
	});
})
</script>
{/block}