<link href="<?php echo asset_url('css/fileinput.min.css')?>" media="all" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo asset_url('js/fileinput.min.js') ?>"></script>
<script type="text/javascript" src="<?php echo asset_url('js/fileinput_locale_zh.js') ?>"></script>

<style type="text/css">
    .form-group{width: 60%}
    #container_map{height: 300px}
    .file-footer-buttons button{display: none}
    .file-drop-disabled{clear: both;}
    .regiswidth div.form-group .form-control-feedback {
        top: 0px!important;
        right: 15px;
    }
    .regiswidth div.form-group .help-block {
        position: absolute;
        right: 43px;
        top: 3px;
    }
    .cover {
        margin-top: 20px !important;
    }
</style>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.3&key=93cd0129276159ec3ff4c38a8831492a&plugin=AMap.Geocoder"></script>

<div class="col-md-10" role="main">
    <nav class="breadcrumb"></i> 分享圈<span class="c-gray en">&gt;</span>云话题管理</nav>
    <div class="xgsj_wbox">
        <div class="title-box" style="border:0;padding: 20px 0px;">
            <p class="t-p" style="width: 500px;display: inline-block;">新建话题</p>
            <button type="button" onclick="javascript:history.go(-1)" class="sjxg_fh" data-dismiss="modal" style="margin-top:8px;width:142px;height:32px;">返回</button>
        </div>
        <div class="bs-example">
            <form action="<?php echo site_url('sharecircle/topic/save_topic')?>" method="post" class="registerForm regiswidth" enctype="multipart/form-data">
                <div class="form-group" style="margin-bottom: 20px!important">
                    <span class="dianm sjxg_tle_span">*标题：</span>
                    <div class="examp">
                        <input type="text" name="title"  class="form-control" >
                    </div>
                </div>

                <div class="form-group" style="margin-bottom: 10px!important">
                    <span class="dianm sjxg_tle_span">*类型：</span>
                    <div class="examp topic_ex">
                        <select name="typeid" class="selectmr" style="width:100%;height:34px;margin-top:0px" data-bv-notempty="" data-bv-notempty-message="请选择一项" data-bv-field="category">
                            <option value="">请选择类型</option>
                            <?php if (!empty($topic_type)):?>
                            <?php foreach ($topic_type as $value) :?>
                            <option value="<?php echo $value['id']?>"><?php echo $value['tname']?></option>
                            <?php endforeach; endif; ?>
                        </select>
                    </div>
                </div>

                <div class="form-group form-group2" style="width:60% ;margin-bottom: 20px!important">
                    <span class="smallimg jianjie sjxg_tle_span">*上传列表图：</span>
                    <div class="examp" id="small_container">
                        <p class="shaopupload sjxg_img_btn">
                            <input type="file" name="avatar" id="small" multiple="" class="brefile">
                            *图片尺寸:100*100
                        </p>
                    </div>
                </div>

                <div class="form-group form-group2" style="width:60% ;margin-bottom: 10px!important">
                    <span class="cover jianjie sjxg_tle_span">*上传封面图：</span>
                    <div class="examp" id="pic_container">
                        <p class="shaopupload shaopupload1 sjxg_img_btn">
                            <input type="file" name="avatar" id="pic" multiple="" class="brefile">
                            *图片尺寸:180*180
                        </p>
                    </div>
                </div>
                <button class="edit_btn" id="save"  type="submit" style="width:142px;height:32px;">提交</button>
            </form>
        </div>
    </div>
</div>


<script type="text/javascript">

    function init_upload(target, min, max, name,mode){
        var ele = $(target);
        ele.fileinput({
            minFileCount : min,
            dropZoneEnabled : false,
            maxFileCount : max,
            validateInitialCount: true,
            deleteUrl : '<?php echo site_url('sharecircle/topic/de');?>',
            uploadUrl : '<?php echo site_url('sharecircle/topic/upload_topic');?>'+'/'+mode,
            language: "zh",
            showUpload : false,
            previewSettings : {
                image: {width: "130px", height: "auto"},
                html: {width: "213px", height: "160px"},
                text: {width: "160px", height: "136px"},
                video: {width: "213px", height: "160px"},
                audio: {width: "213px", height: "80px"},
                flash: {width: "213px", height: "160px"},
                object: {width: "213px", height: "160px"},
                other: {width: "160px", height: "160px"}
            }

        });

        ele.on('fileuploaded', function(event, data, previewId, index){
            var input = '<input type="hidden" value="'+data.response.url+'" name="'+name+'"/>'
            $(input).appendTo('form');
        });

        ele.on('filebatchselected', function(event, files, extra) {

            $("#save").attr('disabled', false);
        });

        ele.on('fileclear', function(event) {
            $("input[name='"+name+"']").remove();
        });

        $('#input-id').on('filesuccessremove', function(event, id) {
            console.log(id)
        });
        $('#input-id').on('filedeleted', function(event, key) {
            console.log('Key = ' + key);
        });
    }


    $(function(){
        init_upload('#small', 1, 1, 'listimg','small_pics');
        init_upload('#pic', 1, 1, 'detailimg','pic');

        $('#small').on('filebatchuploadcomplete', function(event, files, extra) {
            $('#pic').fileinput('upload');
        });


        $('#pic').on('filebatchuploadcomplete', function(event, files, extra) {
            $('#message_pic').fileinput('upload');
        });

        $('.registerForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh',
                excluded : ':disabled'
            },

            fields: {
                title: {
                    message: '标题无效',
                    validators: {
                        notEmpty: {
                            message: '标题不能是空的'
                        },
                        stringLength: {
                            max: 30,
                            message: '标题不能大于30个字符'
                        }
                    }
                },
                typeid: {
                    message: '类型无效',
                    validators: {
                        notEmpty: {
                            message: '类型必须选择'
                        }
                    }
                }
            }
        })
        .on('success.form.bv',function(e){
            e.preventDefault();
            var small_num = $('#small_container').find('.file-preview-thumbnails .file-preview-frame').length;
            var pic_num = $('#pic_container').find('.file-preview-thumbnails .file-preview-frame').length;

            if(small_num < 1){
                alert('请上传列表图');
                window.location.href = '#small_container'
                return false;
            }


            if(pic_num < 1){
                alert('请上传封面图');
                window.location.href = '#pic_container'
                return false;
            }

            var form = this;
            e.preventDefault();

            $('#pic').on('filebatchuploadcomplete', function(event, files, extra) {
                form.submit();
            });

            $('#small').fileinput('upload');
        })
    })

</script>



