{% extends "index/baseTemp.html" %}

{% block title %}
<title>卫星管理</title>
{% endblock %}

{% block blink %}
<link rel="stylesheet" href="{{ pathPrefix }}/plugins/ztree/zTreeStyle.css">
<link rel="stylesheet" href="{{ pathPrefix }}/css/myHome/myDatas.css">
<link rel="stylesheet" href="{{ pathPrefix }}/frameworks/mars3d/lib/Cesium/Widgets/widgets.css" />
<link rel="stylesheet" href="{{ pathPrefix }}/frameworks/mars3d/lib/jquery/ztree/css/zTreeStyle/zTreeStyle.css" />
<link rel="stylesheet" href="{{ pathPrefix }}/css/appCenter/satelliteWorld/world.css" />
<link rel="stylesheet" href="{{ pathPrefix }}/css/common/utils.css">

{% endblock %}

{% block bscript %}
<script src="{{ pathPrefix }}/js/common/utils.js"></script>
<script src="{{ pathPrefix }}/frameworks/mars3d/lib/jquery/jquery-2.1.4.min.js"></script>
<script src="{{ pathPrefix }}/frameworks/mars3d/lib/Cesium/Cesium.js"></script>
<script src="{{ pathPrefix }}/frameworks/mars3d/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="{{ pathPrefix }}/plugins/jscolor/jscolor.js"></script>
<script src="{{ pathPrefix }}/frameworks/mars3d/lib/jquery/ztree/js/jquery.ztree.all.min.js"></script>
<script src="{{ pathPrefix }}/plugins/daterangepicker/moment.min.js"></script>
<script src="{{ pathPrefix }}/frameworks/mars3d/lib/sgp4/satellite.js"></script>
<script src="{{ pathPrefix }}/js/appCenter/satelliteWorld/satellite.js"></script>
<script src="{{ pathPrefix }}/js/appCenter/satelliteWorld/generateCzml.js"></script>
{% endblock %}

{% block contentbody %}
<div class="modal fade" id="remove_dialog" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <p class="deleteBody">是否删除该数据</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-small btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-danger btn-small" id="confirm_remove">删除</button>
      </div>
    </div>
  </div>
</div>
<!-- 数据集选择 -->

<div id="map" style="background-color: rgba(3, 22, 124, 30)"></div>


<div class="left">
  <div class="title">卫星</div>
  <div class="content">
    <button type="button" id="addform" class="btn btn-primary" style="margin-left:8px;width:120px;height:40px;border-radius: 4px;">
      <span class="fa fa-plus-circle fa-fw"></span>
      <span style="font-size: 16px;">新增卫星</span>
    </button>
    <button type="button" id="showform" class="btn btn-success" style="margin-left:8px;width:120px;height:40px;border-radius: 4px;">
      <span class="fa fa-plus-circle fa-cogs"></span>
      <span style="font-size: 16px;">卫星显隐</span>
    </button>
    <!-- <button type="button" id="hiddenform" class="btn btn-success" style="margin-left:8px;width:60px;height:40px;border-radius: 4px;">
        <span style="font-size: 16px;">隐藏</span>
      </button> -->
    <div id="treeDemo" class="ztree" style="margin-top: 8px;"></div>
  </div>

</div>




<div id="setCzmlContent">
  <input type="hidden" id="czmlUrl" value="" />
  <h3>参数设置</h3>
  <form class="form-inline" role="form">
    <div class="input-group">
      <span class="input-group-addon">轨道颜色</span>
      <input id="gdColor" type="text" placeholder="请选择" class="form-control jscolor {valueElement:'chosen-value', onFineChange:'setTextColor(this)'}" value="" />
    </div>
    <div class="input-group">
      <span class="input-group-addon">轨道宽度</span>
      <input type="text" id="gdWidth" class="form-control" placeholder="请输入" value="1">
    </div>
    <div class="input-group">
      <span class="input-group-addon">标注内容</span>
      <input type="text" id="labelContent" class="form-control" placeholder="请输入" value="">
    </div>
    <div class="input-group btn_self">
      <button type="button" id="submit" class="btn btn-success">确定</button>
      <button type="button" id="return" class="btn btn-primary">取消</button>
    </div>
  </form>
</div>
<!-- <div style="z-index:1000;position:absolute;top:56px;left:90px;">
  <button type="button" class="close" style="background-color:white;" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div> -->

<div class="satellite_xyz" style="display:none;z-index:1000;position:absolute;background-color: white;top:10px;right: 10px;width: 240px;text-align: center;border-radius: 5px;">
  <ul>
    <li>当前经度：<span class="xyz_num" id="lng"></span></li>
    <li>当前纬度：<span class="xyz_num" id="lat"></span></li>
    <li>当前高度：<span class="xyz_num" id="hei"></span></li>
  </ul>
</div>


