{template 'header'}
{template 'template'}
<style type="text/css">
	.btn-group .active {
	    background-color: #22c397;
	    color: #fff;
	}
	.widths{width: 98% !important;}
</style>
<!-- 内容区域 start -->
<div class="tpl-content-wrapper ">
	<link rel="stylesheet" href="{php echo MODULE_URL}style/css/goods.css">
	<link rel="stylesheet" href="{php echo MODULE_URL}style/css/umeditor.css">
	<div class="row-content am-cf">
		<div class="row">
			<div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
				<div class="widget am-cf">
					<form id="form_data" action="{php echo $this->createWebUrl('form_con',array('op'=>'edit'))}" class="am-form tpl-form-line-form" method="post" novalidate="novalidate">
						<div class="widget-body">
							<input type="hidden" name="id" id="id" value="{$info['id']}" />
							<fieldset>
								<div class="widget-head am-cf">
									<div class="widget-title am-fl">{if empty($info)}新增{else}编辑{/if}表单</div>
								</div>
								<div class="am-form-group">
									<label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">表单名称 </label>
									<div class="am-u-sm-9 am-u-end">
										<input type='text'  name='title' value="{$info['title']}" class='form-control' />
									</div>
								</div>
								<div class="am-form-group">
									<label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">显示位置 </label>
									<div class="am-u-sm-9 am-u-end zx-sendNotice">
										<select name="position" data-am-selected="{searchBox: 1, btnSize: &#39;sm&#39;, placeholder:&#39;请选择设计师&#39;, maxHeight: 400}" style="display: none;">
											{loop $position $key $val}
				                           		<option value="{$key}" {if !empty($info) and ($info['position'] == $key)}selected="selected"{/if}>{$val}</option>
				                            {/loop}
										</select>
									</div>
								</div>
								<div class="am-form-group">
									<label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">表单头部图片 </label>
									<div class="am-u-sm-9 am-u-end zx-sendNotice">
										{php echo tpl_form_field_image('img',$info['img']);}
									</div>
								</div>
								<div class="am-form-group">
									<label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">表单按钮文字 </label>
									<div class="am-u-sm-9 am-u-end">
										<input type='text'  name='font' value="{$info['font']}" class='form-control' />
									</div>
								</div>
								<div class="am-form-group">
									<label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">使用状态 </label>
									<div class="am-u-sm-9 am-u-end">
										<div class="btn-group" data-toggle="buttons">		
											<label class="btn btn-default {if $info['off'] == 1}active{elseif $info['off'] !=1 && $info['off'] != 2}active{/if}">
												<input type="radio" name="off" value="1" {if $info['off'] == 1}checked="checked"{elseif $info['off'] !=1 && $info['off'] != 2}checked="checked"{/if}>启用
											</label>
											<label class="btn btn-default {if $info['off'] == 2}active{/if} ">
												<input type="radio" name="off" value="2" {if $info['off'] == 2}checked="checked"{/if}>禁用
											</label>
										</div>
									</div>
								</div>
								<!--<div class="am-form-group">-->
								<div class="alert-new">
									<table class="table table-hover">
										<thead>
											<tr>
												<th style="width:35%;text-align:center;">自定义项目</th>
												<th style="width:15%;text-align:center;">排序</th>
												<th style="width:22%;text-align:center;">类型</th>
												<th style="width:18%;text-align:center;">是否显示标题</th>
												<th style="width:10%;">操作</th>
											</tr>
										</thead>
										{if empty($info)}
											<tbody id="re-items" class="ui-sortable" style="">
													<!--<tr class="body_info" data-id="1">
														<td><input name="" type="text" class="form-control widths" value="姓名"/></td>
														<td><input name="" value="100" class="form-control widths" type="text"/></td>
														<td>
															<select name="" class="form-control widths" disabled="disabled">
						                                        <option value="text" >单行文本</option>
						                                        <option value="radio">单选</option>
						                                        <option value="checkbox">多选</option>
						                                        <option value="phone">电话号码</option>
						                                        <option value="select">下拉选框</option>
						                                        <option value="img">上传图片</option>
						                                    </select>
														</td>
														<td>
															<select name="" class="form-control widths" disabled="disabled">
						                                        <option value="text" >否</option>
						                                    </select>
														</td>
														<td>
														</td>
													</tr>
													<tr class="body_info" data-id="1">
														<td><input name="" type="text" class="form-control widths" value="电话"/></td>
														<td><input name="" value="99" class="form-control widths" type="text"/></td>
														<td>
															<select name="" class="form-control widths" disabled="disabled">
						                                        <option value="phone">电话号码</option>
						                                    </select>
														</td>
														<td>
															<select name="" class="form-control widths" disabled="disabled">
						                                        <option value="text" >否</option>
						                                    </select>
														</td>
														<td>
														</td>
													</tr>-->
													<tr class="body_info" data-id="1">
														<td><input name="value[1][name]" type="text" class="form-control widths" value=""/></td>
														<td><input name="value[1][sort]" value="0" class="form-control widths" type="text"/></td>
														<td>
															<select name="value[1][type]" class="form-control widths">
																<option value="name">姓名</option>
																<option value="phone">电话号码</option>
						                                        <option value="text" >单行文本</option>
						                                        <option value="radio">单选</option>
						                                        <option value="checkbox">多选</option>
						                                        <option value="select">下拉选框</option>
						                                        <option value="img">上传图片</option>
						                                    </select>
														</td>
														<td>
															<select name="value[1][status]" class="form-control widths">
																<option value="2" >否</option>
																<option value="1" >是</option>
						                                    </select>
														</td>
														<td>
															<a href="javascript:;" data-toggle="tooltip" data-placement="bottom" class="btn btn-warning btn-sm" title="设置详细信息" onclick="setValues(1);"><i class="fa fa-edit"></i></a>
															<a href="javascript:;" data-toggle="tooltip" data-placement="bottom" class="btn btn-default btn-sm" onclick="deleteItem(1)" title="删除此项目"><i class="fa fa-times"></i></a>
														</td>
													</tr>
											</tbody>
											<div class="models" id="models">
												<div id="dialog_1" class="modal fade in" tabindex="-1" style="display: none; padding-right: 17px;background: rgba(0,0,0,0.5);">
												    <div class="modal-dialog" style="width: 920px;top: 40%;">
												        <div class="modal-content">
												            <div class="modal-header"><button aria-hidden="true" data-dismiss="modal" class="close" onclick="hidens(1)" type="button">×</button><h3>设置选项</h3></div>
												            <div class="modal-body">  
																<div class="well re-value">
																	<textarea id="re-value" name="value[1][comment]" class="form-control textarea_list" rows="6">{$v['comment']}</textarea>
																	<span class="help-block"><strong>设置表单项目的选项(如果有需要的话.) 每行一条记录, 例如: 性别 男, 女</strong></span>
																</div>
												                <div id="module-menus" style="padding-top:5px;"></div>
												            </div>
												            <div class="modal-footer">
												                <a href="javascript:;" class="btn btn-primary btn-ok" data-dismiss="modal" onclick="hidens(1)"  aria-hidden="true">确 定</a>
												                <a href="javascript:;" class="btn btn-default" onclick="hidens(1)"  data-dismiss="modal" aria-hidden="true">关 闭</a>
												            </div>
												        </div>
												    </div>
												</div>
											</div>
										{else}
											<tbody id="re-items" class="ui-sortable" style="">
												<!--<tr class="body_info" data-id="1">
														<td><input name="" type="text" class="form-control widths" value="姓名"/></td>
														<td><input name="" value="100" class="form-control widths" type="text"/></td>
														<td>
															<select name="" class="form-control widths" disabled="disabled">
						                                        <option value="text" >单行文本</option>
						                                        <option value="radio">单选</option>
						                                        <option value="checkbox">多选</option>
						                                        <option value="phone">电话号码</option>
						                                        <option value="select">下拉选框</option>
						                                        <option value="img">上传图片</option>
						                                    </select>
														</td>
														<td>
															<select name="" class="form-control widths" disabled="disabled">
						                                        <option value="2">否</option>
						                                    </select>
														</td>
														<td>
														</td>
													</tr>
													<tr class="body_info" data-id="1">
														<td><input name="" type="text" class="form-control widths" value="电话"/></td>
														<td><input name="" value="99" class="form-control widths" type="text"/></td>
														<td>
															<select name="" class="form-control" disabled="disabled">
						                                        <option value="phone">电话号码</option>
						                                    </select>
														</td>
														<td>
															<select name="" class="form-control widths" disabled="disabled">
						                                        <option value="2">否</option>
						                                    </select>
														</td>
														<td>
														</td>
													</tr>-->
												{loop $info['body'] $k $v}
													<tr class="body_info" data-id="{$k}">
														<td><input name="value[{$k}][name]" type="text" class="form-control widths" value="{$v['name']}"/></td>
														<td><input name="value[{$k}][sort]" value="{$v['sort']}" class="form-control widths" type="text"/></td>
														<td>
															<select name="value[{$k}][type]" class="form-control widths">
																<option value="name" {if $v['type']=='name' }selected='selected'{/if}>姓名</option>
																<option value="phone" {if $v['type']=='phone' }selected='selected'{/if}>电话号码</option>
						                                        <option value="text" {if $v['type']=='text' }selected='selected'{/if}>单行文本</option>
						                                        <!--<option value="textarea" {if $v['type']=='textarea' }selected='selected'{/if}>多行文本</option>-->
						                                        <option value="radio" {if $v['type']=='radio' }selected='selected'{/if}>单选</option>
						                                        <option value="checkbox" {if $v['type']=='checkbox' }selected='selected'{/if}>多选</option>
						                                        <option value="select" {if $v['type']=='select' }selected='selected'{/if}>下拉选框</option>
						                                        <option value="img" {if $v['type']=='img' }selected='selected'{/if}>上传图片</option>
						                                    </select>
														</td>
														<td>
															<select name="value[{$k}][status]" class="form-control widths" data-id="{$v['status']}">
																<option value="2" {if $v['status']=='2' }selected='selected'{/if}>否</option>
																<option value="1" {if $v['status']=='1' }selected='selected'{/if}>是</option>
						                                    </select>
														</td>
														<td>
															<a href="javascript:;" data-toggle="tooltip" data-placement="bottom" class="btn btn-warning btn-sm" title="设置详细信息" onclick="setValues({$k});"><i class="fa fa-edit"></i></a>
															<a href="javascript:;" data-toggle="tooltip" data-placement="bottom" class="btn btn-default btn-sm" onclick="deleteItem({$k})" title="删除此项目"><i class="fa fa-times"></i></a>
														</td>
													</tr>
													<div id="models">
														<div id="dialog_{$k}" class="modal fade in" tabindex="-1" style="display: none; padding-right: 17px;background: rgba(0,0,0,0.5);">
														    <div class="modal-dialog" style="width: 920px;top: 40%;">
														        <div class="modal-content">
														            <div class="modal-header"><button aria-hidden="true" data-dismiss="modal" class="close" onclick="hidens({$k})" type="button">×</button><h3>设置选项</h3></div>
														            <div class="modal-body">  
																		<div class="well re-value">
																			<textarea id="re-value" name="value[{$k}][comment]" class="form-control textarea_list" rows="6">{$v['comment']}</textarea>
																			<span class="help-block"><strong>设置表单项目的选项(如果有需要的话.) 每行一条记录, 例如: 性别 男, 女</strong></span>
																		</div>
														                <div id="module-menus" style="padding-top:5px;"></div>
														            </div>
														            <div class="modal-footer">
														                <a href="javascript:;" class="btn btn-primary btn-ok" data-dismiss="modal" onclick="hidens({$k})"  aria-hidden="true">确 定</a>
														                <a href="javascript:;" class="btn btn-default" onclick="hidens({$k})"  data-dismiss="modal" aria-hidden="true">关 闭</a>
														            </div>
														        </div>
														    </div>
														</div>
													</div>
												{/loop}
											</tbody>
										{/if}
										
										</table>
										<a href="javascript:;" class="btn btn-success" onclick="addItem();"><i class="fa fa-plus" title="添加自定义字段"></i> 添加自定义字段</a>
										<div class="alert alert-info">
											<button type="button" class="close" data-dismiss="alert">×</button>
											<h4>提示！</h4> 每个位置的表单只能启用1个.<br>
										</div>
								</div>
								<!--</div>-->
								
								
								<div class="am-form-group">
									<div class="am-u-sm-9 am-margin-top-lg">
										<input type="submit" name="submit" id="btn" value="提交" class="j-submit zx-addBut" />
									</div>
								</div>
							</fieldset>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
{template 'footer'}

