{extend name="app/shop/view/base.html" /}
{block name="resources"}
<style>
	.package-wrap{margin-top:50px;display:flex;}
	.package-wrap .wrap{flex:1;border:1px solid #f1f1f1}
	.package-wrap .wrap:nth-child(2){margin-left:30px}
	.package-wrap .wrap .card-common{margin-top:0}
	.package-wrap .wrap .layui-card-header{padding:5px 20px}
	.weapp-info{text-align:center}
	.weapp-info .qrcode{width:130px;height:130px;margin:30px auto}
	.weapp-info dl{display:flex;line-height:30px}
	.weapp-info dl dd,.weapp-info dl dt{flex:1}
	.weapp-info dl dt{width:100px;text-align:right;color:#999}
	.weapp-info dl dd{text-align:left;padding-left:30px}
	.wrap .step-wrap .layui-timeline{padding-left:80px!important}
	.wrap .step-wrap .layui-timeline-title{font-size:14px;margin-bottom:5px}
	.step-wrap .layui-timeline-content p{font-size:13px}
	.step-wrap .layui-timeline-item:before{left:4px;background-color:unset;border-left:1px dashed #ccc}
	.edition-wrap{margin-top:20px}
	.edition-wrap .header{font-size:14px}
	.edition-list .edition-item{display:inline-block;width:auto;border:1px solid #ddd;padding:8px 30px;line-height:1;margin:15px 15px 0 0;border-radius:5px;cursor:pointer;text-align: center;}
	.edition-list .edition-item .name{color:#333}
	.edition-list .edition-item.active,.edition-list .edition-item:hover{border-color:#ff8143}
	.edition-list .edition-item.active .name,.edition-list .edition-item:hover .name{color:#ff8143}
	.edition-list .edition-item .version{margin-top:8px;font-size:12px;color:#999}
	.operation{margin-top:20px;display:flex}
	.operation .layui-btn{flex:1}
	.loading-layer .loading-img{margin:10px auto;display:block}
	.preview-layer .qrcode{width:100px;height:100px;margin:10px auto;display:block}
</style>
{/block}
{block name="main"}
<div class="layui-collapse tips">
	<div class="layui-colla-item">
		<h2 class="layui-colla-title">操作提示</h2>
		<ul class="layui-colla-content layui-show">
			   <li>选取对于程序上传</li>
		</ul>
	</div>
</div>
<div class="package-wrap">
	<div class="wrap">
		<div class="layui-card card-common card-brief">
			<div class="layui-card-header">
				<span class="card-title">小程序信息</span>
			</div>
			<div class="layui-card-body layui-field-box weapp-info">
				<img src="{:img($config.qrcode??'')}" class="qrcode">
				<dl>
					<dt>小程序名称</dt>
					<dd>{$config.weapp_name}</dd>
				</dl>
				<dl>
					<dt>小程序ID</dt>
					<dd>{$config.authorizer_appid}</dd>
				</dl>
				<dl>
					<dt>小程序原始ID</dt>
					<dd>{$config.user_name}</dd>
				</dl>
			</div>
		</div>
	</div>
	<div class="wrap">
		<div class="layui-card card-common card-brief">
			<div class="layui-card-header">
				<span class="card-title">小程序发布</span>
			</div>
			<div class="layui-card-body layui-field-box">
				<div class="step-wrap">
					<ul class="layui-timeline">
					    <li class="layui-timeline-item">
					        <i class="layui-icon layui-timeline-axis text-color">&#xe63f;</i>
					        <div class="layui-timeline-content layui-text">
					            <h3 class="layui-timeline-title">选择版本</h3>
					            <p>选择所需版本上传源码到小程序版本库</p>
					        </div>
					    </li>
					    <li class="layui-timeline-item">
					        <i class="layui-icon layui-timeline-axis text-color">&#xe63f;</i>
					        <div class="layui-timeline-content layui-text">
					            <h3 class="layui-timeline-title">提交审核版本</h3>
					            <p>上传成功，登陆小程序平台选择版本提交审核</p>
					        </div>
					    </li>
					    <li class="layui-timeline-item">
					        <i class="layui-icon layui-timeline-axis text-color">&#xe63f;</i>
					        <div class="layui-timeline-content layui-text">
					            <h3 class="layui-timeline-title">发布小程序</h3>
					            <p>审核通过，发布小程序</p>
					        </div>
					    </li>
					</ul>
				</div>
<!--				<div class="layui-form edition-wrap">-->
<!--					<div class="header">小程序直播插件</div>-->
<!--					<div class="layui-form-item">-->
<!--						<div class="layui-input-block">-->
<!--							<input type="radio" name="islive"   lay-filter="islive" value="yes" title="已开通" {if $is_live=="yes"} checked {/if}>-->
<!--							<input type="radio" name="islive"   lay-filter="islive" value="no" title="未开通" {if $is_live=="no"} checked {/if}>-->
<!--						</div>-->
<!--						<div class="word-aux">微信小程序官方直播插件,如你已开通选择已开通,如还未开通选择未开通(注：后期开通需要重新上传代码)</div>-->
<!--					</div>-->
<!--				</div>-->
				<div class="layui-form edition-wrap">
					<div class="header">小程序插件</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<input type="checkbox" name="isLive" lay-filter="checkbox-filter" title="小程序直播能力" lay-skin="tag" {if $is_live=="yes"} checked {/if}>
							<input type="checkbox" name="isCoupon" lay-filter="checkbox-filter" title="支付优惠券" lay-skin="tag" {if $isCoupon=="yes"} checked {/if}>
							<input type="checkbox" name="isB2cStore" lay-filter="checkbox-filter" title="B2C门店助手" lay-skin="tag">
							<!--<input type="checkbox" name="AAA" title="微信会员卡" lay-skin="tag">-->
						</div>
						<div class="word-aux">微信小程序官方依赖插件,如你已开通选择已开通,如还未开通选择未开通(注：后期开通需要重新上传代码)</div>
					</div>
				</div>

				<div class="layui-form edition-wrap">
					<div class="header">地理位置接口</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<input type="checkbox" name="getLocation" lay-filter="Location" title="获取地理位置" lay-skin="tag">
							<input type="checkbox" name="chooseAddress" lay-filter="Location" title="获取用户收货地址" lay-skin="tag">
<!--							<input type="checkbox" name="chooseLocation" lay-filter="Location" title="打开地图选择位置" lay-skin="tag">-->
<!--							<input type="radio" name="isLocation"  lay-filter="isLocation" value="yes" title="已开通"{if $is_location=="yes"} checked {/if}>-->
<!--							<input type="radio" name="isLocation"  lay-filter="isLocation" value="no" title="未开通" {if $is_location=="no"} checked {/if} >-->
						</div>
						<div class="word-aux">地理位置wx.getLocation接口是否开通,本接口用于社区团购团长选择, 门店自提将无法使用<a style="color: #00a0e9" href="https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html">查看详情</a></div>
					</div>
				</div>

				<div class="edition-wrap">
					<div class="header">选择版本</div>
					{notempty name="template_list"}
						<div class="edition-list">
							<div class="edition-item active" data-mark="{$template_list[0]['template_id']}" data-version="{$template_list[0]['user_version']}">
								<div class="name">{$template_list[0]['user_desc']}</div>
								<div class="version">{$template_list[0]['user_version']}</div>
							</div>
						</div>
						<div class="operation">
							<button class="layui-btn layui-btn-primary" onclick="preview()">获取体验版二维码</button>
							<button class="layui-btn bg-color" onclick="upload()">小程序上传</button>
						</div>
					{/notempty}
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/html" id="loading">
	<div class="loading-layer">
		<img src="SHOP_IMG/loading.gif" class="loading-img">
		<p>正在生成体验小程序，请耐心等待</p>
	</div>
</script>

<script type="text/html" id="upload">
	<div class="loading-layer">
		<img src="SHOP_IMG/loading.gif" class="loading-img">
		<p>正在上传小程序，请耐心等待</p>
	</div>
</script>

<script type="text/html" id="preview">
	<div class="preview-layer">
		<img src="{{ ns.img(d.pic_path) }}" class="qrcode">
		<p>请用手机微信扫描二维码进行体验</p>
	</div>
</script>
{/block}

{block name="script"}
<script type="text/javascript">
var laytpl,form,
		isLocation= '{$is_location}',
		formData = {
			isLive: '{$is_live}',
			isCoupon: '{$isCoupon}',
			isB2cStore: '{$isB2cStore}',
			getLocation: '{$isB2cStore}',
			chooseAddress: '{$isB2cStore}',
			chooseLocation: '{$isB2cStore}',
		},
	previewClick = false,
	uploadClick = false;
    layui.use(['form','laytpl'], function(){
  	laytpl = layui.laytpl;
	form = layui.form;
	form.render();
	form.on('checkbox(checkbox-filter)', function(data){
		let name = data.elem.name;
		let checked = data.elem.checked
		if(checked){
			formData[name]='yes';
		}else {
			formData[name]='no';
		}
		console.log(name,data.value)
	});
	form.on('radio(isLocation)', function(data){
		// isLocation=data.value;
	});
	form.on('checkbox(Location)', function(data){
		let name = data.elem.name;
		let checked = data.elem.checked
		console.log(name,checked)
		if(checked){
			formData[name]='yes';
		}else {
			formData[name]='no';
		}
	});
});

// 预览
function preview(){
	layer.open({
	  	type: 1,
	  	title: false,
	  	skin: 'weapp-preview',
	  	closeBtn: 1, //不显示关闭按钮
	  	anim: 0,
	  	shadeClose: false,
	  	content: $('#loading').html()
	});
	if (previewClick) return;
	previewClick = true;
	$.ajax({
        type: "post",
        url: "{:addon_url('wxoplatform://shop/weapp/getQrcode')}",
        dataType: "JSON",
        success: function (res) {
        	previewClick = false;
        	if (res.code < 0) {
        		layer.closeAll();
        		layer.msg(res.message);
        	} else {
        		laytpl($('#preview').html()).render(res.data, function(string){
			  		$('.weapp-preview .layui-layer-content').html(string)
			  	});
        	}
        }
    });
}
// 上传
function upload(){
	var mark = $('.edition-list .active').attr('data-mark'),
		version = $('.edition-list .active').attr('data-version');
	 if (mark == undefined || mark.length == 0) return;
	layer.open({
	  	type: 1,
	  	title: false,
	  	closeBtn: 0, //不显示关闭按钮
	  	anim: 0,
	  	shadeClose: false,
	  	content: $('#upload').html()
	});
	// if (uploadClick) return;
	uploadClick = true;
	$.ajax({
        type: "post",
        url: "{:addon_url('wxoplatform://shop/weapp/commit')}",
        dataType: "JSON",
        data: {
			...formData,
			isLocation: isLocation,
			template_id: mark,
			version: version
        },
        success: function (res) {
        	layer.closeAll();
    		layer.msg(res.message);
    		if (res.code >= 0) {
				setTimeout(function(){
					location.href = "{:addon_url('wxoplatform://shop/weapp/record')}";
				})
    		} else {
	        	uploadClick = false;
    		}
        }
    });
}
</script>
{/block}