<div class="modal_box" tabindex="-1" role="dialog" id="form_sateliate">
  <div class="modal-dialog">
    <div class="modal-content modal_sateliate">
      <div class="modal-header header_sateliate" style="background-color: #4087CF;">
        <button type="button" class="close" data-dismiss="modal" id="closeModel" style="font-size:24px;">&times;</button>
        <h4 class="modal-title title_sateliate" style="color:#f0f0f0;font-size:20px;">编辑</h4>
      </div>

      <div class="modal-body" style="background-color: #F1FCFF!important">
        <form action="" class="form-horizontal">
          <div class="form-group">
            <label for="out_pro_id" class="col-sm-3 control-label" style="font-size: 16px;padding-top: 2px;margin-right: -20px;font-weight: 600;color:#3B3B3C;">英文名称：</label>
            <div class="col-sm-9">
              <input name="英文名称" type="text" class="name_sateliate" id="name_en_sateliate" placeholder="请输入英文名称" style="border-radius:4px;color:black;border: 1px solid #dcdfe6;height:36px;line-height:36px;width:400px">
            </div>
          </div>
          <div class="form-group">
            <label for="out_pro_id" class="col-sm-3 control-label" style="font-size: 16px;padding-top: 2px;margin-right: -20px;font-weight: 600;color:#3B3B3C;">名称：</label>
            <div class="col-sm-9">
              <input name="名称" type="text" class="name_sateliate" id="name_sateliate" placeholder="请输入名称" style="border-radius:4px;color:black;border: 1px solid #dcdfe6;height:36px;line-height: 36px;width:400px">
            </div>
          </div>
          <div class="form-group">
            <label for="out_pro_id" class="col-sm-3 control-label" style="font-size: 16px;padding-top: 2px;margin-right: -20px;font-weight: 600;color:#3B3B3C;">星历1：</label>
            <div class="col-sm-9">
              <input name="星历1" type="text" class="name_sateliate" id="name_tle1_sateliate" placeholder="请输入星历1" style="border-radius:4px;color:black;border: 1px solid #dcdfe6;height:36px;line-height: 36px;width:400px">
            </div>
          </div>
          <div class="form-group">
            <label for="out_pro_id" class="col-sm-3 control-label" style="font-size: 16px;padding-top: 2px;margin-right: -20px;font-weight: 600;color:#3B3B3C;">星历2：</label>
            <div class="col-sm-9">
              <input name="星历2" type="text" class="name_sateliate" id="name_tle2_sateliate" placeholder="请输入星历2" style="border-radius:4px;color:black;border: 1px solid #dcdfe6;height:36px;line-height: 36px;width:400px">
            </div>
          </div>
          <div class="form-group">
            <label for="out_pro_id" class="col-sm-3 control-label" style="font-size: 16px;padding-top: 2px;margin-right: -20px;font-weight: 600;color:#3B3B3C;">卫星编号：</label>
            <div class="col-sm-9">
              <input name="卫星编号" disabled type="text" class="name_sateliate" id="name_norad_sateliate" placeholder="请输入卫星编号" style="border-radius:4px;color:black;border: 1px solid #dcdfe6;height:36px;line-height: 36px;width:400px">
            </div>
          </div>
          <div class="form-group">
            <label for="out_pro_id" class="col-sm-3 control-label" style="font-size: 16px;padding-top: 2px;margin-right: -20px;font-weight: 600;color:#3B3B3C;">幅宽：</label>
            <div class="col-sm-9">
              <input name="幅宽" type="text" class="name_sateliate" id="name_cloth_width_sateliate" placeholder="请输入幅宽" style="border-radius:4px;color:black;border: 1px solid #dcdfe6;height:36px;line-height: 36px;width:400px">
            </div>
          </div>
          <!-- <div class="form-group">
            <label for="out_pro_id" class="col-sm-3 control-label" style="color:black;font-size: 16px;padding-top: 2px;margin-right: -20px;">厂商：</label>
            <div class="col-sm-9">
              <input type="text" class="name_sateliate" id="name_manufacturer_sateliate" placeholder="请输入厂商" style="border-radius:4px;color:black;border: 1px solid #dcdfe6;height:36px;line-height: 36px;width:400px">
            </div>
          </div> -->
          <div class="form-group">
            <label for="out_pro_id" class="col-sm-3 control-label" style="font-size: 16px;padding-top: 2px;margin-right: -20px;font-weight: 600;color:#3B3B3C;">类型：</label>
            <div class="col-sm-9">
              <input name="类型" type="text" class="name_sateliate" id="name_type_sateliate" placeholder="请输入类型" style="border-radius:4px;color:black;border: 1px solid #dcdfe6;height:36px;line-height: 36px;width:400px">
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer1" style="background-color: #F1FCFF">
        <button type="button" class="btn btn-default" data-dismiss="modal" id="closeModel_form">
          <span class="fa fa-close fa-fw"></span> 取消
        </button>
        <button type="button" class="btn btn-primary" id="submitModel">
          <span class="fa fa-check fa-fw"></span> 提交
        </button>
      </div>
    </div>
  </div>
</div>



