{layout name="layout" /}
<style>
a ,a:hover{
    color: #fff;
    text-decoration: none;
}
.set_con {
    width: 100%;
    height: auto;
    float: left;
    background-color: #fff;
    min-width: 1130px;
    overflow: auto;
    box-sizing: border-box;
    padding-left: 50px;
}
.layui-form-item {
    /* margin-bottom: 15px; */
    clear: both;
    width: 1130px;
    margin: 10px 0;
    float: left;
}
.layui-input, .layui-textarea {
    width: 190px;
}
#if_con {
    overflow: auto;
	background:#fff;
}
.display{
	display:none;
}
#editor{
	width:800px;
	min-height:500px;
}
.height590{
	min-height:590px
}
.layui-form-label {
    width: 100px;
}
.layui-input-block {
    margin-left: 129px;
}
</style>
<div class="if_wrap">
<div id="if_con">
        	<div class="cus-con">
 <div class="set-top">
    <div class="layui-btn"><a href="{:url('vip/activity/index');}">返回活动列表</a></div>

 </div>
<form class="layui-form layui-form-pane1" action="" method="post" id="addform" enctype="multipart/form-data">

    <div class="layui-row">

        <div class="layui-col-sm6">
            <input type="hidden" name="id" value="{$data.id}" />
            <div class="layui-form-item">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" value="{$data.name|trim}"  class="layui-input" lay-verify="required|name" required placeholder="请输入姓名" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">职位</label>
                <div class="layui-input-block">
                    <input type="text" name="post" value="{$data.post|trim}"  class="layui-input" lay-verify="required|post" required placeholder="请输入职位" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" value="{$data.phone|trim}" maxlength="11" onkeyup='this.value=this.value.replace(/\D/gi,"")'  class="layui-input" lay-verify="required|phone" required placeholder="请输入手机号" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" >首页展示图<br/><span class="imgsize"><!-- 宽{$imgsize['index'][0]}px*高{$imgsize['index'][1]}px --></span></label>
                <button type="button" class="layui-btn" id="cover_img" lay-verify="coverimgfile" required>
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button><br/>
                <img src="__PUBLIC__/uploads/{$data.cover_img}" id="cover_imginput"  height="120" style="margin-top:10px;" class="{$data.cover_img?'':'display'}"/>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" >头像<br/><span class="imgsize"><!-- 宽{$imgsize['hot'][0]}px*高{$imgsize['hot'][1]}px --></span></label>
                <button type="button" class="layui-btn" id="head_img" lay-verify="head_imgfile" >
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button><br/>
                <img src="__PUBLIC__/uploads/{$data.head_img}"  id="head_imginput"  height="120" style="margin-top:10px;" class="{$data.head_img?'':'display'}"/>
            </div>
            <div class="layui-form-item" pane>
                <label class="layui-form-label" >微信二维码<br/><span class="imgsize"><!-- 宽{$imgsize['share'][0]}px*高{$imgsize['share'][1]}px --></span></label>
                <button type="button" class="layui-btn" id="qr_img" >
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button><br/>
                <img src="__PUBLIC__/uploads/{$data.qr_img}"  id="qr_imginput" height="120" style="margin-top:10px;" class="{$data.qr_img?'':'display'}"/>
            </div>
        </div>
        <div class="layui-col-sm6" >

            <div class="layui-row" style="min-height:40px">
                <div class="layui-col-sm2">
                    <label class="layui-form-label" style="float:right;">附近街道</label>
                </div>

                <div class="layui-col-sm4">
                    <input class="layui-input" name="address" id="suggestId">
                    <input type="hidden" name="longitude">
                    <input type="hidden" name="latitude">
                </div>

            </div>

            <div class="layui-row" >

                <div class="layui-col-sm2">
                    <label class="layui-form-label" style="float:right;"></label>
                </div>
                <div class="layui-col-sm5">
                    <label class="layui-form-label" style="text-align:left;width:100%">
                        经度纬度:<span id="longitude_latitude"></span>
                    </label>
                    <div id="baidu_map" style="width:500px;height:500px;overflow:hidden !important; border:1px solid #dcdcdc"></div>
                </div>

            </div>
        </div>
    </div>

  <div class="layui-form-item" style="height:100px">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary back">返回活动列表</button>
    </div>
  </div>


