{layout name="public/layout_main"}
<link rel="stylesheet" href="/static/validation/css/validationEngine.jquery.css">
<link rel="stylesheet" href="/static/fileinput/css/fileinput.css">
<link rel="stylesheet" href="/static/bootstrap-select/css/bootstrap-select.min.css">
<link rel="stylesheet" href="/static/datetimepicker/css/bootstrap-datetimepicker.min.css">


<style type="text/css">
.progress-bar{
    text-align: center;
}
.dropdown-menu{
    z-index: 100000;
}
</style>
<section class="wrapper">
    <h3 class="">

    </h3>
    <h3><i class="fa fa-angle-right"></i> <a href="{:url('admin/project/index')}">活动/商家列表</a> <i class="fa fa-angle-right"></i> 创建活动/商家</h3>

    <hr>

    <?php if(isset($msg) && $msg):?>
    <div class="row margin-bottom">
        <div class="col-md-12">
            <div class="alert alert-danger alert-dismissible fade in" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                <?php echo $msg;?>
            </div>
        </div>
    </div>
    <?php endif;?>

    <div class="row margin-bottom">
        <div class="col-md-12">
            <!-- <form name="myFrom" id="myFrom" class="form-horizontal" enctype="multipart/form-data" method="POST" action="<?php echo url("@admin/project/create")?>" id="article-create-form"> -->
            <form name="myFrom" id="myFrom" class="form-horizontal" enctype="multipart/form-data">
              <div class="form-group">
                  <label for="title" class="col-sm-2 control-label text-right">类型</label>
                  <div class="col-sm-20 col-md-8 col-lg-6">
                    <select name="type" id="peoject_type" class="form-control">
                      <option value="1">活动</option>
                      <option value="2">商家</option>
                    </select>
                  </div>
              </div>
                <div class="form-group">
                    <label for="title" class="col-sm-2 control-label text-right">名称</label>
                    <div class="col-sm-20 col-md-8 col-lg-6">
                        <input type="text" class="form-control validate[required]" name="title" id="title" placeholder="活动/商家名称" >
                    </div>
                </div>
                <div class="form-group">
                    <label for="title" class="col-sm-2 control-label text-right">国内/国外</label>
                    <div class="col-sm-20 col-md-8 col-lg-6">
                      <select name="region_type" id="region_type" class="form-control">
                        <option value="1">国内</option>
                        <option value="2">国外</option>
                      </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="title" class="col-sm-2 control-label text-right">活动时间</label>
                    <div class="col-sm-20 col-md-8 col-lg-6">
                        <input type="text" class="form-control validate[required,custom[dateTime]]" name="time_period" id="start" placeholder="请填写活动时间">
                    </div>
                </div>
                <div class="form-group">
                    <label for="title" class="col-sm-2 control-label text-right">报名截止时间</label>
                    <div class="col-sm-20 col-md-8 col-lg-6">
                        <input type="text" class="form-control validate[required,custom[dateTime]]" name="sign_endtime" id="end" placeholder="请填写报名截止时间">
                    </div>
                </div>
                <div class="form-group">
                    <label for="title" class="col-sm-2 control-label text-right">组数限制</label>
                    <div class="col-sm-20 col-md-8 col-lg-6">
                        <input type="text" class="form-control validate[required,custom[number]]" name="sign_limits" id="sign_limits" placeholder="限制家庭组数">
                    </div>
                </div>
                <div class="form-group">
                    <label for="title" class="col-sm-2 control-label text-right">分类</label>
                    <div class="col-sm-20 col-md-8 col-lg-6">
                        <select class="form-control selectpicker" name='catalog_id' id="catalog_id" data-live-search="true">
                            {volist name="catalog_list" id="vo"}
                            <option value="{$vo.id}">{$vo.name}</option>
                            {/volist}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="title" class="col-sm-2 control-label text-right">城市</label>
                    <div class="col-sm-20 col-md-8 col-lg-6">
                        <select class="form-control selectpicker" name='city' id="city" data-live-search="true">
                            {volist name="city_list" id="vo"}
                            <option value="{$vo.id}">{$vo.name}</option>
                            {/volist}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="title" class="col-sm-2 control-label text-right">标签</label>
                    <div class="col-sm-20 col-md-8 col-lg-6">
                        <select class="selectpicker form-control" id="tags_select"  multiple data-live-search="true">
                            {volist name="tag_list"  id="vo"}
                            <option value="{$vo.id}">{$vo.name}</option>
                            {/volist}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="title" class="col-sm-2 control-label text-right">价格</label>
                    <div class="col-sm-20 col-md-8 col-lg-6">
                        <input type="text" class="form-control validate[required,custom[number]]" name="" id="price" placeholder="价格">
                    </div>
                </div>
                <div class="form-group">
                    <label for="title" class="col-sm-2 control-label text-right">会员价</label>
                    <div class="col-sm-20 col-md-8 col-lg-6">
                        <input type="text" class="form-control validate[required,custom[number]]" name="" id="vip_price" placeholder="价格">
                    </div>
                </div>
                <!-- <input type="hidden" id="poster" name="poster"> -->
                <div class="form-group">
                  <label for="title" class="col-sm-2 control-label text-right" >封面</label>
                  <div class="col-sm-20 col-md-8 col-lg-6">
                    <input id="input-b1" name="" type="file">
                  </div>
                </div>

                <!-- <input type="hidden" name="banners" id="banners"> -->
                <div class="form-group">
                    <label for="title" class="col-sm-2 control-label text-right" >轮播图</label>
                    <div class="col-sm-20 col-md-8 col-lg-6">
                        <input id="input-b2" name=""  multiple type="file">
                    </div>
                </div>
                <!-- <input type="hidden" name="kf_qrcode" id="kf_qrcode"> -->
                <div class="form-group" id="qrcode" style="display:none">
                    <label for="title" class="col-sm-2 control-label text-right" >客服二维码</label>
                    <div class="col-sm-20 col-md-8 col-lg-6">
                        <input id="input-b3" name="" type="file">
                    </div>
                </div>

                <div class="form-group" id="content">
                    <label for="content" class="col-sm-2 control-label text-right">详细介绍</label>
                    <div class="col-sm-20 col-md-8 col-lg-6">
                        <!-- 加载编辑器的容器 -->
                        <script id="post_container" name="description" type="text/plain" style="width: 100%">
                        </script>
                    </div>
                </div>
            </form>
            <div class="form-group">
                <div class="col-sm-offset-2">
                    <button class="btn btn-success" id="btn-save">提交</button>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- 文件上传和select插件 -->
