{extend name="base"/}
{block name="resources"}
<style>
	.keywords-item{position:relative;margin-bottom:10px}
	.keywords-item .layui-icon-close{font-size:12px;position:absolute;top:-8px;right:-8px;width:16px;height:16px;line-height:16px;text-align:center;color:#fff;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;background:rgba(0,0,0,.3);cursor:pointer}
	.examples {color: #ff8833; cursor: pointer;}
</style>
{/block}
{block name="main"}
<div class="layui-collapse ns-tips">
	<div class="layui-colla-item">
		<h2 class="layui-colla-title">操作提示</h2>
		<ul class="layui-colla-content layui-show">
			<li>热门搜索，将显示在前台搜索框下面，前台点击时直接作为关键词进行搜索   <a onclick="showDemo()" class="examples ns-text-color">查看示例</a></li>
		</ul>
	</div>
</div>
<div class="layui-form">
	<div class="layui-card ns-card-common ns-card-brief">
		<div class="layui-card-body">
			<div class="layui-form-item">
				<label class="layui-form-label">首页搜索的关键字：</label>
				<div class="layui-input-block keywords-block">
					{if !empty($hot_search_words.words_array)}
					{foreach $hot_search_words.words_array as $k => $v}
					<div class="layui-input-inline keywords-item">
						<input type="text" name="words[]" lay-verify="required" value="{$v}" placeholder="" autocomplete="off" class="layui-input ns-len-short">
						<i class="layui-icon layui-icon-close" ></i>
					</div>
					{/foreach}
					{else/}
					<div class="layui-input-inline keywords-item">
						<input type="text" name="words[]" lay-verify="required" value="" placeholder="" autocomplete="off" class="layui-input ns-len-short">
						<i class="layui-icon layui-icon-close" ></i>
					</div>
					{/if}
				</div>

			</div>
			<div class="layui-form-item">
				<div class="ns-word-aux">首页显示的搜索关键字,可以通过拖拽来调整顺序</div>
				<label class="layui-form-label"></label>
				<div class="layui-input-block">
					<div class="layui-input-inline">
						<a class="ns-text-color" href="javascript:void(0)" onclick="addKeywords()">添加</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="ns-form-row">
		<button class="layui-btn ns-bg-color" lay-submit lay-filter="save">保存</button>
	</div>
	
</div>
{/block}
{block name="script"}
<script src="__STATIC__/ext/drag-arrange.js"></script>
<script>
	layui.use('form', function() {
		var form = layui.form,repeat_flag=false;
		form.on('submit(save)', function(data) {
			if (repeat_flag) return;
			repeat_flag = true;

			$.ajax({
				url: ns.url("shop/goods/hotsearchwords"),
				data: data.field,
				dataType: 'JSON',
				type: 'POST',
				success: function(res) {
					repeat_flag = false;

					layer.msg(res.message);
					if (res.code == 0) {
						location.reload();
					}
				}
			});
		});


		$(".keywords-item").arrangeable({
			//拖拽结束后执行回调
			callback: function (e) {
			}
		});

		$('body').on('click', ".keywords-item .layui-icon-close",function () {
			$(this).parent().remove();
		});
	});

	function addKeywords(){
		var html = '<div class="layui-input-inline keywords-item"><input type="text" name="words[]" lay-verify="required" value="" placeholder=""  autocomplete="off" class="layui-input ns-len-short"><i class="layui-icon layui-icon-close" ></i></div>';
		$('.keywords-block').append(html);

		setTimeout(function () {
			$(".keywords-item").arrangeable({
				//拖拽结束后执行回调
				callback: function (e) {
				}
			});
		}, 1);
	}
	function showDemo(){
	    layer.open({
	        title: '查看示例',
	        type: 1,
	        area: ['500px', '660px'],
	        content: '<img style="margin: 20px 80px;" src="SHOP_IMG/hot_search.png">'
	    })
	}
</script>
{/block}