<?php
/**
 * 学校管理编辑
 * $Id: school_edit.php,v 1.1 2020/01/03 11:18:46  Exp $
 * @author lixq
 * @package manager.public_html
 **/

?>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=<?=LBS_KEY?>"></script>
<style type="text/css">
		#container{
			width: 600px;
			height: 400px;
		}
	</style>
<div id="change">
	<p class="edit_title">学校编辑</p>
	<form id="form" action="school_edit_result.php" method="post" enctype="multipart/form-data">
	<div class="edit_content">
		<p>学校名称</p>
		<p class="begin_blank"><?=htmlspecialchars($school_mst->title) ?></p>
		<p>学校类型</p>
		<p class="begin_blank"><?=SchoolType::getTitleById($school_mst->school_type) ?>&nbsp;</p>
		<p>学校封面图</p>
		<a href='javascript:void(0);' class="el-button el-button--primary blueButton">选择文件</a>
				<input id="image_file" class="myFileUpload" name="front_image" type="file" accept="image/*"/>
			<div id="img_thumbnail">
      	<img id="imgshow" height="150px" alt="学校封面图" />
			</div>
		<p>学校介绍</p>
		<textarea v-model="comment" name="comment" rows="10"></textarea><br />
		<p>学校地址</p>
		<textarea v-model="address" id="address" name="address" rows="5" readonly="readonly"></textarea><br />
		<!-- 地图显示容器   -->
		<!--   定义地图显示容器   -->
		在地图上选择地址以更改学校地址
		<div id="container"></div>
		<input name="province" type="hidden" value="<?=$school_mst->province?>">
		<input name="city" type="hidden" value="<?=$school_mst->city?>">
		<input name="district" type="hidden" value="<?=$school_mst->district?>">
		<input name="street" type="hidden" value="<?=$school_mst->street?>">
		<input name="longitude" type="hidden" value="<?=$school_mst->longitude?>">
		<input name="latitude" type="hidden" value="<?=$school_mst->latitude?>">
		<input name="id" type="hidden" value="<?=$school_mst->id?>">
		<br/><br/>
		<el-button type="danger" @click="edit()" class="edit_btn">编辑</el-button>
		<?if($can_back){?>
			<el-button type="danger" @click="back()" class="edit_btn">返回</el-button>
		<?}?>
		<br/><br/>
	</div>
	</form>
</div>
<script type="text/javascript">
	new Vue({
		el:'#change',
		data:{
			id:<?=$id?>,
			name:'<?=htmlspecialchars($school_mst->title) ?>',
			address:'<?=$school_mst->address ?>',
			comment:'<?=$school_mst->comment?>',
			
		},
		
		methods:{
			edit:function(){
				if(!this.comment){
					this.$message({
		            type: 'error',
		            message: '请输入学校介绍!'
		          });
		          return;
				}
				$('#form').submit();
			},
			back:function(){
			  window.history.go(-1);
			}
		}
	})


	
</script>
<script>
		window.onload = function(){
		    //初始化地图函数
		    function init() {
		    	// 地图的中心地理坐标
		    	var center = new qq.maps.LatLng(<?=$school_mst->longitude?$school_mst->longitude:39.914850?>, 
		    	                               <?=$school_mst->latitude?$school_mst->latitude:116.403765?>);

			    //定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
				var map = new qq.maps.Map(
				    document.getElementById("container"),
				    {
				        center: center,		
				        zoom: 13			// 地图的缩放级别。
				    }
				);

				//获取城市列表接口设置中心点
			    citylocation = new qq.maps.CityService({
			        complete : function(result){
			            map.setCenter(result.detail.latLng);
			        }
			    });
			    //调用searchLocalCity();方法    根据用户IP查询城市信息。
			    citylocation.searchLocalCity();

		        // 监听地图点击事件
		        qq.maps.event.addListener(map,'click',function(event) {
		        	var position = new qq.maps.LatLng(event.latLng.getLat(), event.latLng.getLng());

		        	createMarker(position, map);

		        	geocoder = new qq.maps.Geocoder({
				        complete : function(result){
				            map.setCenter(result.detail.location);
				            console.log(result);
				            $("#address").val(result.detail.address);
				            $("input[name='province']").val(result.detail.addressComponents.province);
								    $("input[name='city']").val(result.detail.addressComponents.city);
								    $("input[name='district']").val(result.detail.addressComponents.district);
								    $("input[name='street']").val(result.detail.addressComponents.streetNumber?result.detail.addressComponents.streetNumber:result.detail.addressComponents.street);
				        }
				    });
				    geocoder.getAddress(position);
				    $("input[name='longitude']").val(event.latLng.getLng());
				    $("input[name='latitude']").val(event.latLng.getLat());
				});
		    }

		    //调用初始化函数地图
		    init();
		    var markersArray = [];

		    /*添加覆盖物*/
		    function createMarker(position, map) {
		    	deleteOverlays();
		    	var marker = new qq.maps.Marker({
				    position: position,
				    map: map
				});
				markersArray.push(marker);
		    }

		    /*删除覆盖物*/
			function deleteOverlays() {
			    if (markersArray) {
			        for (i in markersArray) {
			            markersArray[i].setMap(null);
			        }
			        markersArray.length = 0;
			    }
			}

		    /*添加比例尺控件 左下角*/
		    function scaleControl(map) {
		        var scaleControl = new qq.maps.ScaleControl({
				    align: qq.maps.ALIGN.BOTTOM_LEFT,
				    margin: qq.maps.Size(85, 15),
				    map: map
				});
		    }
		    if(<?=$school_mst->front_image?1:0 ?>){
				  $('#imgshow').get(0).src = '<?=$school_mst->front_image?>';
				  $('#img_thumbnail').css("visibility","visible");
				}
		    $('#image_file').change(function(){
		      var file = $('#image_file').get(0).files[0];
		      var reader = new FileReader();
		      reader.readAsDataURL(file);
		      reader.onload=function(e){
		        $('#imgshow').get(0).src = e.target.result;
		      }
		      $('#img_thumbnail').css("visibility","visible");
		    })
		}
	</script>