<script type="text/javascript">
    //	layer.msg('123');
    $('#btn').click(function(){
        var title = $("input[name='title']").val();
        if(title == '' || title == undefined){
            layer.msg('请填写标题');
            return false;
        }
        return true;
    });
    function addItem(){
    	var id = $(".body_info").eq(-1).data('id');
        id++;
        var str = '';
            str +='<tr class="body_info" data-id="'+id+'">';
			str +=	'<td><input name="value['+id+'][name]" type="text" class="form-control widths" value=""/></td>';
			str +=	'<td><input name="value['+id+'][sort]" value="0" class="form-control widths" type="text"/></td>';
			str +=	"<td>";
			str +=		'<select name="value['+id+'][type]" class="form-control widths">';
			str +=			  '<option value="name">姓名</option>';
			str +=            '<option value="phone">电话号码</option>';
            str +=           "<option value=\"text\">单行文本</option>";
            /**str +=            "<option value=\"textarea\">多行文本</option>";*/
            str +=            "<option value=\"radio\">单选</option>";
            str +=            "<option value=\"checkbox\">多选</option>";
            str +=            '<option value="select">下拉选框</option>';
            str +=            '<option value="img">上传图片</option>';
            str +=        "</select>";
			str +=	"</td>";
			str += '<td>';
			str += '	<select name="value['+id+'][status]" class="form-control widths">';
			str += '		<option value="2">否</option>';
			str += '		<option value="1">是</option>';
		    str += '	</select>';
			str += '</td>';
			str +=	"<td>";
			str += '<a href="javascript:;" data-toggle="tooltip" data-placement="bottom" class="btn btn-warning btn-sm" data-original-title="设置详细信息" onclick="setValues('+id+');"><i class="fa fa-edit"></i></a>';
			str += '<a href="javascript:;" data-toggle="tooltip" data-placement="bottom" class="btn btn-default btn-sm" onclick="deleteItem('+id+')" title="删除此项目"><i class="fa fa-times"></i></a>';
			str +=	"</td>";
			str +="</tr>";
			var model = '';
			model += '<div id="dialog_'+id+'" class="modal fade in" tabindex="-1" style="display: none; padding-right: 17px;background: rgba(0,0,0,0.5);">';
			model += '<div class="modal-dialog" style="width: 920px;top: 40%;">';
			model += '<div class="modal-content">';
			model += '<div class="modal-header"><button aria-hidden="true" data-dismiss="modal" class="close" onclick="hidens('+id+')" type="button">×</button><h3>设置选项</h3></div>';
			model += '<div class="modal-body">  ';
			model += '<div class="well re-value">';
			model += '<textarea id="re-value" name="value['+id+'][comment]" class="form-control textarea_list" rows="6"></textarea>';
			model += '<span class="help-block"><strong>设置表单项目的选项(如果有需要的话.) 每行一条记录, 例如: 性别 男, 女</strong></span>';
			model += '</div>';
			model += '<div id="module-menus" style="padding-top:5px;"></div>';
			model += '</div>';
			model += '<div class="modal-footer">';
			model += '<a href="javascript:;" class="btn btn-primary btn-ok" data-dismiss="modal" onclick="hidens('+id+')"  aria-hidden="true">确 定</a>';
			model += '<a href="javascript:;" class="btn btn-default" onclick="hidens('+id+')"  data-dismiss="modal" aria-hidden="true">关 闭</a>';
			model += '</div></div></div></div>';
			$("#re-items").append(str);
			$("#models").append(model);
    }

    function deleteItem(id){
    	$(".body_info[data-id='"+id+"']").remove();
    }
    function setValues(id){
    	$('#dialog_'+id).show();
    }
    function hidens(id){
    	$('#dialog_'+id).hide();
    }
//  $('#position').change(function(){
//  	var val = $(this).val();
//  	if(val == 1){
//  		$('#of').show();
//  	}else{
//  		$('#of').hide();
//  	}
//  })
</script>