<!--   <input type="hidden" name="couponid" value="{$data.couponid}" /> -->
</form>
</div>
</div>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/editor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/editor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/editor/lang/zh-cn/zh-cn.js"></script>
    <!-- 百度地图插件 -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=qfU35pBQvxv5gg85SirPvDaZMe5C3FCH"></script>

    {if condition="$data['id']"}
    <script type="text/javascript">
        layui.use(['form'], function(){
            var $=layui.jquery;
            var form=layui.form

            $('input[name="address"]').val("{$data['address']}");
            setTimeout(function(){
                var address = "{$data['address']}";
                if($('input[name="address"]').val() != address)
                {
                    $('input[name="address"]').val(address)
                }
            },2000);

            // 百度地图 选定 原来的点
            $('#longitude_latitude').html("{$data['longitude']}"+','+"{$data['latitude']}");
            var lng = "{$data['longitude']}";
            var lat = "{$data['latitude']}";

            var point = new BMap.Point(lng, lat);

            // 清空标记
            map.clearOverlays();

            // 创建标注
            var marker = new BMap.Marker(point);

            // 将标注添加到地图中
            map.addOverlay(marker);

            // 设置中心点
            map.panTo(point);

            //
            form.render()
        })
    </script>
    {/if}

    <script type="text/javascript">
        function G(id){
            return document.getElementById(id);
        }

        // 百度地图API功能
        var map = new BMap.Map("baidu_map");

        // 设置一个点 作为地图的中心点
        var point = new BMap.Point(116.404, 39.915);

        // 初始化地图
        map.centerAndZoom(point, 14);

        // 开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true);

        // 添加控件(放大缩小)
        map.addControl(new BMap.NavigationControl());


        // 页面上的 搜索框 - 点击事件 ------------------- 开始 ----------------------
        // 建立一个自动完成的对象(input 框 点击事件)
        var ac = new BMap.Autocomplete(
                {
                    "input" : "suggestId",
                    "location" : map
                }
        );

        //鼠标放在下拉列表上的事件(input 框 点击事件)
        ac.addEventListener("onhighlight", function(e)
        {
            var str = "";
            var _value = e.fromitem.value;
            var value = "";

            if (e.fromitem.index > -1) {
                value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            }
            str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

            value = "";
            if (e.toitem.index > -1) {
                _value = e.toitem.value;
                value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            }
            str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
            // G("searchResultPanel").innerHTML = str;
        });

        //鼠标点击下拉列表后的事件(input 框 点击事件)
        ac.addEventListener("onconfirm", function(e)
        {
            var _value = e.item.value;
            var myValue;
            myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            setPlace(myValue);
        });

        // 根据输入框的文字锁定 地图上的点
        function setPlace(myValue)
        {
            //智能搜索
            var local = new BMap.LocalSearch(
                    map,
                    {
                        onSearchComplete: function(){
                            //获取第一个智能搜索的结果
                            var point = local.getResults().getPoi(0).point;

                            map.centerAndZoom(point, 18);

                            // console.log(point)
                            // map.panTo(point, 18);

                            //清除地图上所有覆盖物
                            map.clearOverlays();

                            //添加标注
                            map.addOverlay(new BMap.Marker(point));

                            var lng=point.lng
                            var lat=point.lat

                            // 页面val
                            $('input[name="longitude"]').val(lng);
                            $('input[name="latitude"]').val(lat);
                            $('input[name="address"]').val(myValue);
                            $('#longitude_latitude').html(lng+','+lat);

                        }
                    }
            );

            local.search(myValue);
        }
        // 页面上的 搜索框 - 点击事件 ------------------- 结束 ----------------------

        // 页面上的 地图 - 点击事件 ------------------- 开始 ----------------------
        // 获取 街道名 根据 点
        function get_addressStr_by_point(point,callback)
        {
            var geoc = new BMap.Geocoder();
            geoc.getLocation(point, function(rs){
                var addComp = rs.addressComponents;
                var address = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber
                callback(address)
            });
        }

        // 地图添加点击事件
        map.addEventListener("click", function(e){
            var point = e.point
            var lng = e.point.lng
            var lat = e.point.lat
            // console.log(lng)
            // console.log(lat)

            // 清空标记
            map.clearOverlays();

            // 创建标注
            var marker = new BMap.Marker(point);

            // 将标注添加到地图中
            map.addOverlay(marker);

            // 设置中心点
            map.panTo(point);

            // 点 变为 街道
            get_addressStr_by_point(point,function(res){
                $('input[name="address"]').val(res);
            })

            // 页面val
            $('input[name="longitude"]').val(lng);
            $('input[name="latitude"]').val(lat);

            $('#longitude_latitude').html(lng+','+lat);

        })
            // 页面上的 地图 - 点击事件 ------------------- 开始 ----------------------

