{% extends "view/admin/ext_admin.html" %}

{% block extadmin %}


    <section class="panel panel-default">
        <div class="panel-heading clearfix">
            <ul class="nav nav-tabs pull-left ">
                <li ><a href="/{{ctx.controller}}"  class="grouplist"> 广告</a></li>
                <li ><a href="/{{ctx.controller}}/adlist/?spaceid={{space.spaceid}}"  class="grouplist"> {{space.name}}</a></li>
                <li class="active"><a href="javascript:void(0)"  class="grouplist"> {{controller.meta_title}}</a></li>
            </ul>
        </div>
        <div class="panel-body">
            <form id="ajaxForm" method="post" class="form-horizontal" action="/{{ctx.controller}}/addad" data-validate="parsley">
                <div class="form-group">
                    <label class="col-sm-2 control-label">广告标题</label>

                    <div class="col-sm-10">

                        <div class="row">
                            <div class="col-md-4">
                                <input type="text" class="form-control" name="name" value="" data-required="true" data-Remote="/admin/public/remote/?table=ext_ad_temp">
                            </div>
                            <div class="col-md-12">
                                <span class="help-block m-b-none text-muted"><i class="fa fa-info-circle text-info"></i> 广告名称至少三个汉字以上</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">所属广告位</label>

                    <div class="col-sm-10">
                        <div class="row">
                            <div class="col-md-10">
                                <input type="hidden" name="spaceid" value="{{space.spaceid}}">
                                <p class="form-control-static text-danger">{{space.name}} [{{temp.title}}]</p>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">广告类型</label>

                    <div class="col-sm-10">
                        <div class="row">
                            <div class="col-md-4 ">
                                <select class="form-control " name="type">
                                    {#<option value="">选择类型</option>#}
                                    {%for k,v in temp.type|strToJson%}
                                    {%if v==1%}
                                    <option value="{{k}}" selected>{%if k=='images'%}图片{%elif k=='flash'%}动画{%elif k=='text'%}文字{%else%}代码{%endif%}</option>
                                    {%endif%}
                                    {%endfor%}
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">上线时间</label>

                    <div class="col-sm-10">
                        <div class="row">
                            <div class="col-md-4 ">
                                <input type="text" name="startdate" class="form-control time" value="" placeholder="请选择时间" />
                            </div>
                            <div class="col-md-12">
                                            <span class="help-block m-b-none text-muted"><i class="fa fa-info-circle text-info"></i>
                                                默认为当前时间</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">下线时间</label>

                    <div class="col-sm-10">
                        <div class="row">
                            <div class="col-md-4 ">
                                <input type="text" name="enddate" class="form-control time" value="" placeholder="请选择时间" />
                            </div>
                            <div class="col-md-12">
                                            <span class="help-block m-b-none text-muted"><i class="fa fa-info-circle text-info"></i>
                                                默认为一个月</span>
                            </div>
                        </div>
                    </div>
                </div>
                <input type="hidden" value="" name="setting">
                {%for k,v in temp.type|strToJson%}
                {%if v==1%}
                {%if k=='images'%}
                <div class="form-group images_box" style="margin-bottom: 0;display: block">
                    <section class="panel panel-default margin-0" style="margin-bottom: 0">
                        <header class="panel-heading font-bold">图片设置</header>
                        <div class="panel-body" >
                            {% for i in range(0, temp.num) -%}
                            <div class="row images_list">
                                <div class="col-md-6"><div class="form-group">
                                    <label class="col-sm-2 control-label">链接地址</label>

                                    <div class="col-sm-10">

                                        <div class="row">
                                            <div class="col-md-12">
                                                <input type="text" class="form-control" name="url_{{i}}" value="" data-required="true" data-type="url" placeholder="链接地址">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                    <div class="line line-dashed b-b line-lg pull-in"></div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">文字提示</label>

                                        <div class="col-sm-10">

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <input type="text" class="form-control" name="alt_{{i}}" value="" data-required="true" >
                                                </div>
                                            </div>
                                        </div>
                                    </div></div>
                                <div class="col-md-6">
                                    <input type="hidden" name="att_{{i}}" id="cover_id_{{i}}"/>
                                    <div id="fileList_{{i}}" class="uploader-list pull-left" style="width: auto"></div>
                                    <div id="filePicker_{{i}}" class="pull-left">选择图片</div>
                                </div>
                            </div>
                            <hr>
                            {%- endfor %}
                        </div>
                    </section>


                </div>

                {%elif k=='flash'%}
                动画
                {%elif k=='text'%}
                <div class="form-group images_box" style="margin-bottom: 0;display: block">
                    <section class="panel panel-default margin-0" style="margin-bottom: 0">
                        <header class="panel-heading font-bold">文字设置</header>
                        <div class="panel-body" >
                            {% for i in range(0, temp.num) -%}
                            <div class="row images_list">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">文字内容</label>

                                        <div class="col-sm-10">

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <input type="text" class="form-control " name="alt_{{i}}" value="" data-required="true" >
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="line line-dashed b-b line-lg pull-in"></div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">链接地址</label>

                                        <div class="col-sm-10">

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <input type="text" class="form-control" name="url_{{i}}" value=""  data-type="url" placeholder="链接地址">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6"><div class="form-group">
                                    <label class="col-sm-2 control-label">文字简介</label>

                                    <div class="col-sm-10">

                                        <div class="row">
                                            <div class="col-md-12">
                                                <input type="text" class="form-control" name="info_{{i}}" value=""  placeholder="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                    <div class="line line-dashed b-b line-lg pull-in"></div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">文字图标</label>

                                        <div class="col-sm-10">

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <input type="text" class="form-control" name="ico_{{i}}" value="" placeholder="FONTAWESOME">
                                                </div>
                                            </div>
                                        </div>
                                    </div></div>
                            </div>
                            <hr>
                            {%- endfor %}
                        </div>
                    </section>


                </div>
                {%else%}
                <div id="layout " class="form-group" style="margin-bottom: 0;display: block">
                    <section class="panel panel-default margin-0" style="margin-bottom: 0">
                        <header class="panel-heading font-bold">代码设置</header>
                        <div class="row wrapper">
                            <div class="col-md-12">直接填入html代码</div>
                        </div>
                        <div class="panel-body" style="padding: 0">
                            <div id="codes" class="hide">
                                <textarea id="html-code">{{temp.html}}</textarea>
                            </div>
                            <div id="test-editormd" style="margin: 0">
                                <textarea style="display:none;" name="code"></textarea>
                            </div>
                        </div>
                    </section>


                </div>
                {%endif%}
                {%endif%}
                {%endfor%}

                <div class="form-group form-submit">
                    <div class="col-sm-4 col-sm-offset-2">
                        <button class="btn btn-primary btn-s-md ajax-post" type="submit" target-form="form-horizontal">确定</button>
                        <button class="btn btn-default" onclick="javascript:history.back(-1);return false;"
                                type="submit">返回
                        </button>

                    </div>
                </div>
            </form>
        </div>
    </section>

{% endblock%}

{% block style %}
{{ super() }}
<link rel="stylesheet" href="/static/admin/editormd/editormd.min.css" type="text/css">
<link rel="stylesheet" href="/static/admin/js/webuploader/webuploader.css" type="text/css">
<link rel="stylesheet" href="/static/admin/js/datepicker/bootstrap-datetimepicker.min.css" type="text/css">
{% endblock%}
{% block script%}
{{ super() }}
<script src="/static/admin/editormd/editormd.min.js"></script>
<script src="/static/admin/js/datepicker/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
<script src="/static/admin/js/datepicker/locales/bootstrap-datetimepicker.zh-CN.js" type="text/javascript"></script>
<script src="/static/admin/js/webuploader/webuploader.js" type="text/javascript"></script>
<script type="text/javascript">
    var testEditor;

    function getCodeValue() {
        return (localStorage.modeName) ? $("#" + localStorage.modeName.replace("text/", "").replace("c/c++", "cpp") + "-code").val() : $("#html-code").val();
    }

    $(function () {
        testEditor = editormd("test-editormd", {
            width: "100%",
            height: 340,
            watch: false,
            toolbar: false,
            codeFold: true,
            searchReplace: true,
            placeholder: "把模板代码复制到这里...",
            value: getCodeValue(),
            theme: (localStorage.theme) ? localStorage.theme : "default",
            mode: (localStorage.mode) ? localStorage.mode : "text/html",
            path: '/static/admin/editormd/lib/'
        });

        $("#get-code-btn").bind("click", function () {
            alert(testEditor.getValue());
        });

        $('.time').datetimepicker({
            format: 'yyyy-mm-dd hh:ii',
            language:"zh-CN",
            minView:2,
            autoclose:true
        });
        $('.images_list').each(function (k,v) {
            console.log(k);
            images_list(k);

            console.log($('.images_list').length);
            $(this).find("input").each(function () {
               $(this).on('change',function () {
                 gettype();
               })
           })

        })
        function gettype() {
            var type = [];
            for(var i=0;i< $('.images_list').length;i++){
                type[i]=getval(i);
                console.log(i);
            }
            console.log(JSON.stringify(type));
            $('input[name="setting"]').val(JSON.stringify(type));
        }
        //获取上传组件信息
        function getval(i) {
            var obj = {};
            if($('input[name="url_'+i+'"]').val()){
                obj.url = $('input[name="url_'+i+'"]').val();
            }
            if($('input[name="alt_'+i+'"]').val()){
                obj.alt = $('input[name="alt_'+i+'"]').val();
            }
            if($('input[name="att_'+i+'"]').val()){
                obj.att = $('input[name="att_'+i+'"]').val();
            }
            if($('input[name="info_'+i+'"]').val()){
                obj.info = $('input[name="info_'+i+'"]').val();
            }
            if($('input[name="ico_'+i+'"]').val()){
                obj.ico = $('input[name="ico_'+i+'"]').val();
            }

            //console.log(obj);
            return obj;
        }
        //上传图片
       function images_list(i) {
           var $list = $('#fileList_'+i),
               // 优化retina, 在retina下这个值是2
               ratio = window.devicePixelRatio || 1,

               // 缩略图大小
               thumbnailWidth = 100 * ratio,
               thumbnailHeight = 100 * ratio,

           // Web Uploader实例
           uploader;

           // 初始化Web Uploader
           // 初始化Web Uploader
           var uploader = WebUploader.create({
               // 选完文件后，是否自动上传。
               auto: true,
               // swf文件路径
               swf: '/static/admin/js/webuploader/Uploader.swf',
               // 文件接收服务端。
               server: '/ext/attachment/adminfile/uploadpic',
               // 选择文件的按钮。可选。
               // 内部根据当前运行是创建，可能是input元素，也可能是flash.
               pick: {
                   id:'#filePicker_'+i,
                   multiple: false
               },
               // 只允许选择图片文件。
               accept: {
                   title: 'Images',
                   extensions: 'gif,jpg,jpeg,bmp,png',
                   mimeTypes: 'image/*'
               }
           });
           // 当有文件添加进来的时候
           uploader.on( 'fileQueued', function( file ) {
               var $li = $(
                       '<div id="' + file.id + '" class="file-item thumbnail">' +
                       '<img>' +
                       '<div class="info">' + file.name + '</div>' +
                       '</div>'
                   ),
                   $img = $li.find('img');

                  $list.html( $li );

               // 创建缩略图
               uploader.makeThumb( file, function( error, src ) {
                   if ( error ) {
                       $img.replaceWith('<span>不能预览</span>');
                       return;
                   }

                   $img.attr( 'src', src );
               }, thumbnailWidth, thumbnailHeight );
           });

           // 文件上传过程中创建进度条实时显示。
           uploader.on( 'uploadProgress', function( file, percentage ) {

               var $li = $('#'+file.id ),
                   $percent = $li.find('.progress span');

               // 避免重复创建
               if ( !$percent.length ) {
                   $percent = $('<p class="progress"><span></span></p>')
                       .appendTo( $li )
                       .find('span');
               }

               $percent.css( 'width', percentage * 100 + '%' );
           });

           // 文件上传成功，给item添加成功class, 用样式标记上传成功。
           uploader.on( 'uploadSuccess', function( file,res ) {
               $( '#'+file.id ).addClass('upload-state-done');
               $("#cover_id_"+i).val(res);
               gettype();
           });

           // 文件上传失败，现实上传出错。
           uploader.on( 'uploadError', function( file ) {
               var $li = $( '#'+file.id ),
                   $error = $li.find('div.error');

               // 避免重复创建
               if ( !$error.length ) {
                   $error = $('<div class="error"></div>').appendTo( $li );
               }

               $error.text('上传失败');
           });

           // 完成上传完了，成功或者失败，先删除进度条。
           uploader.on( 'uploadComplete', function( file ) {
               $( '#'+file.id ).find('.progress').remove();
           });

       }
    });
</script>
{% endblock%}