{extend name="$base" /}
{block name="resources"}
<link rel="stylesheet" type="text/css" href="ADMIN_CSS/wap_bottom_type.css">
<script src="__STATIC__/js/ajax_file_upload.js" type="text/javascript"></script>
<script src="__STATIC__/js/file_upload.js" type="text/javascript"></script>
<style>
.custom-template {
	display: block;
    float: unset;
    height: unset;
	margin-left: 0;
    background: #fff;
    margin-top: 20px;
}
.pc-temp-img {
    background-size: 100%;
    padding-bottom: 470px;
    background-repeat: no-repeat;
    width: 1000px;
}
.ns-main article {
	width: 1000px;
}
</style>
{/block}
{block name="main"}
<div class="ns-main">
	<article class="" style=" ">
		<div class="cont categoty" style="">
			
			<div class="control-footer-list">
					<div class="control-edit text-color">
						<label>模版选择：</label>
						<label for="waptype1" class="radio inline normal">
							<i class="radio-common">
								<input type="radio" value="1" name="waptype" id="waptype1" />
							</i>
							<span>一级分类</span>
						</label>
						<label for="waptype2" class="radio inline normal">
							<i class="radio-common">
								<input type="radio" value="2" name="waptype" id="waptype2" />
							</i>
							<span>二级分类</span>
						</label>
						<label for="waptype3" class="radio inline normal">
							<i class="radio-common">
								<input type="radio" value="3" name="waptype" id="waptype3"/>
							</i>
							<span>三级分类</span>
						</label>
					</div>
				
				</div>
				
				<div class="control-edit text-color">
					<label>分类图：</label>
					<div class="wappicture">
						<div for="" class="wapstyleselect select-wap is-img selectwap" data-val="0" id="picture0">
							<span>无图模式</span>
						</div>
						<div for="" class="wapstyleselect select-wap" id="picture1" data-val="1">
							<span>有图模式</span>
						</div>
					</div>
			</div>
			
			</div>
			
	</article>
	
	<article class="custom-template">
		<div class="pc-temp-img"  style="">
		</div>
	</article>
	<div style="text-align:center;padding:10px;">
		<button class="btn-common btn-big js-save" onclick="save()">保存</button>
		<button class="btn-common-cancle btn-big" onclick="javascript:history.back(-1);">返回</button>
	</div>
</div>

 
<script>
var data_img = {
	'data-temp-1-0' : "ADMIN_IMG/goods/pccate1.png", 
	'data-temp-1-1' : "ADMIN_IMG/goods/pccate5.png", 
	'data-temp-2-1' : "ADMIN_IMG/goods/pccate3.png",
	'data-temp-2-0' : "ADMIN_IMG/goods/pccate2.png", 
	'data-temp-3-0' : "ADMIN_IMG/goods/pccate4.png", 
	'data-temp-3-1' : "ADMIN_IMG/goods/pcpicture.png"
}

var data = {
	'template' : 1,
	'is_img' : 0,
};
var new_data = {$info ? $info : '""'};
init();
function init() {
	$('.is-img.selectwap').removeClass('selected');
	if(new_data != '') {
		$('#waptype'+new_data['template']).parent().addClass("selected");
		$('#waptype'+new_data['template']).attr("checked", true);
		$('.is-img.selectwap').removeClass('selectwap');
		$('#picture'+new_data['is_img']).addClass("selectwap");
		category_img(new_data['template'], new_data['is_img']);
	}else {
		$('#waptype'+data['template']).parent().addClass("selected");
		$('#waptype'+data['template']).find('input').attr("checked", true);
		$('.is-img.selectwap').removeClass('selectwap');
		$('#picture'+new_data['is_img']).addClass("selectwap");
		category_img(data['template'], data['is_img']);
	}
}
$(".radio-common").click(function(){
	var radio = $(this).children("input");
	var temp_val = $('input[name="waptype"]:checked').val();
	var img_val = $('.wapstyleselect.select-wap.selectwap').attr('data-val');
	 
	data['template'] = temp_val;
	data['is_img'] = img_val;
	category_img(temp_val, img_val);
});



$('.select-wap').click(function(){
	var temp_val = $('input[name="waptype"]:checked').val();
	var img_val = $(this).attr('data-val');
	data['template'] = temp_val;
	data['is_img'] = img_val;
	category_img(temp_val, img_val);
	
	$(this).addClass('selectwap');
	$(this).siblings().removeClass('selectwap');
})

function category_img(temp_id, img_val) {
	var val = 'data-temp-'+temp_id+'-'+img_val;
	var img = data_img[val];
	$('.pc-temp-img').css("background-image","url("+img+")");
}

function save() {
	$.ajax({
		url : 'ADMIN_MAIN/Config/editPcClassifiedDisplayMode',
		type : 'post',
		data : {'data' : JSON.stringify(data)},
		dataType : 'JSON',
		success: function(res) {
			if(res.code > 0) {
				showTip(res.message,"success");
			}else {
				showTip(res.message,"error");
			}
		}
	})
}

</script>


{/block}