<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<div class="header-title-nobg table com-head">
	<div>
		<h1>自动生成拓扑图</h1>
	</div>
	<div class="borderClass"></div>
</div>
<div class="table-forms-container">
	<div class="creatBorder clearfix">
		<div class="table-forms-box">
			<ul class="table-forms">
				<li>
					<div class="table-forms-td-left">
						<label>拓扑图名称</label>
					</div>
					<div class="table-forms-td-right">
						<input type="text" maxlength="255" autofocus="autofocus" id="name">
					</div>
				</li>
				<li>
					<div class="table-forms-td-left">
						<label>中心点</label>
					</div>
					<div class="table-forms-td-right" id="networkbox">
						<div class="multiselect-button">
							<select style="width: 165 px" id="switchBoard" name="switchBoard"
								autocomplete="off" onchange="changeSrc(this)">
								<!-- <option value="0" id="option0" selected="selected">默认模式</option>
				     				<option value="3" id="option1">tyuiiyuiyuiyuiyuitereruurrtutu</option>
				     				<option value="4" id="option2">扇形</option> -->
							</select>

						</div>
					</div>
				</li>
				<li>
					<div class="table-forms-td-left">
						<label>Community</label>
					</div>
					<div class="table-forms-td-right">

						<input type="text" maxlength="255" autofocus="autofocus"
							id="community" value="public" onfocus="if(value=='"
							public"'){value='' }" 
    			onblur="if(value==''){value='" public"'}"/>

					</div>
				</li>
			</ul>
			<p class="creatWaring">仅支持思科交换机</p>
		</div>
		<%-- <div class="table-model-box">
			     	<div class="table-model-box-img">
			     		<img src="${ctx}/img/model-img/0.png" id="modelimg">
			     	</div>
			     	<p class="table-model-box-name" id="modelname">默认模式</p>
			     </div> --%>
	</div>

	<ul class="table-forms">
		<li>
			<div class="table-forms-td-right tfoot-buttons">
				<button type="button" class="creatBtn" id="add" name="add"
					value="生成" onclick="createMap()">生成</button>
				<button type="button" id="cancel" name="cancel"
					onclick="javascript: return redirect('../php/sysmaps.php?map_type=1');"
					class="btn-border btn-alt">取消</button>
			</div>
		</li>
	</ul>
</div>


<div id="ld"
	style="display: none; position: fixed; height: 40px; width: 130 px; left: 50%; margin-left: -60px; bottom: 400px; background-color: #FFFFFF; z-index: 1000; border: 1px solid #888; padding: 2px; background: #f1f1f1;">
	<div id="center"
		style="padding: 11px; border: 1px solid #999; background: #fff;">
		正在生成,请稍候...</div>
</div>




<script>
	//增加网段

var selectGroup=jQuery('#switchBoard');
var id=0;

jQuery.ajax({
	  method: "get",
	  url: "${ctx}/createfromhost/listHostGroupsWithHosts.json",
		  
	  success:function(data) {
		  //debugger
		   var a = "1";
		   var html=''; 
		   html+='<option data-value="'+data[0].host+'">'+data[0].name+'</option>'
		   for(var i=1;i<data.length;i++){
			  
			  html += '<option data-value="'+data[i].host+'">'+data[i].name+'</option>';
		   }
		  jQuery('#switchBoard').html(html);
		  //var number=selectGroup.find("option:first-child").attr('data-value');
		  //id=number;
	  },
	  error:function(err){
		  alert(err);
	  }
  });
	
	function AddRunningDiv() {
		jQuery("#ld").css({ display: "block" });
		//debugger
		
	}


	function MoveRunningDiv() {
		jQuery("#ld").css({ display: "block" });
	}

	
	function createMap(){
		//debugger
		var name=jQuery('#name').val();
		if(name==''){
			alert("请输入拓扑图名称");
			return;
		}

		var switchBoard = jQuery("#switchBoard").find("option:selected").attr('data-value');
		var community = jQuery('#community').val();
		console.log("community" + community);
		if(community==""){
			alert("输入团体字");
			return;
		}
		//http://180.168.156.212:2337/cesmonitor/map/autoCreate?name=aaa5&ip=10.250.200.254&community=public
		jQuery.ajax({ 
			url: "${ctx}/map/autoCreate",
			type: "POST",
			data:{
				name:name,
				ip:switchBoard,
				community:community
			},
			beforeSend: function(){
				
				AddRunningDiv();
				document.getElementById("add").setAttribute("disabled", true);;
			    },

			success: function(msg){
				MoveRunningDiv();
				//alert(msg);
				window.location="../php/sysmaps.php?map_type=1";
			},
			error:function(err){
				alert(err);
			}
		});
	}
	
	
	function changeSrc(e) {
		var value = e.value,
			text =jQuery('#option'+value).text();
		if (value) {
			var img = document.getElementById("modelimg");
			img.setAttribute('src',"${ctx}/img/model-img/"+value+".png");
			jQuery("#modelname").html(text);
		}
	}
		
	jQuery('#option1').click(function(){
		$(".table-model-box div img").attr('src',"${ctx}/img/model-img/0.jpg"); 
		console.log(1111)
	})
	jQuery('#option2').click(function(){
		$(".table-model-box div img").attr('src',""); 
	})
	jQuery('#option3').click(function(){
		$(".table-model-box div img").attr('src',""); 
	})
		
		
</script>
