<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<?php $shoname_name = D('Home/Front')->get_config_by_name('shoname'); ?>
	<title><?php echo $shoname; ?></title>
	<link rel="shortcut icon" href="" />
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
	<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
	<!--[if lt IE 9]>
	<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
	<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->

	<link href="./resource/css/bootstrap.min.css?v=201903260001" rel="stylesheet">
	<link href="./resource/css/common.css?v=201903260001" rel="stylesheet">
	<script type="text/javascript">
		window.sysinfo = {
            <?php if (!empty($_W['uniacid']) ){ ?>'uniacid': '{$_W['uniacid']}',<?php } ?>
            <?php if( !empty($_W['acid'])  ){ ?>'acid': '{$_W['acid']}',<?php } ?>
            <?php if (!empty($_W['openid']) ) { ?>'openid': '{$_W['openid']}',<?php } ?>
            <?php if( !empty($_W['uid']) ) {  ?>'uid': '{$_W['uid']}',<?php } ?>
            'isfounder': <?php if (!empty($_W['isfounder']) ) { ?>1<?php  }else{  ?>0<?php } ?>,
            'siteroot': '{$_W['siteroot']}',
            'siteurl': '{$_W['siteurl']}',
            'attachurl': '{$_W['attachurl']}',
            'attachurl_local': '{$_W['attachurl_local']}',
            'attachurl_remote': '{$_W['attachurl_remote']}',
            'module' : {'url' : '<?php if( defined('MODULE_URL') ) { ?>{MODULE_URL}<?php } ?>', 'name' : '<?php if (defined('IN_MODULE') ) { ?>{IN_MODULE}<?php } ?>'},
            'cookie' : {'pre': ''},
            'account' : {:json_encode($_W['account'])},
        };
	</script>

	<script type="text/javascript" src="./resource/js/lib/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="/static/js/diy/vue.min.js"></script>
	<script src="/static/js/diy/ddsort.js"></script>

	<script>
		var random = Math.random();
		document.write('<link href="/static/css/diy/shopdiy.css?v=' + random + '" rel="stylesheet" type="text/css"/>');
	</script>
	<script>
		var random = Math.random();
		document.write('<link href="/static/js/diy/color_picker/css/colorpicker.css?v=' + random + '" rel="stylesheet" type="text/css"/>');
	</script>


	<script type="text/javascript" src="./resource/js/lib/bootstrap.min.js"></script>
	<script type="text/javascript" src="./resource/js/app/util.js?v=201903260001"></script>
	<script type="text/javascript" src="./resource/js/app/common.min.js?v=201903260001"></script>
	<script type="text/javascript" src="./resource/js/require.js?v=201903260001"></script>
	<script type="text/javascript" src="./resource/js/lib/jquery.nice-select.js?v=201903260001"></script>
	<link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
	<link href="/static/css/snailfish.css" rel="stylesheet">
	<script>
		//初始化高度
		$(function () {
			var lf_height = $(document).height() - $('#modify-view').offset().top - 28;
			$('#modify-view').css('height', lf_height + 'px');
			$('.all_component_list').css('height', lf_height + 'px');
		})
	</script>
</head>