<div class="modal_box" tabindex="-1" role="dialog" id="form_sateliate_add">
  <div class="modal-dialog">
    <div class="modal-content modal_sateliate">
      <div class="modal-header header_sateliate" style="background-color: #4087CF;">
        <button type="button" class="close" data-dismiss="modal" id="closeModel_add" style="font-size:24px;">&times;</button>
        <h4 class="modal-title title_sateliate" style="color:#f0f0f0;font-size:20px;">新增</h4>
      </div>

      <div class="modal-body" style="background-color: #F1FCFF!important">
        <form action="" class="form-horizontal">
          <div class="form-group">
            <label for="out_pro_id" class="col-sm-3 control-label" style="color:#3B3B3C;font-size: 16px;padding-top: 2px;margin-right: -20px;font-weight: 600;">英文名称：</label>
            <div class="col-sm-9">
              <input name="英文名称" type="text" class="name_sateliate" id="name_en_sateliate_add" placeholder="请输入英文名称" style="border-radius:4px;color:black;border: 1px solid #dcdfe6;height:36px;line-height:36px;width:400px;">
            </div>
          </div>
          <div class="form-group">
            <label for="out_pro_id" class="col-sm-3 control-label" style="color:#3B3B3C;font-size: 16px;padding-top: 2px;margin-right: -20px;font-weight: 600;">名称：</label>
            <div class="col-sm-9">
              <input name="名称" type="text" class="name_sateliate" id="name_sateliate_add" placeholder="请输入名称" style="border-radius:4px;color:black;border: 1px solid #dcdfe6;height:36px;line-height: 36px;width:400px">
            </div>
          </div>
          <div class="form-group">
            <label for="out_pro_id" class="col-sm-3 control-label" style="color:#3B3B3C;font-size: 16px;padding-top: 2px;margin-right: -20px;font-weight: 600;">星历1：</label>
            <div class="col-sm-9">
              <input name="星历1" type="text" class="name_sateliate" id="name_tle1_sateliate_add" placeholder="请输入星历1" style="border-radius:4px;color:black;border: 1px solid #dcdfe6;height:36px;line-height: 36px;width:400px">
            </div>
          </div>
          <div class="form-group">
            <label for="out_pro_id" class="col-sm-3 control-label" style="color:#3B3B3C;font-size: 16px;padding-top: 2px;margin-right: -20px;font-weight: 600;">星历2：</label>
            <div class="col-sm-9">
              <input name="星历2" type="text" class="name_sateliate" id="name_tle2_sateliate_add" placeholder="请输入星历2" style="border-radius:4px;color:black;border: 1px solid #dcdfe6;height:36px;line-height: 36px;width:400px">
            </div>
          </div>
          <div class="form-group">
            <label for="out_pro_id" class="col-sm-3 control-label" style="color:#3B3B3C;font-size: 16px;padding-top: 2px;margin-right: -20px;font-weight: 600;">卫星编号：</label>
            <div class="col-sm-9">
              <input name="卫星编号" type="text" class="name_sateliate" id="name_norad_sateliate_add" placeholder="请输入卫星编号" style="border-radius:4px;color:black;border: 1px solid #dcdfe6;height:36px;line-height: 36px;width:400px">
            </div>
          </div>
          <div class="form-group">
            <label for="out_pro_id" class="col-sm-3 control-label" style="color:#3B3B3C;font-size: 16px;padding-top: 2px;margin-right: -20px;font-weight: 600;">幅宽：</label>
            <div class="col-sm-9">
              <input name="卫星幅宽" type="text" class="name_sateliate" id="name_cloth_width_sateliate_add" placeholder="请输入幅宽" style="border-radius:4px;color:black;border: 1px solid #dcdfe6;height:36px;line-height: 36px;width:400px">
            </div>
          </div>
          <div class="form-group">
            <label for="out_pro_id" class="col-sm-3 control-label" style="color:#3B3B3C;font-size: 16px;padding-top: 2px;margin-right: -20px;font-weight: 600;">厂商：</label>
            <div class="col-sm-9">
              <input name="卫星厂商" type="text" class="name_sateliate" id="name_manufacturer_sateliate_add" placeholder="请输入厂商" style="border-radius:4px;color:black;border: 1px solid #dcdfe6;height:36px;line-height: 36px;width:400px">
            </div>
          </div>
          <div class="form-group">
            <label for="out_pro_id" class="col-sm-3 control-label" style="color:#3B3B3C;font-size: 16px;padding-top: 2px;margin-right: -20px;font-weight: 600;">类型：</label>
            <div class="col-sm-9">
              <input name="卫星类型" type="text" class="name_sateliate" id="name_type_sateliate_add" placeholder="请输入类型" style="border-radius:4px;color:black;border: 1px solid #dcdfe6;height:36px;line-height: 36px;width:400px">
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer1" style="background-color: #F1FCFF">
        <button type="button" class="btn btn-default" data-dismiss="modal" id="closeModel_add_form">
          <span class="fa fa-close fa-fw"></span> 取消
        </button>
        <button type="button" class="btn btn-primary" id="submitModel_add">
          <span class="fa fa-check fa-fw"></span> 提交
        </button>
      </div>
    </div>
  </div>