</script>
<script>
layui.use('upload', function(){
   var upload = layui.upload;

   //执行实例
   var uploadInst = upload.render({
     elem: '#cover_img' //绑定元素
     ,url: "{:url('vip/activity/upload')}" //上传接口
  ,auto: false
  ,field: 'cover_img'
  ,choose: function(obj){
      var files = obj.pushFile();
      obj.preview(function(index, file, result){
        $("#cover_imginput").attr('src',result).show();
      });
    }
   });
   //执行实例
   var uploadInst = upload.render({
     elem: '#head_img' //绑定元素
     ,url: "{:url('vip/activity/upload')}" //上传接口
     ,auto: false
     ,field: 'head_img'
  ,choose: function(obj){
      var files = obj.pushFile();
      obj.preview(function(index, file, result){
        $("#head_imginput").attr('src',result).show();
      });
    }
   });
   //执行实例
   var uploadInst = upload.render({
     elem: '#qr_img' //绑定元素
     ,url: "{:url('vip/activity/upload')}" //上传接口
     ,auto: false
     ,field: 'qr_img'
  ,choose: function(obj){
      var files = obj.pushFile();
      obj.preview(function(index, file, result){
        $("#qr_imginput").attr('src',result).show();
      });
    }
   });

});


layui.use('laydate', function(){
  var laydate = layui.laydate;
  //同时绑定多个
  lay('.test-item').each(function(){
    laydate.render({
      elem: this
      ,trigger: 'click',
      choose: function(datas){ //选择日期完毕的回调
    	  alert(1)
       /*    end.min = datas; //开始日选好后，重置结束日的最小日期
          end.start = datas //将结束日的初始值设定为开始日 */
     }
    });
  });
  
})

layui.use('form', function(){
  var form = layui.form;
  //自定义验证规则
  form.verify({
    title: function(value){
      if(value.length == ""){
        return '姓名不能为空';
      }
    }
    ,pass: [/(.+){6,50}$/, '密码必须6到50位']
  });
  form.on('radio', function(data){
    console.log(data);
  });
  //  //事件监听
  // form.on('select', function(data){
  // 	  var coupouid = $("select[name=couponid]").val();
	 //  if(coupouid>0){
		//   for(i in coupons){
		// 	  if(coupons[i].id==coupouid){
		// 		  $("#couponimg").attr('src','__PUBLIC__/uploads/'+coupons[i].img);
		// 	  }
		//   }
	 //  }
  // 	  return false;
  // })
  //监听提交
  form.on('submit(*)', function(data){
	var formid = document.getElementById("addform");
	var sformData = new FormData(formid);  
	$.ajax({
		type:"post",
		url:"{:url('vip/namecard/edit')}",
		data:sformData,
		processData: false,  // 不处理数据
		contentType:false,
		success:function(s){
		if(s.code==200){
		    layer.open({
            content: '修改成功！',
            btn: ['确认'],
            yes: function(index, layero) {
                window.location.href="{:url('vip/namecard/edit')}";
            }
        });
		}else{
			layer.msg('修改失败', {
			    icon: 2,
			});
		}
		return false;
	}})
    return false;
  });
});


//图片显示
$("#imginput,#shareimginput").on('change',function(){
	imgbox = 'imgbox';
	if($(this).attr('id')=='shareimginput'){
		imgbox = 'shareimgbox';
	}
	imgView(this,imgbox);
});

// 图片显示处理函数
function imgView(filedom,imgbox){
	//console.log(filedom);
	// 判断是否支持fileReader
	if(window.FileReader){
		var reader = new FileReader();
		// 获取文件
		var file = filedom.files[0];
		var imagetype = /^image\//;
		// 判断是否是图片
		console.log(file);
		console.log(file.type); 
		if(!imagetype.test(file.type)){
			alert('请上传正确图片类型文件');
			return;
		}
		// 读取完成
		reader.onload = function(e){
			// 获取图片dom
			var img = document.getElementById(imgbox);
			// 图片路径设置为读取的图片
			img.src = e.target.result;
			$("#"+imgbox).show();
		};
		reader.readAsDataURL(file);
	}
	
} 
</script>
</body>
</html>