<body layadmin-themealias="default">

	<div class="layui-fluid">
		<div class="layui-card">
			<div class="layui-card-body">
				<!-- begin modify -->
				<div id="modify-view">
					<!-- left component begin -->
					<div class="all_component_list">
						<div class="componnet_list_box">
							<foreach name="diyview" item="vo" key="k">
								<div class="component_title" data-index="{$k}">
									<img src="/static/images/diy/down.png">{$vo.type_name}
								</div>
								<ul data-index="{$k}">
									<if condition="$vo['type'] == 'SYSTEM' && $name != 'DIYVIEW_GOODS_CATEGORY'">
										<!-- <li title="弹出广告" v-on:click='addSzyComponent("popadv")'>
											<img src="/static/images/diy/ad.png">
											<span>弹出广告</span>
										</li> -->
									</if>
									<foreach name="vo.list" item="li" key="li_k">
										<li 
											title="{$li.title}" 
											<if condition="$li.value"> 
											v-on:click='addSzyComponent({$li.value},{ controller: "{$li.controller}", name : "{$li.name}", title : "{$li.title}", max_count : {$li.max_count}, addon_name : "{$li.addon_name}", controller : "{$li.controller}", is_delete : "{$li.is_delete}" })'
											v-bind:class="{ 'disabled' : !checkComponentIsAdd('{$li.name}',{$li.max_count}) }" 
											<else/>class="disabled"</if>
										>
											<img src="{$li.icon}" data-icon="{$li.icon}" data-icon-selected="{$li.icon_selected}" >
											<span>{$li.title}</span>
										</li>
									</foreach>
								</ul>
							</foreach>
						</div>
					</div>
					<!-- left component end -->
					<!-- center component begin -->
					<div class="preview-box">
						<div class="preview-div">
							<div class="preview-screen">
								<button class="layui-btn layui-btn-primary position-page-btn"
									v-on:click="changeCurrentIndex(-99)">页面设置</button>
									<div class="screen_center_wrap">
										<div class="view-wrap" id="viewWrap">
											<div class="screen_head">
												<div class="preview-head_div"
													v-bind:style="{ backgroundColor : global.topNavColor,color:global.textNavColor}">
													<div class="search">
														<span v-bind:style="{ textAlign:global.textImgPosLink}">{{global.title}}</span>
													</div>
												</div>

												<!-- 全局设置项目 begin -->
												<div v-bind:class="{selected : currentIndex==-99}" v-bind:data-sort="-99"
													style="display:none;" v-show="data.length==0 || currentIndex==-99">
													<div class="edit-attribute">
														<div class="attr-wrap">
															<div class="restore-wrap">
																<h2 class="attr-title">页面设置</h2>
																<div class="layui-form-item">
																	<label class="layui-form-label sm">页面名称</label>
																	<div class="layui-input-block">
																		<input type="text" v-model="global.title"
																			placeholder="请输入页面名称" class="layui-input"
																			maxlength="15">
																	</div>
																</div>

																<div class="layui-form-item">
																	<label class="layui-form-label sm">首页展示</label>
																	<div class="layui-input-block">
																		<div class="flex_fill">
																			<div v-on:click="global.openDiyPage=0" v-bind:class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (global.openDiyPage==0) }">
																				<i class="layui-anim layui-icon">&#xe63f;</i>
																				<div>旧版首页</div>
																			</div>
																			<div v-on:click="global.openDiyPage=1" v-bind:class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (global.openDiyPage==1) }">
																				<i class="layui-anim layui-icon">&#xe63f;</i>
																				<div>新版“首页DIY”</div>
																			</div>
																		</div>
																		<div class="ns-word-aux ns-diy-word-aux" style="margin-left: 0;">
																			小程序设置新版 “首页DIY” 以后，“小程序首页”内容根据“首页DIY”设置的内容进行展示，商城其他“首页”设置会无效。如还使用商城“首页”设置请切换至“旧版首页”
																		</div>
																	</div>
																</div>

																<div class="template-edit-title">
																	<h3>页面显示样式</h3>
																	<i class="layui-icon layui-icon-down"
																		onclick="closeBox(this)"></i>
																</div>

																<div class="template-edit-wrap">
																	<template>
																		<color
																			v-bind:data="{ field : 'bgColor', label : '页面颜色', value : global.bgColor, defaultcolor : '#f6f6f6', global: 1 }">
																		</color>
																		<color
																			v-bind:data="{ field : 'topNavColor', label : '顶部颜色', value : global.topNavColor, defaultcolor : '#ffffff', global: 1 }">
																		</color>
																		<div class="layui-form-item flex">
																			<div class="flex_left">
																				<label class="layui-form-label sm">标题颜色</label>
																				<div class="curr_color"></div>
																			</div>
																			<div class="layui-input-block flex_fill">
																				<div v-on:click="global.textNavColor='#000000'" v-bind:class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (global.textNavColor=='#000000') }">
																					<i class="layui-anim layui-icon">&#xe63f;</i>
																					<div>黑色</div>
																				</div>
																				<div v-on:click="global.textNavColor='#ffffff'" v-bind:class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (global.textNavColor=='#ffffff') }">
																					<i class="layui-anim layui-icon">&#xe63f;</i>
																					<div>白色</div>
																				</div>
																			</div>
																		</div>
																	</template>
																	<div class="layui-form-item">
																		<label class="layui-form-label sm">背景图片</label>
																		<div class="layui-input-block ns-img-upload">
																			<img-sec-upload v-bind:data="{ data : global, field : 'bgUrl', text: '' }">
																			</img-sec-upload>
																		</div>
																	</div>
																</div>


															</div>
														</div>

													</div>

												</div>
												<!-- 全局设置项目 end -->

											</div>
											<!--画布中心 begin -->
											<div class="screen_center" style="background-size: contain;background-position: top center;background-repeat: no-repeat;" v-bind:style="{ backgroundColor : global.bgColor,backgroundImage : 'url('+global.bgUrl+')' }">
												<template v-for="(nc,index) in data" v-bind:k="index">
													<div 
														v-bind:data-index="index" 
														v-on:click="changeCurrentIndex(nc.index)" 
														v-bind:class="{ 'draggable-element nc-border-color-selected' : true,selected : currentIndex == nc.index }" 
														v-bind:data-sort="index"
													>
														<foreach name="diyview" item="vo">
															<foreach name="vo.list" item="li">
																<template v-if="nc.type == '{$li.name}'">
																	<if condition="$li['name']=='TEXT'">
																		<include file="./static/diycomponent/text/index.html" />
																	</if>
																	<if condition="$li['name']=='NOTICE'">
																		<include file="./static/diycomponent/notice/index.html" />
																	</if>
																	<if condition="$li['name']=='GRAPHIC_NAV'">
																		<include file="./static/diycomponent/graphic_nav/index.html" />
																	</if>
																	<if condition="$li['name']=='SEARCH'">
																		<include file="./static/diycomponent/search/index.html" />
																	</if>
																	<if condition="$li['name']=='HORZ_LINE'">
																		<include file="./static/diycomponent/horz_line/index.html" />
																	</if>
																	<if condition="$li['name']=='HORZ_BLANK'">
																		<include file="./static/diycomponent/horz_blank/index.html" />
																	</if>
																	<if condition="$li['name']=='RICH_TEXT'">
																		<include file="./static/diycomponent/rich_text/index.html" />
																	</if>
																	<if condition="$li['name']=='GOODS_LIST'">
																		<include file="./static/diycomponent/goods_list/index.html" />
																	</if>
																	<if condition="$li['name']=='RUBIK_CUBE'">
																		<include file="./static/diycomponent/rubik_cube/index.html" />
																	</if>
																	<if condition="$li['name']=='COMMUNITY_SHOW'">
																		<include file="./static/diycomponent/community_show/index.html" />
																	</if>
																	<if condition="$li['name']=='SLIDER'">
																		<include file="./static/diycomponent/slider/index.html" />
																	</if>
																	<if condition="$li['name']=='COUPON'">
																		<include file="./static/diycomponent/coupon/index.html" />
																	</if>
																	<if condition="$li['name']=='PINTUAN_LIST'">
																		<include file="./static/diycomponent/pintuan/index.html" />
																	</if>
																	<if condition="$li['name']=='SECKILL_LIST'">
																		<include file="./static/diycomponent/seckill/index.html" />
																	</if>
																	<if condition="$li['name']=='FLOAT_BTN'">
																		<include file="./static/diycomponent/float_btn/index.html" />
																	</if>
																	<if condition="$li['name']=='VIDEO'">
																		<include file="./static/diycomponent/video/index.html" />
																	</if>
																	<if condition="$li['name']=='NEW_COME'">
																		<include file="./static/diycomponent/new_come/index.html" />
																	</if>
																	<if condition="$li['name']=='SPECIAL_LIST'">
																		<include file="./static/diycomponent/special/index.html" />
																	</if>
																	<if condition="$li['name']=='MANY_GOODS_LIST'">
																		<include file="./static/diycomponent/many_goods_list/index.html" />
																	</if>
																	<if condition="$li['name']=='SINGLE_IMG'">
																		<include file="./static/diycomponent/single_img/index.html" />
																	</if>
																</template>
															</foreach>
														</foreach>
													</div>
												</template>

											</div>
											<!--画布中心 end   -->
										</div>
									</div>
							</div>
						</div>
					</div>
					<!-- center component end -->

					<!-- 底部 保存 begin -->
					<div class="custom-save">
						<button class="layui-btn ns-bg-color save">保存</button>
					</div>
					<!-- 底部 end -->
				</div>
				<!-- end modify -->
			</div>
		</div>
	</div>
	<script type="text/javascript">
		document.write('<script src="/static/js/diy/color_picker/js/colorpicker.js?t="' + Math.random() + '><\/script>');
	</script>
	<script type="text/javascript">
		document.write('<script src="/static/js/diy/color_picker/js/paigusu.min.js?t="' + Math.random() + '><\/script>');
	</script>

	<script type="text/javascript">
		var linkUrl = "{:U('Shopdiy/link')}";
		var specialUrl = "{:U('Marketing/special_select')}";
		document.write('<script type="text/javascript" charset="utf-8" src="/static/js/diy/common.js?t="' + Math.random() + '><\/script>');
	</script>
	<script type="text/javascript">
		document.write('<script src="/static/js/diy/async_load_css.js?t="' + Math.random() + '><\/script>');
	</script>
	<script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.config.js"></script>
	<script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.all.min.js"> </script>
	<script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/lang/zh-cn/zh-cn.js"></script>

	<script src="/layuiadmin/layui/layui.js"></script>
	<script>
		layui.config({
			base: '/layuiadmin/' //静态资源所在路径
		}).extend({
			index: 'lib/index' //主入口模块
		}).use('index');
	</script>

	<script>
		//由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：
		var layer = layui.layer;
		var $;
		var cur_open_div;
		layui.use(['jquery', 'layer', 'form', 'slider'], function () {
			$ = layui.$;
			var form = layui.form;
			var table = layui.table;
		})
	</script>
	<script type="text/javascript">
		document.write('<script src="/static/js/diy/szycompontents.js?t="' + Math.random() + '><\/script>');
	</script>
	<script type="text/javascript">
		var diyJson = {$diyJson};
		var global = {$global};
		var openDiyPage =  {$openDiyPage};
		if(global) {
			global.openDiyPage = openDiyPage;
		} else {
			global = {openDiyPage: openDiyPage};
		}
		document.write('<script src="/static/js/diy/szydiy.js?t="' + Math.random() + '><\/script>');
	</script>
	
	<!-- 提交begin　-->
	<script>
		$('.all_component_list').on("mousemove",".componnet_list_box ul li",function () {
			var icon_selected = $(this).find("img").attr("data-icon-selected");
			$(this).find("img").attr("src", icon_selected);
		}).on("mouseout",".componnet_list_box ul li",function () {
			var icon = $(this).find("img").attr("data-icon");
			$(this).find("img").attr("src", icon);
		});

		var id = 0;
		if(diyJson) {
			for(var i=0;i<diyJson.length;i++) vue.addSzyComponent(diyJson[i]);
		} else {
			vue.globalLazyLoad = true;
		}

		var repeat_flag = false;
		$("button.save").click(function(){
			// 刷新排序
			vue.refreshSort();
			setTimeout(function () {
				if(vue.submitVerify()){
					//全局属性
					var global = JSON.stringify(vue.global);
					global = eval("("+global+")");

					//组件属性
					var value = JSON.stringify(vue.data).replace(/\@/g, "");
					value = JSON.parse(value);

					//重新排序
					value.sort(function(a,b){
						return a.sort-b.sort;
					});

					for(var item in value){
						delete value[item].verify;
						delete value[item].lazyLoad;
						delete value[item].lazyLoadCss;
						delete value[item].index;
						delete value[item].sort;
						delete value[item].outerCountJs;
					}

					var v = {
						global : global,
						value : value
					};

					if(repeat_flag) return;
					repeat_flag = true;

					var data = { 
						id: id, 
						name: 'index', 
						title: vue.global.title, 
						openDiyPage: vue.global.openDiyPage, 
						global: JSON.stringify(global).replace(/\'/g, "@"),
						value: JSON.stringify(value).replace(/\'/g, "@")
					};
					var diyurl = "{:U('Shopdiy/save')}";
					$.ajax({
						url: diyurl,
						type: "post",
						data: data,
						dataType:'json',
						success: function (info) {
							if(info.status == 0)
							{
								layer.msg(info.result.message,{icon: 1,time: 2000});
							}else if(info.status == 1){
								var go_url = location.href;
								if( info.result.hasOwnProperty("url") )
								{
									go_url = info.result.url;
								}
								
								layer.msg('操作成功',{time: 1000,
									end:function(){
										location.href = info.result.url;
									}
								}); 
							}
						}
					})
				}
			},100);
		});

	</script>

</body>