<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
  <meta name="decorator" content="base" />
  <meta charset="utf-8">
  <title>新增</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/style/formSelects-v4.css" media="all">
  <style>
    .addForm .mark {
      color: #ff5151;
    }
    .edui-default .edui-editor {
      width: 100% !important;
    }
  </style>
</head>
<body>

<div class="layui-card mb-10" style="padding: 10px;">
  <div class="layui-form addForm layui-card-body over" lay-filter="add-form" id="addForm">
    <div class="layui-row">
      <div class="layui-form-item layui-col-sm11">
        <label class="layui-form-label"><span class="mark">*</span>公告名称：</label>
        <div class="layui-input-block">
          <input hidden value="${type}" name="objType" id="objType">
          <input type="text" id="title" name="title" lay-verify="required" class="layui-input" maxlength="30">
        </div>
      </div>
    </div>
    <c:if test="${type eq '1'}">
    <label class="layui-form-label"><span class="mark">*</span>通知群体：</label>
    <div class="layui-form-item">
    <div style="border:1px solid #ccc; margin-bottom:20px;" class="layui-row">
      <div class="layui-form-item mb-10 layui-col-sm11">
        <label class="layui-form-label">划分省份：</label>
        <div class="layui-input-block" id="pro">
            <input type="radio" name="isMany" title="多省" value="1" lay-filter="isMany" checked>
            <input type="radio" name="isMany" title="多市" value="2" lay-filter="isMany">
          <input type="radio" name="isMany" title="不选" value="3" lay-filter="isMany">
        </div>
      </div>

      <div class="layui-col-lg4 layui-col-sm11 mb-10 orderprovince ">
        <label class="layui-form-label">地址：</label>
        <div class="layui-input-block ">
          <select id="province" name="province"  xm-select="selectId" xm-select-type="1" xm-select-height="30px" xm-select-show-count="6">
            <option value=""></option>
            <c:forEach items="${pros}" var="pro">
              <option value="${pro.columns.ProvinceName}" title="${pro.columns.ProvinceID }">${pro.columns.ProvinceName}</option>
            </c:forEach>
          </select>
        </div>
      </div>

      <div class="layui-form-item layui-col-sm11 layui-hide orderCity mb-10">
        <label class="layui-form-label">地址：</label>
        <div class="layui-input-block">
            <div class="layui-col-lg5 layui-col-sm5 pr-30">
              <select id="ProvinceName" name="ProvinceName" lay-filter="ProvinceName" lay-search style="height: 36px;">
                <option value="">请选择省</option>
                <c:forEach items="${pros}" var="pro">
                  <option value="${pro.columns.ProvinceName}" title="${pro.columns.ProvinceID }" >${pro.columns.ProvinceName}</option>
                </c:forEach>
              </select>
            </div>
          <div class="layui-col-lg5 layui-col-sm5 ">
            <select id="city" name="city"  xm-select="CityId" xm-select-type="1" xm-select-height="30px" xm-select-show-count="6">
              <option value="">请选择市</option>

              <c:forEach items="${faccitys}" var="city">
                <option value="${city.columns.CityName}"  title="${city.columns.CityID}">${city.columns.CityName}</option>
              </c:forEach>
            </select>
          </div>
        </div>

      </div>

      <div class="layui-col-lg4 layui-col-sm11 mb-10">
        <label class="layui-form-label">用户：</label>
        <div class="layui-input-block ">
          <select id="customerId" name="customerId"  xm-select-search xm-select="customerId" xm-select-type="1" xm-select-height="30px" xm-select-show-count="6"  xm-select-search-type="dl">
            <option value=""></option>
            <c:forEach items="${cus}" var="pro">
              <option value="${pro.columns.cuId}" >${pro.columns.ps_name}</option>
            </c:forEach>
          </select>
        </div>
      </div>

      <div class="layui-col-lg4 layui-col-sm5 mb-10">
        <label class="layui-form-label">登陆次数：</label>
        <div class="layui-input-block">
          <div class="layui-col-xs5">
            <input type="text" id="login_num_min" name="loginNumMin" autocomplete="off" class="layui-input" placeholder="最小次数" >
          </div>
          <div class="layui-col-xs2 text-c lh-30">
            —
          </div>
          <div class="layui-col-xs5">
            <input type="text" id="login_num_max" name="loginNumMax" autocomplete="off" class="layui-input" placeholder="最大次数" >
          </div>
        </div>
      </div>
      <div class="layui-col-lg4 layui-col-sm6 mb-10">
        <label class="layui-form-label">建站时间：</label>
        <div class="layui-input-block">
          <div class="layui-col-xs5">
            <input type="text" id="station_building_start" name="stationBuildingStart" autocomplete="off" class="layui-input" placeholder="开始日期" readonly>
          </div>
          <div class="layui-col-xs2 text-c lh-30">
            —
          </div>
          <div class="layui-col-xs5">
            <input type="text" id="station_building_end" name="stationBuildingEnd" autocomplete="off" class="layui-input" placeholder="结束日期" readonly>
          </div>
        </div>
      </div>

    </div>
    </div>
    </c:if>
    <div class="layui-form-item layui-col-sm11">
      <label class="layui-form-label"><span class="mark">*</span>通知内容：</label>
      <div class="layui-input-block" style="margin-bottom: 10px;min-height: 314px;">
        <script id="container" name="content" type="text/plain">
        </script>
      </div>
    </div>



    <input type="hidden" name="html" lay-verify="htmlRule">

    <%--<div class="layui-form-item layui-hide ">
      <input type="button" lay-submit lay-filter="btnSubmit" id="btnSubmit" value="确认">
    </div>--%>
    <div class="layui-form-item " style="text-align: center;">
      <input type="button" class="layui-btn submitBut" lay-submit lay-filter="component-form-element" value="确认" >
    </div>
  </div>