<script type="text/javascript" src="/static/fileinput/js/fileinput.min.js"></script>
<script type="text/javascript" src="/static/fileinput/js/locales/zh.js"></script>
<script type="text/javascript" src="/static/bootstrap-select/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="/static/bootstrap-select/js/i18n/defaults-zh_CN.js"></script>
<script type="text/javascript" src="/static/validation/js/jquery.validationEngine-zh_CN.js"></script>
<script type="text/javascript" src="/static/validation/js/jquery.validationEngine.js"></script>
<script type="text/javascript" src="/static/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="/static/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

                        <!-- 配置文件 -->
<script type="text/javascript" src="/static/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/static/ueditor/ueditor.all.js"></script>

<script type="text/javascript">
$(function(){
    $("#myFrom").validationEngine();
    // 即时显示封面图
    // $('#poster').change(function(e){
    //     var file = e.target.files[0];
    //     preview(file, 0);
    // });
});

$("#peoject_type").change(function(){
  if($(this).val()==2){
    $("#qrcode").show();
  }else{
    $("#qrcode").hide();
  }
});
$("#start").datetimepicker({
  language: 'zh-CN',
  autoclose: true,
  format: 'yyyy-mm-dd hh:ii:00'
});
$("#end").datetimepicker({
  language: 'zh-CN',
  autoclose: true,
  format: 'yyyy-mm-dd hh:ii:00'
});
// 初始化文件上传
initFileInput($("#input-b1"));
initFileInput($("#input-b3"));
// 单文件上传
function initFileInput(el,name,overwrite,save){
    el.fileinput({
    language: 'zh',
    uploadExtraData:{'name':name},
    // uploadUrl:"{:url('admin/Upload/savaAsync')}", //上传的地址
    // initialPreviewAsData: true,
    dropZoneEnabled: false,
    showRemove :false,
    autoReplace : true,
    showUpload:false, //是否显示上    传按钮
    // dropZoneEnabled: false,
    // overwriteInitial:overwrite,
    // showUploadedThumbs:true,
    allowedFileExtensions: ['bmp','jpg','png','tif','gif','pcx','tga','exif','fpx','svg','cdr','pcd','dxf','ufo','eps','raw','WMF','webp'],//接收的文件后缀
  })
}
// 多文件上传
var fileUpload = $("#input-b2").fileinput({
    language: 'zh',
    // initialPreview: [
    //     'http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/631px-FullMoon2010.jpg',
    //     'http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Earth_Eastern_Hemisphere.jpg/600px-Earth_Eastern_Hemisphere.jpg'
    // ],
    uploadExtraData:{'name':'banner-choose'},
    // initialPreviewConfig: [{
    //            url: '{:url('admin/project/upProjectPoster')}',// 预展示图片的删除调取路径
    //            key: 100,// 可修改 场景2中会用的
    //            extra: {id: 100} //调用删除路径所传参数
    //        }],
    initialPreviewShowDelete:true,
    initialPreviewAsData: true,
    // uploadUrl:"##", //上传的地址
    // uploadUrl:"{:url('admin/Upload/savaAsync')}", //上传的地址
    dropZoneEnabled: false,
    showRemove :false,
    autoReplace : true,
    showUpload:false, //是否显示上    传按钮
    dropZoneEnabled: false,
    overwriteInitial:false,
    showUploadedThumbs:false,
    allowedFileExtensions: ['bmp','jpg','png','tif','gif','pcx','tga','exif','fpx','svg','cdr','pcd','dxf','ufo','eps','raw','WMF','webp'],//接收的文件后缀
});

