<style>
.index-adup{width:120px;float:left;padding-left:110px; margin-top:10px;overflow: hidden;}
.index-adpic{float: left;width: 120px;margin-top:32px;}
.index-adpicc{margin-top:32px;}
.jianque { height: 80px;width: 100px; margin-bottom: 5px;}
</style>
<title>广告管理</title>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
      <a lay-href="">控制台</a>
      <a><cite>问答管理</cite></a>
      <a><cite>广告管理</cite></a>
    </div>
  </div>
  
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">

        <div class="layui-card">

          <div class="layui-tab layui-tab-brief layadmin-latestData" lay-filter="atb">
            <ul class="layui-tab-title">
              <li lay-id="ad" class="layui-this">广告管理</li>
              <li><a lay-href="wendasns/advert/category">广告位管理</a></li>
            </ul>
            <div class="layui-tab-content">
              <div class="layui-tab-item layui-show">
                  <!-- 广告列表 -->
                  <div style="padding-bottom: 10px;">
                    <a href="#J_view" class="layui-btn J_popup" title="添加广告"><i class="layui-icon layui-icon-add-circle"></i>添加</a>
                    <a href="wendasns/ad/remove" class="layui-btn J_req" title="确定要删除吗？"><i class="layui-icon layui-icon-delete"></i>删除</a>
                    <a href="javascript:;" id="adup"></a> 
                  </div>               
                     <table id="J_table_list" lay-filter="J_table_list"></table>
              </div>
              <div class="layui-tab-item">
                  <!-- 广告位置 -->      
                  <div style="padding-bottom: 10px;">
                    <a href="#Jad_view" class="layui-btn J_popup" title="增加广告位置"><i class="layui-icon layui-icon-add-circle"></i>添加</a>
                    <a href="wendasns/ad/adremove" class="layui-btn J_req" title="确定要删除吗？"><i class="layui-icon layui-icon-delete"></i>删除</a>
                    <a href="javascript:;" id="adup"></a> 
                  </div>
                     <table id="J_table_adlist" lay-filter="J_table_list"></table>
              </div>
            </div>
          </div>  
          
        </div>
      </div>
    </div>
  </div>

  <script type="text/html" id="J_table_model">
    {{# if(d.model == 'img'){ }}
        图片广告
    {{# }else if(d.model == 'code'){ }}
        代码广告
    {{# }else{ }}
        文字广告
    {{# }}}
  </script>

  <script type="text/html" id="J_table_content">
    {{# if(d.model == 'img'){ }}
        <div>{{# if(d.url){ }}<a href="{{d.url}}" target="_blank"><img src="{{d.content}}"/></a>{{# }else{ }}<img src="{{d.content}}"/>{{# } }}<a class="J_photos" style="float: right;" href="{{d.content}}" title="看大图"><i class="layui-icon layui-icon-search"></i></a></div>
    {{# }else if(d.model == 'code'){ }}
    	<a class="layui-table-link" href="#J_code_view" lay-event="popup" title="查看代码">查看代码</a>
    {{# }else{ }}
        <a class="layui-table-link" href="{{d.url}}" target="_blank">{{d.content}}</a>
    {{# }}}
  </script>

  <script type="text/html" id="J_table_tool">
    <a href="#J_view" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="popup" title="编辑广告"><i class="layui-icon layui-icon-edit"></i>编辑</a>
    <a href="wendasns/advert/remove" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="req" title="确定要删除吗？"><i class="layui-icon layui-icon-delete"></i>删除</a>
  </script>

<script>
;!function(){
  
    var $ = layui.$
    ,table =layui.table
    ,upload = layui.upload
    ,element = layui.element
    ,router = layui.router()
    ,laydate = layui.laydate
    ,form = layui.form;
    
    form.render();
  
    table.render({
      elem: '#J_table_list'
      ,height: 'auto'
      ,url: '{:url('wendasns/advert/list')}' //数据接口
      ,page: true //开启分页
      ,limit: 16
      ,cols: [[ //表头
      	{type:'checkbox'}
        ,{field:'model',title:'广告类型',width:90,align:'center',templet: '#J_table_model'}
        ,{field:'category',title:'广告位置',minWidth:150}
        ,{field:'name',title:'广告名称',minWidth:120}
        ,{field:'content',title:'广告内容',minWidth:150,toolbar:'#J_table_content'}
        ,{field:'status',title:'启用',width:80,align:'center',templet: '<div>{{d.status==1?"是":"否"}}</div>'}
        ,{field:'create_time',title:'投放时间',width:200,align:'center'}
        ,{field:'expire_time',title:'到期时间',width:200,align:'center',templet:'<div>{{d.expire_time||"永久"}}</div>'}
        ,{field:'operate',title:'操作',width:150,align:'center',toolbar: '#J_table_tool'}
  
      ]]
      ,text: {
        none: '无任何网站广告！' //默认：无数据。
      }
    });
    
    
    form.on('select(model)', function(data){
    	if(data.value=='img'){
    		var content = $('#advert_content').val();
    		$('#J_content_item').find('div').html('<input id="advert_content" name="content" placeholder="请输入广告图片地址" lay-verify="required" value="'+content+'" autocomplete="off" class="layui-input">');
    		$('#J_img_item').show();
    	}else{
    		var content = $('#advert_content').val();
    		$('#J_content_item').find('div').html('<textarea id="advert_content" name="content" placeholder="请输入广告内容" lay-verify="required" class="layui-textarea">'+content+'</textarea>');
    		$('#J_img_item').hide();
    	}
    });
    
	$(document).on('click','.J_photos',function(event){
		event.preventDefault();
		layer.photos({
	    	photos: {data:[{
		      "alt": "",
		      "pid": 1,
		      "src": $(this).prop('href'),
		      "thumb": ""
	    	}]}
	    });
	});

}();
function imgup(){
	layui.upload.render({
      elem: '#J_imgup'
      ,url: '{:url('wendasns/advert/upload')}'
      ,done: function(res){
      	layer.msg(res.msg);
        layui.$('#advert_content').val(res.data.src);
        layui.$('#imgtag').attr('src', res.data.src);
      }
      ,error: function(){
        layer.msg('上传失败');
      }
    });
    
    layui.$(document).find('.laydate-item').each(function(){
      layui.laydate.render({
        elem: this
        ,type: 'datetime'
        ,trigger: 'click'
      });
    });
    
}

function codeshow(){
    layui.code({
      elem: 'pre'
      ,about: false
    });
}
</script>

<script type="text/html" id="J_code_view" lay-done="codeshow()">
	<pre class="layui-code">{{d.content}}</pre>
</script>

  <script type="text/html" id="J_view" lay-done="imgup()">

          <form class="layui-form" action="{:url('wendasns/advert/edit')}" method="post">
            <input type="hidden" name="id" value="{{d.id||0}}">

          <div class="layui-form-item">
            <label class="layui-form-label">广告位置</label>
            <div class="layui-input-inline">
              <select name="category_id" lay-verify="required">
                <option value="">请选择广告位置</option>
                {volist name="ad" id="item"}
                <option value="{$item.id}"{{ typeof d.category_id=='undefined'?'':(d.category_id=='{$item.id}'?' selected':'') }}>{$item.name}</option>
                {/volist}
              </select>
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">广告类型</label>
            <div class="layui-input-inline">
            {{# if(typeof d.model=='undefined'){ }}
              <select name="model" lay-filter="model" lay-verify="required">
                <option value="text"{{ typeof d.model=='undefined'?' selected':(d.model=='text'?' selected':'') }}>文字广告</option>
                <option value="img"{{ typeof d.model=='undefined'?'':(d.model=='img'?' selected':'') }}>图片广告</option>
                <option value="code"{{ typeof d.model=='undefined'?'':(d.model=='code'?' selected':'') }}>代码广告</option>
              </select>
            {{# }else{ }}
            	
            	{{# var vars = {text:'文字广告',img:'图片广告',code:'代码广告'}; }}
            	<input type="text" value="{{vars[d.model]}}" class="layui-input layui-disabled" disabled="disabled">
            {{# } }}
            </div>
          </div>

            <div class="layui-form-item">
              <label class="layui-form-label">广告名称</label>
              <div class="layui-input-block">
                <input type="text" name="name" value="{{d.name||''}}" placeholder="请输入广告名称" lay-verify="required" autocomplete="off" class="layui-input">
              </div>
            </div>
            
            <div class="layui-form-item" id="J_content_item">
              <label class="layui-form-label">广告内容</label>
              <div class="layui-input-block">
              {{# 
              	var show = 'none';
              	if(typeof d.model=='undefined' || d.model!=='img'){
               }}
                <textarea id="advert_content" name="content" placeholder="请输入广告内容" lay-verify="required" class="layui-textarea">{{d.content||''}}</textarea>
              {{# 
              	}else{
              	show = 'block';
               }}
              	<input id="advert_content" name="content" placeholder="请输入广告图片地址" value="{{d.content||''}}" lay-verify="required" autocomplete="off" class="layui-input">
              {{# } }}
              </div>
            </div>

            <div class="layui-form-item" id="J_img_item" style="display: {{ show }};">
              <label class="layui-form-label"></label>
              <div class="layui-input-inline">
                <img src="{{d.content||''}}" id="imgtag" width="100%"/>
              </div>
              <div class="layui-form-mid layui-word-aux">
              	<a id="J_imgup" href="javascript:;" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-upload-drag"></i>上传图片</a> 支持格式'jpg','jpeg','gif','png'
              </div>
            </div>
            
            <div class="layui-form-item">
              <label class="layui-form-label">广告链接</label>
              <div class="layui-input-block">
                <input type="text" name="url" value="{{d.url||''}}" placeholder="请输入广告链接" autocomplete="off" class="layui-input">
              </div>
            </div>

            <div class="layui-form-item">
              <label class="layui-form-label">投放时间</label>
              <div class="layui-input-inline">
                <input type="text" name="create_time" value="{{d.create_time||''}}" lay-verify="required" autocomplete="off" class="layui-input laydate-item">
              </div>
            </div>

            <div class="layui-form-item">
              <label class="layui-form-label">到期时间</label>
              <div class="layui-input-inline">
                <input type="text" name="expire_time" value="{{d.expire_time||''}}" autocomplete="off" class="layui-input laydate-item">
              </div>
              <div class="layui-form-mid layui-word-aux">留空，表示长期投放</div>
            </div>
            
            <div class="layui-form-item">
              <label class="layui-form-label">启用</label>
              <div class="layui-input-inline">
                <input type="radio" name="status" value="1" title="是"{{ typeof d.status=='undefined'?' checked':(d.status==1?' checked':'') }}>
                <input type="radio" name="status" value="0" title="否"{{ typeof d.status=='undefined'?'':(d.status==0?' checked':'') }}>
              </div>
            </div>
            
              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn" lay-submit lay-filter="J_ajax_submit_btn"><i class="layui-icon layui-icon-ok-circle"></i>提交</button>
                </div>
              </div>
          </form>
  
    </script>