{extend name="base"/}
{block name="resources"}
<link rel="stylesheet" href="__STATIC__/ext/video/video.css">
<link rel="stylesheet" type="text/css" href="__STATIC__/ext/searchable_select/searchable_select.css" />
<link rel="stylesheet" type="text/css" href="SHOP_CSS/goods_edit.css" />
<style type="text/css">
	.data_load {display: flex;flex-direction: column;align-items: center;margin-top:100px;}
	.data_load-img {width: 60px;height: 60px;}
	.data_load-img img {width: 100%;height: 100%;}
	.data_load-title {color: #333;font-size: 18px;margin-top: 15px;}
	.data_load-content {color: #333;font-size: 14px;margin-top: 20px;}
	.data_load-footer {color:#418afb;font-size: 14px;}
	.data_load-content span {display:inline-block;color: #ff4949;}
</style>
{/block}
{block name="main"}
<form class="layui-form ns-form">
<div class="layui-form">
	<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>第 1 步：提前在系统内维护好<a href="{:addon_url('shop/goodscategory/lists')}" class="ns-text-color">商品分类</a></li>
			</ul>
			<ul class="layui-colla-content layui-show">
				<li>第 2 步：按商品类型下载商品导入模板，录入商品信息。</li>
			</ul>
			<ul class="layui-colla-content layui-show">
				<li>第 3 步：设置商品发布渠道，上传文件进行导入。</li>
			</ul>
		</div>
	</div>
	<div class="ns-tab layui-tab layui-tab-brief" lay-filter="goods_tab">
		<div class="layui-tab-content">
			<div class="layui-tab-item layui-show">
				<div class="layui-card ns-card-common">
					<div class="layui-card-header">
						<span class="ns-card-title">商品导入</span><a href="" id="contine" style="display:none;"><span style="color:#155bd4">继续导入</span></a><a href="{:addon_url('shop/goods/importrecordlist')}" id="list" ><span style="color:#155bd4">导入历史</span></a>
					</div>
					<div class="layui-card-body">
						<div class="layui-card-body" id="import">

							<div class="layui-form-item">
								<label class="layui-form-label">商品类型配置：</label>
								<div class="layui-input-block">

									<ul>
										<li><input type="radio" lay-filter="encrypt" title="实物商品" class="type" name="type" value="1" checked><a class="ns-text-color" href="{:img('upload/default/goods_csv/goods.xls')}">下载模板</a>
										</li>
									</ul>
									<ul>
										<li><input type="radio" lay-filter="encrypt" title="虚拟商品" class="type" name="type" value="2"><a class="ns-text-color" href="{:img('upload/default/goods_csv/virtualgoods.xls')}">下载模板</a></li>
									</ul>
									<ul>
										<li><input type="radio" lay-filter="encrypt" title="电子卡密" class="type" name="type" value="3"><a class="ns-text-color" href="{:img('upload/default/goods_csv/virtualcard.xls')}">下载模板</a></li>
									</ul>
								</div>
							</div>
							<div class="layui-form-item goods-image-wrap" style="margin-top: 20px">
								<label class="layui-form-label">商品图片：</label>
								<div class="layui-input-block">
									<div>在导入前请先将商品图片上传到商品相册，<a href="{:addon_url('shop/album/lists')}" class="ns-text-color" target="_blank">去上传</a></div>
								</div>
							</div>
							<div class="layui-form-item" style="margin-top: 30px">
								<label class="layui-form-label">上传数据：</label>
								<div class="layui-input-block">
									<div class="upload-img-block">
										<div class="upload-img-box" id="xlsUpload">

											<div class="ns-upload-default">
												<img src="SHOP_IMG/upload_img.png" />
												<p>上传导入商品的模板</p>
											</div>

										</div>
									</div>
								</div>
							</div>
<!--							<div class="ns-word-aux" style="margin-top: 20px">模板填写和上传说明，可以查看<a href=""-->
<!--									style="color:#155bd4">商品导入帮助</a></div>-->
						</div>

						<!-- 商品导入成功 -->
						<div class="data_load" style="display: none"  id="success">
							<div class="data_load-img"><img src="SHOP_IMG/success.png" /></div>
							<div class="data_load-title">商品导入完成</div>
							<div class="data_load-content">成功导入<span class="success-count">0</span>条数据，导入失败<span class="error-count">0</span>条数据</div>
<!--							<div class="data_load-footer" style="cursor:pointer;"><span id="exportError" style="display:none" onclick="exportError();">下载失败记录</span></div>-->
						</div>
						<!-- 商品导入中 -->
<!--						 <div class="data_load" hidden>-->
<!--							<div class="data_load-img"><img src="SHOP_IMG/loding.png" /></div>-->
<!--							<div class="data_load-title">商品导入中</div>-->
<!--							<div class="data_load-content">商品数据批量导入中，预计不超过5分钟，请耐心等待</div>-->
<!--						</div>-->
					</div>
				</div>
			</div>
			<!-- 商品详情 -->
			<div class="layui-tab-item">
				<script type="text/javascript" charset="utf-8" src="__STATIC__/ext/ueditor/ueditor.config.js"></script>
				<script type="text/javascript" charset="utf-8" src="__STATIC__/ext/ueditor/ueditor.all.js"> </script>
				<script type="text/javascript" charset="utf-8" src="__STATIC__/ext/ueditor/lang/zh-cn/zh-cn.js">
				</script>
			</div>
		</div>
	</div>
<!--	<div class="fixed-btn">-->
<!--		<button class="layui-btn layui-btn-primary ns-border-color ns-text-color js-prev" lay-submit=""-->
<!--			lay-filter="prev">上一步</button>-->
<!--		<button class="layui-btn ns-bg-color js-save" lay-submit="" lay-filter="save">继续导入</button>-->
<!--	</div>-->
</div>
</form>
<!--商品主图列表-->
<script type="text/html" id="goodsImage">
{{# if(d.list.length){ }}
	{{# for(var i=0;i<d.list.length;i++){ }}
		<div class="item upload_img_square_item" data-index="{{i}}">
			<div class="img-wrap">
				<img src="{{ns.img(d.list[i])}}" layer-src>
			</div>
			<div class="operation">
				<i title="图片预览" class="iconfont iconreview js-preview"></i>
				<i title="删除图片" class="layui-icon layui-icon-delete js-delete" data-index="{{i}}"></i>
				<div class="replace_img" data-index="{{i}}">点击替换</div>
			</div>
		</div>
		{{# } }}
			{{# if(d.list.length < d.max){ }}
				<div class="item js-add-goods-image upload_img_square">+</div>
				{{# } }}
					{{# }else{ }}
						<div class="item js-add-goods-image upload_img_square">+</div>
						{{# } }}
</script>

{/block}
{block name="script"}
<script>
	layui.use(['form', 'upload'], function() {
		var form = layui.form,
			upload = layui.upload,
			type = 1;

		form.on('radio(encrypt)', function(data){
			type = data.value;
		});

		//商品导入
		var uploadInst = upload.render({
			elem: '#xlsUpload',
			url: ns.url("shop/goods/import"),
			data:{type:function () {
					return type
				}},
			field: 'xls',
			exts: 'xls',
			before: function(obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
				var index = layer.load(1, {
					shade: [0.1, '#fff'], //0.1透明度的白色背景
					time: 0
				});
			},
			done: function(res) {
				layer.closeAll();
				if (res.code >= 0) {
					$("#upload").attr("style","display:none;");//隐藏div
					$("#import").attr("style","display:none;");//隐藏div
					$("#contine").attr("style","display:flex;");//显示div
					$("#list").attr("style","display:none;");//显示div
					$("#success").attr("style","display:flex;");//显示div
					$(".success-count").text(res.data.success_count);
					$(".error-count").text(res.data.error_count);
					if (res.data.error_count > 0) {
						$("#exportError").attr("style","display:flex;");
					} else {
						$("#exportError").attr("style","display:none;");
					}

				} else {
					layer.msg(res.message);
				}

			}
		});

	});

</script>
<script src="__STATIC__/ext/drag-arrange.js"></script>
<script src="__STATIC__/ext/video/video.min.js"></script>
<script src="__STATIC__/ext/searchable_select/searchable_select.js"></script>
<!--<script src="SHOP_JS/goods_edit.js"></script>-->
<!--<script src="SHOP_JS/category_select.js"></script>-->
{/block}