{php include wl_template('common/header');}
<style>
	h5{font-size: 14px;}
</style>
<ul class="nav nav-tabs">
	<li class="active"><a href="javascript:;">商品魔方</a></li>
</ul>
<div class="app-content">
	<div class="bs-callout bs-callout-danger" id="callout-glyphicons-empty-only">
		<h4>按照顺序,显示一张提即为图一，显示二张即为图二。</h4>
		<div class="bs-example bs-example-images" data-example-id="image-shapes">
			<div class="row">
			  <div class="col-md-2">
				<img style="margin-top: 20px;"  class="img-thumbnail"  src="{URL_WEB_RESOURCE}image/cube/1.png" data-holder-rendered="true">
				<div class="caption">
					<h5>一张图效果</h5>
				</div>
			  </div>
			  <div class="col-md-2">
				<img style="margin-top: 20px;"  class="img-thumbnail"  src="{URL_WEB_RESOURCE}image/cube/2.png" data-holder-rendered="true">
				<div class="caption">
					<h5>两张图效果</h5>
				</div>
			  </div>
			  <div class="col-md-2">
				<img style="margin-top: 20px;"  class="img-thumbnail"  src="{URL_WEB_RESOURCE}image/cube/3.png" data-holder-rendered="true">
				<div class="caption">
					<h5>三张图效果</h5>
				</div>
			  </div>
			  <div class="col-md-2">
				<img style="margin-top: 20px;" class="img-thumbnail"  src="{URL_WEB_RESOURCE}image/cube/4.png" data-holder-rendered="true">
				<div class="caption">
					<h5>四张图效果</h5>
				</div>
			  </div>
			  <div class="col-md-2">
				<img style="margin-top: 20px;" class="img-thumbnail"  src="{URL_WEB_RESOURCE}image/cube/5.png" data-holder-rendered="true">
				<div class="caption">
					<h5>五张图效果</h5>
				</div>
			  </div>
			  <div class="col-md-2">
				<img style="margin-top: 20px;" class="img-thumbnail"  src="{URL_WEB_RESOURCE}image/cube/6.png" data-holder-rendered="true">
				<div class="caption">
					<h5>六张图效果</h5>
				</div>
			  </div>
			</div>
		</div>
	</div>
	<div class="app-form">
		<form action="{php echo web_url('dashboard/cube/save')}" method="post">
			<div class="panel panel-default">
				<div class="app-table-list">
					<div class="table-responsive">
						<table class="table table-hover">
							<tbody id="param-items-level">
							{loop $cubes $key $cube}
								<tr>
									<td style="width: 8%;text-align: center;">
										<a href="javascript:;" class="fa fa-move" title="拖动调整此显示顺序"><i class="fa fa-arrows"></i></a>&nbsp;
									</td>
									<td style="width: 40%;">
										<div class="input-group img-item">
											<div class="input-group-addon">
												<img src="{php echo tomedia($cube['thumb'])}" style="height:16px;width:16px;" id="pimg-cude-{$key}"/>
											</div>
											<input type="text" class="form-control" name="cubes_thumbs[]" value="{$cube['thumb']}"  id="cimg-cude-{$key}"/>
											<div class="input-group-btn">
												<button type="button" class="btn btn-default" data-toggle="selectAttachment" data-input="#cimg-cude-{$key}" data-img="#pimg-cude-{$key}">选择图片</button>
											</div>
										</div>
									</td>
									<td style="width: 40%;">
										<div class="input-group form-group" style="margin: 0;">
											<input name="cubes_links[]" id="advlink_{$key}" type="text" readonly="readonly" class="form-control param_value" value="{$cube['link']}" placeholder="跳转链接"/>
											<span data-input="#advlink_{$key}" data-toggle="selectUrl" class="input-group-addon btn btn-default">选择链接</span>
										</div>
									</td>
									<td style="width: 12%;text-align: center;">
										<input class="js-switch" type="checkbox" name="on[]"  value="{$key}" {if $cube['on'] == 1}checked{/if} />
									</td>
								</tr>
							{/loop}
							</tbody>
						</table>
					</div>
					<div class="app-table-foot clearfix">
						<div class="pull-left">
                            <input type="submit" name="submit" value="保存" class="btn btn-primary col-lg-1 min-width" />
                            <input type="hidden" name="token" value="{$_W['token']}" />
						</div>
						<div class="pull-right">

						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>
<script type="text/javascript">
	$(function(){
		require(['jquery.ui'],function($){
			$("#param-items-level").sortable({handle:'.fa-move'});
		});
		bindEvents();
	});
	function bindEvents() {
		require(['jquery', 'util'], function ($, util) {
			$('.btn-select-pic').unbind('click').click(function () {
				var imgitem = $(this).closest('.img-item');
				util.image('', function (data) {
					imgitem.find('img').attr('src', data['url']);
					imgitem.find('input').val(data['attachment']);
				});
			});
		});
	}
</script>
{php include wl_template('common/footer');}