</div>
<script>
  var viewer = null;
  var handler = null;
  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  var reg_width = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/;
  var self_layer, tdt_layer;
  var arr = [];
  let currentTreeId = null
  grm_utils.jqExtend();
  $(".navbar").remove();
  $(document).ready(function () {

    //自定义
    var self_provider = new Cesium.SingleTileImageryProvider({
      url: base.static + "/images/satellitePic/world.jpg",
      rectangle: Cesium.Rectangle.fromDegrees(-180, -90, 180, 90)
    });
    //天地图
    var tdt_provider = new Cesium.UrlTemplateImageryProvider({
      url: 'https://t1.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=8781c9a7d7e4188b5d0d6809bbb3c3ac'
    });
    //在线地图
    // var online_provider = new Cesium.ArcGisMapServerImageryProvider({
    // 	url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
    // });

    // var viewer_provider = null;
    // if (base.map == "online") {
    // 	viewer_provider = online_provider;
    // } else {
    // 	viewer_provider = self_provider;
    // }
    var viewer_provider = tdt_provider;
    viewer = new Cesium.Viewer('map', {
      baseLayerPicker: false,//是否显示图层选择器  
      fullscreenButton: false,//是否显示全屏按钮  
      geocoder: false,//是否显示geocoder小器件，右上角查询按钮  
      homeButton: false,//是否显示Home按钮  
      sceneModePicker: false,//是否显示3D/2D选择器  
      selectionIndicator: false,//是否显示选取指示器组件  
      navigationHelpButton: false,//是否显示右上角的帮助按钮  
      scene3DOnly: true,//如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源  
      selectionIndicator: false,
      allowDataSourcesToSuspendAnimation: true,
      imageryProvider: viewer_provider,
      orderIndependentTranslucency: false, //去除太阳黑色边界
      contextOptions: {  //打开更改webgl开关（使下面的更改透明度起作用）
        webgl: {
          alpha: false,
        }
      },
    });



    var oldHei = 130000000;
    var firstHei = false;
    viewer.camera.changed.addEventListener(function () {
      var hei = viewer.camera.positionCartographic.height;
      // if (base.map != "online") { //若加载离线地图 则需在 加载贴图图层之后 加载天地图
      // 	tdt_layer = new Cesium.ImageryLayer(self_provider, {
      // 		show: false
      // 	});
      // 	viewer.imageryLayers.add(tdt_layer);
      // 	self_layer = viewer.imageryLayers._layers[0];
      // 	//相机绑定底图切换

      // 	if (hei > Number(50000000)) { //加上自定义贴图
      // 		self_layer.show = true;
      // 		tdt_layer.show = false;
      // 	} else {
      // 		self_layer.show = false;
      // 		tdt_layer.show = true;
      // 	}
      // }

      //控制轨道文字的显示和隐藏
      // debugger
      // if (hei > Number(100000000) && (oldHei < Number(100000000) || oldHei == null)) {
      //   create_Satellite.hideCzmlText();
      // }
      // if (hei < Number(100000000) && (oldHei > Number(100000000) || oldHei == null)) {
      //   create_Satellite.showCzmlText();
      // }
      // if (!firstHei) {
      //   firstHei = true;
      //   create_Satellite.hideCzmlText();
      // }
      // oldHei = hei;
    });

    //底图定位
    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(115.916724, 38.66755, 11000000),
      orientation: {
        heading: Cesium.Math.toRadians(10),
        pitch: Cesium.Math.toRadians(-90),
        roll: 0.0
      }
    });

    /* $(".cesium-viewer-animationContainer").hide();  //隐藏animation和timeline控件
    $(".cesium-viewer-timelineContainer").hide(); */
    viewer.clock.multiplier = 20; //播放速度
    viewer.clock.shouldAnimate = true; //自动播放
    viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);
    create_Satellite.viewer = viewer;
    //显示当前时间的位置；
    viewer.clock.onTick.addEventListener(function (clock) {
      if (trackedEntity) {
        var position = trackedEntity.position.getValue(clock.currentTime);
        if (position) {
          var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(position);
          var lat = Cesium.Math.toDegrees(cartographic.latitude),
            lng = Cesium.Math.toDegrees(cartographic.longitude),
            hei = cartographic.height;
          $("#lng").html(lng.toFixed(2));
          $("#lat").html(lat.toFixed(2));
          $("#hei").html(hei.toFixed(2) + "米");
        }
      }
    });
    $("#submit").click(function () {
      $("#setCzmlContent").hide();
      var obj = {};
      var color = colorRgb($("#gdColor").val() || "");
      obj.gdColor = typeof (color) == "string" ? "" : color;
      obj.gdWidth = 1;
      if (reg_width.test($("#gdWidth").val())) {
        obj.gdWidth = $("#gdWidth").val();
      } else {
        $("#gdWidth").css("color", "red").val("格式错误！")
      }
      obj.labelContent = $("#labelContent").val() || "";
      var czmlUrl = $("#czmlUrl").val();
      create_Satellite.setCzmlContent(czmlUrl, obj);
    });
    $("#return").click(function () {
      $("#setCzmlContent").hide();
    });

    $("#gdWidth").focus(function () {
      $("#gdWidth").css("color", "grey").val("");
    });

    // $(".close").click(function () {
    //   $("#treeDemo").hide();
    //   $("#setCzmlContent").hide();
    //   $(this).hide();
    // });


    // initTree();
    initDataTree()
    $("#form_sateliate").hide();
    $("#form_sateliate_add").hide();
  });
  // 删除确认事件

  $("#remove_dialog #confirm_remove").bind('click', function () {
    $.ajax({
      method: "DELETE",
      url: `${grm_utils.getUrl('api')}/v3/satellite-predict/satellite/${currentTreeId}`,
      headers: {
        'auth-session': sessionStorage.getItem('sid'),
      },
      success: function (res) {
        $("#form_sateliate_add").hide();
        $("#form_sateliate").hide();
        $('#remove_dialog').modal('hide');
        initDataTree()
        atip.show('删除成功！')
      },
      error: () => {
        atip.show('异常！');
      }
    })
  });
  //  新增弹出框
  $("#addform").bind('click', function () {
    $("#form_sateliate_add").show();
    $("#form_sateliate").hide();
  });

  $("#showform").bind('click', function () {
    treeObj = $.fn.zTree.getZTreeObj("treeDemo");
    // 获取所有选中节点
    var checkedNodes = treeObj.getCheckedNodes();
    let isSelectNodeArr = checkedNodes.filter((item) => {
      return item.isParent == false
    }).map((item) => {
      return item.norad
    })
    // 获取未选中节点
    var checkedNodesFalse = treeObj.getCheckedNodes(false);
    let isSelectNodeArrFalse = checkedNodesFalse.filter((item) => {
      return item.isParent == false
    }).map((item) => {
      return item.norad
    })
    let markData = {
      "norads": isSelectNodeArr,
      "status": 'show',
    }
    $.ajax({
      method: "POST",
      url: `${grm_utils.getUrl('api')}/v3/satellite-predict/satellite/status`,
      data: JSON.stringify(markData),
      headers: {
        'auth-session': sessionStorage.getItem('sid'),
        'content-type': "application/json",
      },
      success: function (res) {
      },
      error: () => {
        atip.show('异常！');
      }
    })
    let markData1 = {
      "norads": isSelectNodeArrFalse,
      "status": 'hidden',
    }
    $.ajax({
      method: "POST",
      url: `${grm_utils.getUrl('api')}/v3/satellite-predict/satellite/status`,
      data: JSON.stringify(markData1),
      headers: {
        'auth-session': sessionStorage.getItem('sid'),
        'content-type': "application/json",
      },
      success: function (res) {
        atip.show('数据同步中！');
      },
      error: () => {
        atip.show('异常！');
      }
    })
    initDataTree()
  });

  // 新增弹出框确认
  $("#submitModel_add").click(function () {
    var num = 0;
    var str = "";
    $("input[id$='name_cloth_width_sateliate_add'],input[id$='name_sateliate_add'],input[id$='name_en_sateliate_add'],input[id$='name_norad_sateliate_add'],input[id$='#name_tle1_sateliate_add'],input[id$='#name_tle2_sateliate_add']").each(function (n) {
      if ($(this).val() == "") {
        atip.show(str += "" + $(this).attr("name") + "不能为空！\r\n")
        num++;
        return false;
      }
    });
    if (num > 0) {
      return false
    }
    else {
      let markData = {
        "cloth_width": $('#name_cloth_width_sateliate_add').val(),
        "manufacturer": $('#name_manufacturer_sateliate_add').val(),
        "name": $('#name_sateliate_add').val(),
        "name_en": $('#name_en_sateliate_add').val(),
        "norad": $('#name_norad_sateliate_add').val(),
        "tle1": $('#name_tle1_sateliate_add').val(),
        "tle2": $('#name_tle2_sateliate_add').val(),
        "type": $('#name_type_sateliate_add').val()
      }
      $.ajax({
        method: "POST",
        url: `${grm_utils.getUrl('api')}/v3/satellite-predict/satellite`,
        data: JSON.stringify(markData),
        headers: {
          'auth-session': sessionStorage.getItem('sid'),
          'content-type': "application/json",
        },
        success: function (res) {
          if (res.code == 500) {
            atip.show('新增失败')
          } else {
            initDataTree()
            $("#form_sateliate_add").hide();
            atip.show('新增成功')
          }
          clearAdd()
        },
        error: () => {
          atip.show('异常！');
        }
      })
    }

  });
  // 关闭弹出框
  $("#closeModel_add").click(function () {
    $("#form_sateliate_add").hide();
    clearAdd()
  });
  $("#closeModel_add_form").click(function () {
    $("#form_sateliate_add").hide();
    clearAdd()
  });
  // 编辑功能
  // var detail = {}
  $("#submitModel").click(function () {
    var num = 0;
    var str = "";
    $("input[id$='name_cloth_width_sateliate'],input[id$='name_sateliate'],input[id$='name_en_sateliate'],input[id$='name_norad_sateliate'],input[id$='#name_tle1_sateliate'],input[id$='#name_tle2_sateliate']").each(function (n) {
      if ($(this).val() == "") {
        atip.show(str += "" + $(this).attr("name") + "不能为空！\r\n")
        num++;
        return false;
      }
    });
    if (num > 0) {
      return false
    } else {
      let markData = {
        "cloth_width": $('#name_cloth_width_sateliate').val(),
        // "manufacturer": $('#name_manufacturer_sateliate').val(),
        "name": $('#name_sateliate').val(),
        "name_en": $('#name_en_sateliate').val(),
        "norad": $('#name_norad_sateliate').val(),
        "tle1": $('#name_tle1_sateliate').val(),
        "tle2": $('#name_tle2_sateliate').val(),
        "type": $('#name_type_sateliate').val()
      }
      $.ajax({
        method: "PUT",
        url: `${grm_utils.getUrl('api')}/v3/satellite-predict/satellite`,
        data: JSON.stringify(markData),
        headers: {
          'auth-session': sessionStorage.getItem('sid'),
          'content-type': "application/json",
        },
        success: function (res) {
          if (res.code == 500) {
            atip.show('更新失败')
          } else {
            initDataTree()
            $("#form_sateliate").hide();
            atip.show('更新成功')
          }
        },
        error: () => {
          atip.show('异常！');
        }
      })
    }
  });

  $("#closeModel").click(function () {
    $("#form_sateliate").hide();
  });
  $("#closeModel_form").click(function () {
    $("#form_sateliate").hide();
  });
  // 清空
  function clearAdd () {
    $('#name_cloth_width_sateliate_add').val(''),
      $('#name_manufacturer_sateliate_add').val(''),
      $('#name_sateliate_add').val(''),
      $('#name_en_sateliate_add').val(''),
      $('#name_norad_sateliate_add').val(''),
      $('#name_tle1_sateliate_add').val(''),
      $('#name_tle2_sateliate_add').val(''),
      $('#name_type_sateliate_add').val('')
  }

  function initDataTree () {
    const start_time = moment().subtract(1, 'days')
    const end_time = moment()
    const startTime = new Date(start_time).getTime(); // 毫秒转换
    const endTime = new Date(end_time).getTime(); // 毫秒转换
    var markData = {
      "constraintEndTime": 0,
      "constraintStartTime": 0,
      "end_time": endTime,
      "geometry": [],
      "interval": 60,
      "start_time": startTime
    }

    $.ajax({
      method: "POST",
      url: `${grm_utils.getUrl('api')}/v3/satellite-predict/type/lists`,
      data: JSON.stringify(markData),
      headers: {
        // 'auth-session': sessionStorage.getItem('sid'),
        'content-type': "application/json",
      },
      success: function (res) {
        var valueAry = [];
        for (var key in res) {
          valueAry.push(res[key]);
        }
        var zNodes = []
        valueAry.forEach(function (item, index) {
          let a = item[0]
          let b = item.map((item) => {
            return item.status
          })
          var obj = {};
          var indexTwo = Number("2" + index);
          obj.id = Number("2" + index);
          obj.pId = 1;
          obj.name = item[0].type === '' ? '未分组' : item[0].type;
          obj.isFather = true
          obj.checked = !b.includes('hidden')
          obj.icon = '../../../images/satellitePic/2.png'
          obj.children = item.map((item, index) => {
            return {
              ...item,
              checked: item.status == 'show' ? true : false,
              // checked: obj.id == '20' ? true : false,
              name: item.name == '' ? item.name_en : item.name,
              id: Number("3" + index),
              pId: indexTwo,
              icon: '../../../images/satellitePic/1.png'
            }
          })
          zNodes.push(obj);
        });
        var setting = {
          data: {
            simpleData: {
              enable: true,
            }
          },
          check: {
            enable: true
          },
          view: {
            fontCss: {
              "color": "white",
            },
            addHoverDom: addHoverDom,
            removeHoverDom: removeHoverDom,
            selectedMulti: false
          },
          callback: {
            onCheck: checkNodeHandler,
            onClick: clickNodeHandler,
            // onDblClick: dblClickNodeHandler
          }
        };
        treeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        var allNodes = treeObj.getNodes()[0].children;
        allNodes.forEach(function (item) {
          item.checkedOld = item.checked;
        });

        let a = []
        for (var i in zNodes) {
          a.push(zNodes[i].children);
        }
        let temAllCzml = a.flat()
        // 一次性加载
        // temAllCzml.forEach(item => {
        //   if (item.checked) {
        //     create_Satellite.bindCZMLData(item.czml)
        //   }
        // })
        // 单个加载
        let arrSat = temAllCzml.filter((item) => {
          return item.checked == true
        })
        for (let i = 0; i < arrSat.length; i++) {
          addCzml(arrSat[i])
        }


        create_Satellite.arrSat = temAllCzml
      },
      error: () => {
        atip.show('异常！');
      }
    })
  }
  // 显示CZML
  function addCzml (val) {
    var markData = {
      name: val.name,
      start_data: 0,
      tle1: val.tle1,
      tle2: val.tle2,
    }
    $.ajax({
      method: "POST",
      url: `${grm_utils.getUrl('api')}/v3/satellite-orbit-v3/orbit-czml`,
      data: JSON.stringify(markData),
      headers: {
        'content-type': "application/json",
      },
      success: function (res) {
        create_Satellite.bindCZMLData(res.data.czml)
      },
      error: () => {
        atip.show('异常！');
      }
    })
  }

  // 隐藏CZML
  function hiddenczml (val) {
    var markData = {
      name: val.name,
      start_data: 0,
      tle1: val.tle1,
      tle2: val.tle2,
    }
    $.ajax({
      method: "POST",
      url: `${grm_utils.getUrl('api')}/v3/satellite-orbit-v3/orbit-czml`,
      data: JSON.stringify(markData),
      headers: {
        'content-type': "application/json",
      },
      success: function (res) {
        create_Satellite.hideCZMLData(res.data.czml)
      },
      error: () => {
        atip.show('异常！');
      }
    })
  }

  // 追踪CZML
  function trackCzml (val) {
    var markData = {
      name: val.name,
      start_data: 0,
      tle1: val.tle1,
      tle2: val.tle2,
    }
    $.ajax({
      method: "POST",
      url: `${grm_utils.getUrl('api')}/v3/satellite-orbit-v3/orbit-czml`,
      data: JSON.stringify(markData),
      headers: {
        'content-type': "application/json",
      },
      success: function (res) {
        create_Satellite.trackedCzml(res.data.czml)
      },
      error: () => {
        atip.show('异常！');
      }
    })
  }


  var czmlSouers = [{
    name: "高分一号",
    czmlUrl: base.static + "/data/satelliteCzml/GAOFEN1.czml",
    twoLineData: {
      tleLine1: "1 39150U 13018A   18351.90024019  .00000056  00000-0  15337-4 0  9998",
      tleLine2: "2 39150  97.9159  71.0675 0020503  86.5939 273.7600 14.76525973304210"
    },
    checked: true
  }, {
    name: "高分二号",
    czmlUrl: base.static + "/data/satelliteCzml/GAOFEN2.czml",
    checked: true
  }, {
    name: "高分四号",
    czmlUrl: base.static + "/data/satelliteCzml/GAOFEN4.czml",
    checked: true
  }, {
    name: "资源一号02C星",
    czmlUrl: base.static + "/data/satelliteCzml/ZIYUAN1-02C.czml",
    twoLineData: {
      tleLine1: "1 38038U 11079A   18351.84465031  .00000063  00000-0  36343-4 0  9991",
      tleLine2: "2 38038  98.2687  40.5155 0000758  71.9754 288.1508 14.35486355366211"
    },
    checked: true
  }, {
    name: "资源三号2星",
    czmlUrl: base.static + "/data/satelliteCzml/ZIYUAN3-2.czml",
    twoLineData: {
      tleLine1: "1 41556U 16033A   18351.87685916  .00000513  00000-0  25941-4 0  9996",
      tleLine2: "2 41556  97.4157  67.1130 0002520 109.9694 341.3365 15.21384255141660"
    },
    checked: true
  }, {
    name: "资源三号",
    czmlUrl: base.static + "/data/satelliteCzml/ZIYUAN3.czml",
    twoLineData: {
      tleLine1: "1 38046U 12001A   18351.89467087  .00000447  00000-0  23102-4 0  9999",
      tleLine2: "2 38046  97.4755  62.1698 0002348   0.9295  87.6966 15.21291360385372"
    },
    checked: true
  }, {
    name: "环境一号A星",
    czmlUrl: base.static + "/data/satelliteCzml/HUANJING1A.czml",
    twoLineData: {
      tleLine1: "1 33320U 08041A   18351.89284075 -.00000285  00000-0 -33001-4 0  9993",
      tleLine2: "2 33320  97.8649  50.2086 0026945  54.7504 305.6224 14.76982613553774"
    },
    checked: true
  }, {
    name: "环境一号B星",
    czmlUrl: base.static + "/data/satelliteCzml/HUANJING1B.czml",
    twoLineData: {
      tleLine1: "1 33321U 08041B   18351.86681242  .00000102  00000-0  21551-4 0  9991",
      tleLine2: "2 33321  97.8727  51.8701 0036020  70.9842 289.5241 14.77080226553761"
    },
    checked: true
  }, {
    name: "北斗四号星",
    czmlUrl: base.static + "/data/satelliteCzml/BEIDOU4.czml",
    checked: true
  }, {
    name: "北斗G2星",
    czmlUrl: base.static + "/data/satelliteCzml/BEIDOUG2.czml",
    checked: true

  }, {
    name: "风云三号B星",
    czmlUrl: base.static + "/data/satelliteCzml/FENGYUN3B.czml",
    checked: true

  }, {
    name: "海洋一号B星",
    czmlUrl: base.static + "/data/satelliteCzml/HAIYANG1B.czml",
    twoLineData: {
      tleLine1: "",
      tleLine2: ""
    }
  }, {
    name: "海洋二号A星",
    czmlUrl: base.static + "/data/satelliteCzml/HAIYANG2A.czml",
    twoLineData: {
      tleLine1: "",
      tleLine2: ""
    }
  }, {
    name: "PLEIADES一号A星",
    czmlUrl: base.static + "/data/satelliteCzml/PLEIADES1A.czml",
    twoLineData: {
      tleLine1: "",
      tleLine2: ""
    }
  }, {
    name: "PLEIADES一号B星",
    czmlUrl: base.static + "/data/satelliteCzml/PLEIADES1B.czml",
    twoLineData: {
      tleLine1: "",
      tleLine2: ""
    }
  }, {
    name: "SPOT六号A星",
    czmlUrl: base.static + "/data/satelliteCzml/SPOT6A.czml",
    twoLineData: {
      tleLine1: "1 40053U 14034A   18351.79450158  .00000814  00000-0  18469-3 0  9995",
      tleLine2: "2 40053  98.1671  56.4700 0001347  79.7694 280.3646 14.58578513237845"
    }
  }
  ];

  function initTree () {
    var zNodes = [{
      "id": 1,
      "pId": 0,
      "name": "全部",
      "open": true,
      isFather: true
    },];

    czmlSouers.forEach(function (item, index) {
      var obj = {};
      obj.id = Number(index + "100");
      obj.pId = 1;
      obj.checked = item.checked;
      obj.name = item.name;
      obj.czmlUrl = item.czmlUrl;
      obj.twoLineData = item.twoLineData;
      zNodes.push(obj);
    });

    var setting = {
      data: {
        simpleData: {
          enable: true,
        }
      },
      check: {
        enable: true
      },
      view: {
        fontCss: {
          "color": "white"
        },
        addHoverDom: addHoverDom,
        removeHoverDom: removeHoverDom,
        selectedMulti: false
      },
      callback: {
        onCheck: checkNodeHandler,
        onClick: clickNodeHandler,
        onDblClick: dblClickNodeHandler
      }
    };
    treeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    var allNodes = treeObj.getNodes()[0].children;
    allNodes.forEach(function (item) {
      item.checkedOld = item.checked;
    });

    create_Satellite.addAllCzmlData(czmlSouers); //添加所有数据
  }
  var detail = {}
  // 添加按钮
  function addHoverDom (treeId, treeNode) {
    var that = this;
    var sObj = $('#' + treeNode.tId + '_span');
    if (treeNode.editNameFlag || $('#addBtn_' + treeNode.tId).length > 0 || $('#renameBtn_' + treeNode.tId).length > 0 || $('#removeBtn_' + treeNode.tId).length > 0) return;
    var addStr =
      // "<span class='button add buttons' id='addBtn_" + treeNode.tId + "' title='添加' onfocus='this.blur();'></span>" +
      "<span class='button edite' id='renameBtn_" + treeNode.tId + "' title='编辑' onfocus='this.blur();'></span>" +
      "<span class='button del' id='removeBtn_" + treeNode.tId + "' title='删除' onfocus='this.blur();'></span>";
    sObj.after(addStr);
    // var btn = $('#addBtn_' + treeNode.tId);
    var btn2 = $('#renameBtn_' + treeNode.tId);
    var btn3 = $('#removeBtn_' + treeNode.tId);
    // if (btn) {
    //   btn.bind('click', function () {
    //     that.clearInfo();
    //     that.parentId = treeNode.docTemplateId;
    //     that.parentName = treeNode.templateName;
    //   });
    // }
    if (btn2) {
      btn2.bind('click', function (e) {
        if (treeNode.isFather) {
          // e.stopPropagation()
        } else {
          e.stopPropagation()
          $("#form_sateliate_add").hide();
          $("#form_sateliate").show();
          $('#name_sateliate').val(treeNode.name)
          $('#name_en_sateliate').val(treeNode.name_en)
          $('#name_tle1_sateliate').val(treeNode.tle1)
          $('#name_tle2_sateliate').val(treeNode.tle2)
          $('#name_manufacturer_sateliate').val(treeNode.manufacturer)
          $('#name_norad_sateliate').val(treeNode.norad)
          $('#name_cloth_width_sateliate').val(treeNode.cloth_width)
          $('#name_type_sateliate').val(treeNode.type)
        }
      });
    }
    if (btn3) {
      btn3.bind('click', function (e) {
        e.stopPropagation()
        let norad = treeNode.norad
        if (treeNode.isFather) {
          return false
        }
        currentTreeId = norad
        $('#remove_dialog').modal('show');
      });
    }
  }
  // 添加按钮移除
  function removeHoverDom (treeId, treeNode) {
    // $('#addBtn_' + treeNode.tId).unbind().remove();
    $('#renameBtn_' + treeNode.tId).unbind().remove();
    $('#removeBtn_' + treeNode.tId).unbind().remove();
  }

  function onCheck (e, treeId, treeNode) {
    showLog(treeNode.name + "(选择后)");
  }

  function checkNodeHandler (e, treeId, treeNode) {
    var nodes = [treeNode]
    for (var i = 0; i < nodes.length; i++) {
      var node = nodes[i];
      // 选择父节点显示卫星/隐藏卫星
      if (treeNode.isFather) {
        if (node.checked) {
          let temAllCzml = treeNode.children
          temAllCzml.forEach(item => {
            addCzml(item)
            // create_Satellite.bindCZMLData(item.czml)
          })
        } else {
          let temAllCzml = treeNode.children
          temAllCzml.forEach(item => {
            hiddenczml(item)
            // create_Satellite.hideCZMLData(item.czml)
          })
        }
      } else {
        // addCzml hiddenczml
        // 选择子节点选择/隐藏卫星
        if (node.checked) {
          addCzml(treeNode)
          // create_Satellite.bindCZMLData(treeNode.czml)
        } else {
          hiddenczml(treeNode)
          // create_Satellite.hideCZMLData(treeNode.czml); //未选中 隐藏
        }
      }

      node.checkedOld = node.checked;
    }
  }

  var trackedEntity = null;
  function clickNodeHandler (event, treeId, treeNode) {

    if (treeNode.isFather) {
      $("#form_sateliate_add").hide();
      $("#form_sateliate").hide();
      create_Satellite.notrac()
    } else {
      $("#form_sateliate_add").hide();
      $("#form_sateliate").hide();
      $('#name_sateliate').val(treeNode.name)
      $('#name_en_sateliate').val(treeNode.name_en)
      $('#name_tle1_sateliate').val(treeNode.tle1)
      $('#name_tle2_sateliate').val(treeNode.tle2)
      $('#name_manufacturer_sateliate').val(treeNode.manufacturer)
      $('#name_norad_sateliate').val(treeNode.norad)
      $('#name_cloth_width_sateliate').val(treeNode.cloth_width)
      $('#name_type_sateliate').val(treeNode.type)
      trackCzml(treeNode)
      // create_Satellite.trackedCzml(treeNode.czml)
    }
    setTimeout(() => {
      $(`#${treeId}`).find(".edite").remove()
      $(`#${treeId}`).find(".del").remove()
    }, 500)
    // if (treeNode.id == 1) {
    //   $(".satellite_xyz").hide();
    //   viewer.camera.setView({
    //     destination: Cesium.Cartesian3.fromDegrees(115.916724, 38.66755, 130000000),
    //     orientation: {
    //       heading: Cesium.Math.toRadians(10),
    //       pitch: Cesium.Math.toRadians(-90),
    //       roll: 0.0
    //     }
    //   });
    //   viewer.trackedEntity = null;
    //   return;
    // } else {
    //   $(".satellite_xyz").show();
    //   //获取当前节点
    //   var dataSourceArr = create_Satellite.dataSourceArr;
    //   var dataSource = create_Satellite.getDataSourceByCzml(treeNode.czmlUrl);
    //   var entities = null;
    //   if (dataSource) entities = dataSource.entities;
    //   if (entities && dataSource.show == true) viewer.trackedEntity = trackedEntity = entities._entities._array[0];
    // }

  }

  function dblClickNodeHandler (event, treeId, treeNode) { //显示设置面板
    if (treeNode.isParent) return;
    $("#setCzmlContent").show();
    $("#czmlUrl").val(treeNode.czmlUrl || "");
    $("#gdColor").val("").css("background-color", "rgb(255, 255, 255)");
    $("#gdWidth").val("");
    $("#labelContent").val("");
  }

  function setTextColor (picker) { //设置颜色
    $("#gdColor").val(picker.toString());
  }

  function colorRgb (sColor) { //16进制的颜色转为rgba
    if (!sColor) return;
    var sColor = "#" + sColor.toLowerCase();
    if (sColor && reg.test(sColor)) {
      if (sColor.length === 4) {
        var sColorNew = "#";
        for (var i = 1; i < 4; i += 1) {
          sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
        }
        sColor = sColorNew;
      }
      //处理六位的颜色值  
      var sColorChange = [];
      for (var i = 1; i < 7; i += 2) {
        sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
      }
      sColorChange.push(255);

      return {
        "rgba": sColorChange
      };
    } else {
      return sColor;
    }
  };

</script>

{% endblock %}