function setTags(that,name){
    var slected = $(that).val();
    if(slected){
        $("input[name=\'"+name+"\']").val(slected.toString());
    }else{
        $("input[name=\'"+name+"\']").val("");
    }
}
var ueditor =  UE.getEditor('post_container', {
    //编辑区域大小
    'initialFrameHeight' : '350',
    'elementPathEnabled':false,
    'autoHeight': true,
    'autoHeightEnabled':true,
    'autoFloatEnabled': true,
    'iframeCssUrl': '/static/ueditor/themes/iframe.css',// 引入css
    //定制菜单
    'toolbars' : [
        [
            'fullscreen', 'source', 'undo', 'redo', '|',
            'fontsize',
            'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat',
            'formatmatch', 'blockquote', 'pasteplain', '|',
            'forecolor', 'backcolor', '|',
            'lineheight', '|',
            'indent', '|', 'insertimage', '|',
            'justifyleft', //居左对齐
            'justifyright', //居右对齐
            'justifycenter', //居中对齐
            'justifyjustify', //两端对齐
        ],
    ]
});
  $("#btn-save").click(function() {
      $(this).attr("disabled", "true");
      var validate = $('#myFrom').validationEngine('validate')
      if (!validate) {
          $(this).removeAttr("disabled");
          return;
      }
      var formValue = new FormData();
      var poster = $('#input-b1').fileinput('getFileStack');
      var banners = $('#input-b2').fileinput('getFileStack');
      var qcode = $('#input-b3').fileinput('getFileStack');
      if (poster.length < 1) {
          alert('封面必须上传');
          $(this).removeAttr("disabled");
          return;
      }
      if (banners.length < 1) {
          alert('至少上传一张轮播图');
          $(this).removeAttr("disabled");
          return;
      }
      if ($("#peoject_type").val() == 2) {
          if (qcode.length < 1) {
              alert('商家必须上传客服二维码');
              $(this).removeAttr("disabled");
              return;
          }
          formValue.append('kf_qrcode', qcode[0]);
      }

      formValue.append('type', $("#peoject_type").val());
      formValue.append('title', $("#title").val());
      formValue.append('region_type', $("#region_type").val());
      formValue.append('time_period', $("#start").val());
      formValue.append('sign_endtime', $("#end").val());
      formValue.append('sign_limits', $("#sign_limits").val());
      formValue.append('catalog_id', $("#catalog_id").val());
      formValue.append('city', $("#city").val());
      var tagArr = $("#tags_select").val();
      var tagStr = null;
      if (tagArr) {
          for (var i = 0; i < tagArr.length; i++) {
              if (i == 0) {
                  tagStr = '|';
              }
              tagStr += tagArr[i] + '|';
          }
      }
      formValue.append('tags', tagStr);
      formValue.append('price', $("#price").val());
      formValue.append('vip_price', $("#vip_price").val());
      formValue.append('description', ueditor.getContent());
      // var formValue = new FormData(document.getElementById('myFrom'));

      // formValue.append('poster[]',poster);

      formValue.append('poster', poster[0]);
      for (var i = 0; i < banners.length; i++) {
          formValue.append('banners[]', banners[i]);
      }
      $.ajax({
          url: "{:url('admin/project/create')}",
          type: "POST",
          data: formValue,
          processData: false,  // 不处理数据
          contentType: false,  // 不设置内容类型
          success: function (data) {
              if (data['code'] == 1) {
                  showDialog("提示", data['msg'], function () {
                      window.location.href = "{:url('admin/project/index')}";
                  });
              } else {
                  showDialog("提示", data['msg'], function () {
                      $("#btn-save").removeAttr("disabled");
                  });
              }
          }
      })
  })
</script>