</div>

<script type="text/javascript" src="${ctxPlugin}/lib/ueditor/1.4.3/ueditor.config.js"></script>
<script type="text/javascript" src="${ctxPlugin}/lib/ueditor/1.4.3/ueditor.all.js"></script>
<script type="text/javascript" src="${ctxPlugin}/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/lib/formSelects-v4.js"></script>
<script>
    var $;
    var formSelects;

    function formData() {
        var arr = [];
        var d = {
            /*  objType: objType,*/
            title: $("#title").val(),
            html: ue.getContent(),
            province: formSelects.value('selectId', 'nameStr')
        };
        return d;
    }

    layui.use(['form','table','laydate', 'formSelects'], function(){
        var form = layui.form;
        $ = layui.$;
    formSelects = layui.formSelects;
      laydate = layui.laydate;

      //formSelects.search('customerId', '关键内容');

        form.verify({
            htmlRule: function(val) {
                if (!ue.hasContents()) {
                    return "通知内容不能为空";
                }
              /*  if("${type}" == 1){

                  if (isBlank(formSelects.value('selectId', 'nameStr'))) {
                    return "请选择通知群体";
                  }
                }*/
            },
            /* xRule: function(val){
                 if ($("input:checkbox[name='objTypes']:checked").size() <=0) {
                     return "请选择通知群体";
                 }
             }*/
        });

        (function UEEdit() {
            window.UEDITOR_CONFIG.UEDITOR_HOME_URL = '${ctxPlugin}/lib/ueditor/1.4.3/';
            //防止图片过宽
            ue = UE.getEditor('container', {
                serverUrl: '${ctxPlugin}/lib/ueditor/1.4.3/jsp/controller.jsp',
                toolbars: [['bold', 'italic', 'underline', 'fontborder', 'forecolor', 'backcolor',
                    'fontfamily', 'fontsize', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify',
                    'simpleupload', 'insertimage','fullscreen']],
                autoHeightEnabled: false,
                autoFloatEnabled: false,
                elementPathEnabled: false,
                initialFrameHeight: 260,
                catcherUrlPrefix: '${commonStaticImgPath}',
                zIndex: 100
            });
            ue.ready(function () {
                ue.setContent('');
                $(this.container).click(function (e) {
                    e.stopPropagation();
                });
                // 解决悬浮问题
                if (UE.browser.ie && UE.browser.version <= 7) {
                    FixIe7Bug();
                }
            });
        })();


      //开始日期
      var startTime = laydate.render({
        elem: '#station_building_start'
        ,trigger: 'click'
      //  ,type: 'datetime'
        ,done: function(value, date){
          //更新结束日期的最小日期
          endTime.config.min = lay.extend({}, date, {
            month: date.month - 1
          });
          //自动弹出结束日期的选择器
          endTime.config.elem[0].focus();
        }
      });
      //结束日期
      var endTime = laydate.render({
        elem: '#station_building_end'
        ,trigger: 'click'
      //,type: 'datetime'
        ,done: function(value, date){
          //更新开始日期的最大日期
          startTime.config.max = lay.extend({}, date, {
            month: date.month - 1
          });
        }
      });

      var valid = false;
      form.on('submit(component-form-element)', function(data){
        if(valid){
          return
        }
       $(".submitBut").attr("disabled",true);
        valid = true;
        var postData = data.field;
      var objType = $("#objType").val();
      if(objType == "1"){
        var  province ="";
        var  city ="";
        var isMany = $('input[name="isMany"]:checked').val();

        if(isMany == 1){
          //获取选中得省
          province =  formSelects.value('selectId', 'nameStr');
        }else  if(isMany == 2){
          province = $("#ProvinceName").val();
          city =  formSelects.value('CityId', 'nameStr');
        }else{

        }
        var customerId = formSelects.value('customerId', 'valStr');
        var customerName= formSelects.value('customerId', 'nameStr');



        if(!isBlank(customerId)){
          postData.customerName = customerName;
          postData.customerId = customerId;
        }else{
          postData.customerName = "";
          postData.customerId = "";
        }



        if($(".orderisMany").hasClass("layui-hide")){
          postData.city="";
        }else{
          if(isMany == 1 &&isBlank(province)){
            layer.msg("请选择划分省份", {icon:2});
            $(".submitBut").attr("disabled",false);
            valid = false;
            return false;
          }else if(isMany == 2 && isBlank(city)){
            layer.msg("请选择划分市", {icon:2});
            $(".submitBut").attr("disabled",false);
            valid = false;
            return false;
          }else{
            postData.province = province;
            postData.city = city;
          }
        }

        if(isBlank(province)&&isBlank(postData.customerId) && isBlank(postData.loginNumMin)&& isBlank(postData.loginNumMax) && isBlank(postData.stationBuildingStart) && isBlank(postData.stationBuildingEnd)){
          layer.msg("请选择通知群体", {icon:2});
          $(".submitBut").attr("disabled",false);
          return false;
        }

      }

        var html = ue.getContent();
        if (!ue.hasContents()) {
          layer.msg("通知内容不能为空", {icon:2});
          $(".submitBut").attr("disabled",false);
          valid = false;
          return "";
        }


        postData.html = html;

        $.ajax({
          url: '${ctx}/notification/create',
          data: postData,
          type: 'post',
          async: false,
          success: function(result){
              console.log(result)
            if (result.code === "200") {
              parent.layer.msg("保存成功！", {icon: 1});
              parent.layer.closeAll();
              parent.table.reload('dataList');
            } else if (result.code === '402') {
              layer.msg("请选择通知群体！", {icon: 2});
            } else {
              layer.msg("保存失败！", {icon: 2});
            }
          },
          complete: function () {
            valid = false;
            $(".submitBut").attr("disabled",false);
          }
        });

      });

      form.on('radio(isMany)', function(data){
        var isMany = data.value;
        if(isMany== 1){
          //多省
          $(".orderprovince").removeClass("layui-hide");
          $(".orderCity").addClass("layui-hide");
          $("#province").val('');
          formSelects.render('selectId');
        }else  if(isMany== 2){
          //清空省市选择
          $("#ProvinceName").val('');
          $("#city").val('');
          form.render('select');
          formSelects.render('CityId');
          $(".orderprovince").addClass("layui-hide");
          $(".orderCity").removeClass("layui-hide");
        }else{

          $("#ProvinceName").val('');
          $("#city").val('');
          form.render('select');
          formSelects.render('CityId');
          $(".orderprovince").addClass("layui-hide");
          $(".orderCity").addClass("layui-hide");
          $("#province").val('');
          formSelects.render('selectId');
        }
      });

      form.on('select(ProvinceName)', function(data){
        var province = $(data.elem).find("option:selected").attr("title");
        provinceOrder(province)
      });

      function provinceOrder(province){
        $("#city").empty();
        if(isBlank(province)){
          $("#city").append("<option value=''>请选择市</option>");
          return "";
        }
        $.ajax({
          type:"POST",
          url:"${ctx}/main/redirect/getCitysByProId",
          data:{
            province:province
          },
          success:function(result){
            if(result =="205"){
              layer.msg("暂无数据!")
              return
            }
            var html =" <option value=''>请选择市</option>";
            for(var i=0;i<result.length;i++){
              var city = result[i];
              html =html+ '<option value="'+city.columns.CityName+'" title="'+city.columns.CityID+'">'+city.columns.CityName+'</option>';
            }
            $("#city").append(html);
            $(".xm-select-dl").css("height", "210px");
            formSelects.render('CityId');
          }
        });

      }


    });

    function isBlank(val) {
      if (val == null || $.trim(val) == '' || val == undefined) {
        return true;
      }
      return false;
    }

</script>
</body>
</html>
