<template>
  <div class="create-model-modal" v-if="winVisible">
    <Window
      :title="title"
      @cancel="cancel"
      @ok="ok"
      :width="width"
      :minWidth="600"
      :height="height"
      :left="left"
      :top="top"
      :floatright="false"
      :footervisible="true"
      v-show="!creating"
      :expand="expand"
    >
      <div style="display: flex" class="custom-item" v-if="!isUpdateModel">
        <label class="custom-label">模型类型:</label>
        <div class="custom-item-box">
          <XbsjSelect id="model-select" title="name" :list="modelSelectList" v-model:value="selectModel" />
        </div>
      </div>
      <div class="object-box" v-show="currentModel && currentModel.xbsjType == 'Model'">
        <div style="display: flex" class="custom-item">
          <label class="custom-label">名称:</label>
          <div class="custom-item-box">
            <input v-model="name" class="name-input" style="height: 90%; width: 100%" @change="nameChange(currentModel)" />
          </div>
        </div>
        <div style="display: flex" class="custom-item">
          <label class="custom-label">区域:</label>
          <div class="custom-item-box">
            <XbsjSelect id="area-select" title="name" :list="areaList" v-model:value="selectArea" />
          </div>
        </div>
        <div style="display: flex" class="custom-item">
          <label class="custom-label">像素大小:</label>
          <div class="custom-item-box">
            <!-- <XbsjSlider style="margin-top: 16px" :min="0" :max="256" :step="1" showTip="always"
              v-model="minimumPixelSize">
            </XbsjSlider> -->
            <a-slider
              v-model:value="minimumPixelSize"
              :min="0"
              :max="256"
              :step="1"
              :tooltipVisible="true"
              v-if="currentModel && currentModel.xbsjType == 'Model'"
            />
          </div>
        </div>
        <div style="display: flex" class="custom-item">
          <label class="custom-label">经纬度:</label>
          <div class="custom-item-box">
            <input v-model="LngLatHeight[0]" type="number" class="xyz-input" />
            <input v-model="LngLatHeight[1]" type="number" class="xyz-input y-margin" />
            <input v-model="LngLatHeight[2]" type="number" class="xyz-input" />
          </div>
        </div>
        <div style="display: flex" class="custom-item">
          <label class="custom-label">旋转:</label>
          <div class="custom-item-box">
            <input v-model="rotation[0]" class="xyz-input" type="number" />
            <input v-model="rotation[1]" class="xyz-input y-margin" type="number" />
            <input v-model="rotation[2]" class="xyz-input" type="number" />
          </div>
        </div>
        <div style="display: flex" class="custom-item">
          <label class="custom-label">缩放:</label>
          <div class="custom-item-box">
            <xbsjScale v-model:scale="scale" style="height: 90%; width: 100%"></xbsjScale>
          </div>
        </div>
        <div style="display: flex; align-items: center; justify-content: center" class="custom-item">
          <button
            @click="modelState('creating')"
            :class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']"
            :disabled="creating"
            style="width: 20%"
          >
            拾取
          </button>
          <button
            @click="currentModel.positionEditing = true"
            :class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']"
            :disabled="creating"
            style="width: 20%"
          >
            移动
          </button>
          <button
            @click="modelState('rotationEditing')"
            :class="['xbsj-button', 'edit-model-btn', !currentModel || rotationEditing ? 'edit-model-btn-disable' : '']"
            :disabled="rotationEditing"
            style="width: 20%"
          >
            旋转
          </button>
        </div>
      </div>
      <div class="object-box" v-show="currentModel && currentModel.xbsjType == 'Pin' && selectModel.value == 'ld'">
        <div style="display: flex" class="custom-item">
          <label class="custom-label">名称:</label>
          <div class="custom-item-box">
            <input v-model="name" class="name-input" style="height: 90%; width: 100%" @change="nameChange(currentModel)" />
          </div>
        </div>
        <div style="display: flex" class="custom-item">
          <label class="custom-label">区域:</label>
          <div class="custom-item-box">
            <XbsjSelect id="area-select" title="name" :list="areaList" v-model:value="selectArea" />
          </div>
        </div>
        <div style="display: flex" class="custom-item">
          <label class="custom-label">主机设备:</label>
          <div class="custom-item-box">
            <XbsjSelect title="deviceName" :list="hostDeviceList" v-model:value="selectHostDevice" />
          </div>
        </div>
        <div style="display: flex" class="custom-item">
          <label class="custom-label">设备编码:</label>
          <div class="custom-item-box">
            <input v-model="selectDeviceNum" class="name-input" style="height: 90%; width: 100%" />
          </div>
        </div>
        <div style="display: flex; height: 20%" class="custom-item">
          <label class="custom-label">上传图标:</label>
          <div class="custom-item-box">
            <div class="upload-box">
              <upload v-model:file="uploadFile" :pre-view-url="previewImgUrl" :isUpdateModel="isUpdateModel" ref="pinIconUpload" />
            </div>
          </div>
        </div>
        <div style="display: flex" class="custom-item">
          <label class="custom-label">经纬度:</label>
          <div class="custom-item-box">
            <!-- <XbsjLngLatHeight v-model="LngLatHeight" style="height: 90%; width: 100%"></XbsjLngLatHeight> -->
            <input v-model="LngLatHeight[0]" type="number" class="xyz-input" />
            <input v-model="LngLatHeight[1]" type="number" class="xyz-input y-margin" />
            <input v-model="LngLatHeight[2]" type="number" class="xyz-input" />
          </div>
        </div>
        <div style="display: flex" class="custom-item">
          <label class="custom-label">扫描颜色:</label>
          <div class="custom-item-box">
            <XbsjColorButton style="height: 30px" v-model:color="radarColor"> </XbsjColorButton>
          </div>
        </div>
        <div style="display: flex" class="custom-item">
          <label class="custom-label">法线偏移角度:</label>
          <div class="custom-item-box">
            <input v-model="radarShifting" type="number" class="xyz-input" />
          </div>
        </div>
        <div style="display: flex" class="custom-item">
          <label class="custom-label">扫描范围:</label>
          <div class="custom-item-box">
            <input v-model="radarRange" type="number" class="xyz-input" />
          </div>
        </div>
        <div style="display: flex" class="custom-item">
          <label class="custom-label">扫描半径:</label>
          <div class="custom-item-box">
            <input v-model="radarRadius" type="number" class="xyz-input" />
          </div>
        </div>
        <div style="display: flex; justify-content: center" class="custom-item">
          <button
            @click="modelState('creating')"
            :class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']"
            :disabled="creating"
            style="width: 20%; display: flex; align-items: center; justify-content: center"
          >
            拾取
          </button>
          <button
            @click="currentModel.editing = true"
            :class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']"
            :disabled="creating"
            style="width: 20%; display: flex; align-items: center; justify-content: center"
          >
            移动
          </button>
        </div>
      </div>
      <div class="object-box" v-show="currentModel && currentModel.xbsjType == 'Pin' && selectModel.value == 'wb'">
        <div style="display: flex" class="custom-item">
          <label class="custom-label">名称:</label>
          <div class="custom-item-box">
            <input v-model="name" class="name-input" style="height: 90%; width: 100%" @change="nameChange(currentModel)" />
          </div>
        </div>
        <div style="display: flex" class="custom-item">
          <label class="custom-label">区域:</label>
          <div class="custom-item-box">
            <XbsjSelect id="area-select" title="name" :list="areaList" v-model:value="selectArea" />
          </div>
        </div>
        <div style="display: flex" class="custom-item">
          <label class="custom-label">主机设备:</label>
          <div class="custom-item-box">
            <XbsjSelect title="deviceName" :list="hostDeviceList" v-model:value="selectHostDevice" />
          </div>
        </div>
        <div style="display: flex" class="custom-item">
          <label class="custom-label">设备编码:</label>
          <div class="custom-item-box">
            <input v-model="selectDeviceNum" class="name-input" style="height: 90%; width: 100%" />
          </div>
        </div>
        <div style="display: flex; height: 20%" class="custom-item">
          <label class="custom-label">上传图标:</label>
          <div class="custom-item-box">
            <div class="upload-box">
              <upload v-model:file="uploadFile" :pre-view-url="previewImgUrl" :isUpdateModel="isUpdateModel" ref="pinIconUpload" />
            </div>
          </div>
        </div>
        <div style="display: flex" class="custom-item">
          <label class="custom-label">经纬度:</label>
          <div class="custom-item-box">
            <!-- <XbsjLngLatHeight v-model="LngLatHeight" style="height: 90%; width: 100%"></XbsjLngLatHeight> -->
            <input v-model="LngLatHeight[0]" type="number" class="xyz-input" />
            <input v-model="LngLatHeight[1]" type="number" class="xyz-input y-margin" />
            <input v-model="LngLatHeight[2]" type="number" class="xyz-input" />
          </div>
        </div>
        <div style="display: flex; justify-content: center" class="custom-item">
          <button
            @click="modelState('creating')"
            :class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']"
            :disabled="creating"
            style="width: 20%; display: flex; align-items: center; justify-content: center"
          >
            拾取
          </button>
          <button
            @click="currentModel.editing = true"
            :class="['xbsj-button', 'edit-model-btn', creating ? 'edit-model-btn-disable' : '']"
            :disabled="creating"
            style="width: 20%; display: flex; align-items: center; justify-content: center"
          >
            移动
          </button>
        </div>
      </div>
      <div class="Mask" v-show="currentModel == null"></div>
    </Window>
  </div>
</template>

<script lang="ts">
  import { onBeforeUnmount, watchEffect, onMounted, nextTick, defineComponent, ref, getCurrentInstance, computed, watch, createVNode, render } from 'vue';
  import xbsjScale from '/@/components/earthMap/components/xbsjScale.vue';
  import XbsjSelect from '/@/components/earthMap/components/XbsjSelect.vue';
  import XbsjColorButton from '/@/components/earthMap/components/XbsjColorButton.vue';
  import upload from '/@/components/earthMap/components/upload.vue';
  import Window from '@/components/earthMap/components/Window.vue';
  import { useUserStore } from '/@/store/modules/user';
  import { defHttp } from '/@/utils/http/axios';
  import seneIdTreeSelect from '/@/components/earthMap/components/seneIdTreeSelect.vue';
  import $mitt from '@/utils/earthMap/mitt';
  import { useMessage } from '/@/hooks/web/useMessage';
  import $ from 'jquery';
  import { addModel, addPin, addViewShed, addViewShedRadar } from '@/utils/earthMap/earthObj';
  export default defineComponent({
    name: 'AddModelWin',
    components: { xbsjScale, XbsjSelect, upload, XbsjColorButton, Window },
    props: {
      title: {
        type: String,
        default: '创建元素',
      },
      setLabelStatus: {
        type: Function,
        default: null,
      },
      czmObject: {
        type: Object,
        default: null,
      },
      node: {
        type: Object,
        default: null,
      },
      type: {
        type: String,
        default: '',
      },
      lineId: {
        type: String,
        default: '',
      },
      areaCode: {
        type: String,
        default: '',
      },
      areaByNodeId: {
        type: Map,
        default: null,
      },
      setIconByRef: {
        type: Function,
        default: null,
      },
      el: {
        type: Object,
        default: null,
      },
      eidtId: {
        type: String,
        default: '',
      },
    },
    setup(props, ctx) {
      const { proxy }: any = getCurrentInstance();
      const { createMessage } = useMessage();
      // const $mitt = mitt();
      const userStore = useUserStore();
      let expand = ref(true); //是否展开
      let radarColor = ref({ rgba: { r: 0, g: 255, b: 0, a: 0.5 } });
      let radarRange = ref(0);
      let radarRadius = ref(0);

      //法线偏移角度
      let radarShifting = ref(0);
      //雷达扫描编辑、取消使用
      let radarOldObj: any = ref({});
      let radarUrl = ref({
        list: '/military/RadarConfig/list',
        add: '/military/RadarConfig/add',
        edit: '/military/RadarConfig/edit',
        delete: '/military/RadarConfig/delete',
      });

      let heightCoefficient = ref(0.5); //  高
      let widthCoefficient = ref(0.3); //  宽
      let currentModel: any = ref(null); // 当前模型
      let isUpdateModel = ref(false); // 是否有更新模型
      let modelSelectList = ref([
        {
          id: 'qy',
          name: '区域',
          type: 'qy',
          value: 'qy',
        },
        {
          id: 'jkd',
          name: '监控点',
          type: 'jkd',
          value: 'jkd',
        },
        {
          id: 'wb',
          name: '微波',
          type: 'wb',
          value: 'wb',
        },
        {
          id: 'ld',
          name: '雷达',
          type: 'ld',
          value: 'ld',
        },
      ]); //模型类型列表
      let selectModel: any = ref({ name: '请选择创建类型' }); // 选中模型类型
      let name = ref(''); // 模型名称
      let LngLatHeight = ref([0, 0, 0]); // 俯仰角度
      let rotation = ref([0, 0, 0]); // 旋转角度
      let scale = ref([1, 1, 1]); // 缩放
      let creating = ref(false); // 是否跟随鼠标状态
      let show = ref(false); // // 是否可见
      let rotationEditing = ref(false); // 开启旋转辅助
      let winVisible = ref(true); // 窗口显示或隐藏
      let areaList = ref([]); // 区域列表
      let previewImgUrl = ref(''); // 上传图片路径
      let uploadFile = ref(null); // 上传图片文件
      let selectArea: any = ref(null); // 选中区域
      let submitObject: any = ref({}); // 提交对象
      let isFristChangeMethod = ref(true);
      let revert = ref(null); // 取消还原数据
      let islands = ref([]); // 岛屿列表
      let minimumPixelSize = ref(80); // 最大像素大小
      let hostDeviceList = ref([]); // 主机设备列表
      let selectHostDevice: any = ref(null);
      let deviceNumList = ref([]); // 设备编码列表
      let selectDeviceNum = ref(null); // 提交对象
      let timer: any = ref(null); //定时器
      // 设置上传次数
      let uploadFileCount = ref(1);
      //ref
      let pinIconUpload = ref(); //定时器

      //computed
      const width = computed(() => {
        return window.outerWidth * widthCoefficient.value;
      });
      const height = computed(() => {
        return window.outerHeight * heightCoefficient.value;
      });
      const top = computed(() => {
        return window.outerHeight * ((1.0 - heightCoefficient.value - 0.15) / 2);
      });
      const left = computed(() => {
        return (window.outerWidth * (1.0 - widthCoefficient.value)) / 2;
      });

      //watch
      // watch(radarColor,(newVal, oldVal)=>{
      //   getRadarScan()
      // })
      // watch(radarRange,(newVal, oldVal)=>{
      //   getRadarScan()
      // })
      // watch(radarRadius,(newVal, oldVal)=>{
      //   getRadarScan()
      // })
      // watch(radarShifting,(newVal, oldVal)=>{
      //   getRadarScan()
      // })
      //监听多个值
      watch([radarColor, radarRange, radarRadius, radarShifting], () => {
        getRadarScan();
      });

      watch(uploadFile, (newVal, oldVal) => {
        // console.log("uploadFile-newVal",newVal);

        // 模拟表单提交的对象
        let formData = new FormData();
        // 设置上传目录为temp
        formData.append('biz', 'temp');
        // 设置上传文件
        formData.append('file', newVal);
        // 进行上传等待响应
        defHttp.post({ url: '/sys/common/upload', params: formData }, { isTransformResponse: false }).then((response) => {
          // 响应并成功操作
          if (response.success) {
            // 设置图片显示地址
            let imageUrl = '/dt/sys/common/static/' + response.message;
            // 设置img dom元素src预览地址
            previewImgUrl.value = imageUrl;
            // 设置地图中pin的图片地址
            currentModel.value.imageUrl = imageUrl;
            if (!isUpdateModel.value && uploadFileCount.value == 1) {
              // 设置pin展示
              show.value = true;
              // 设置为编辑状态
              creating.value = true;
              // 上传次数变成2
              uploadFileCount.value++;
            }
          }
        });
      });

      // watchEffect(()=>{
      //   console.log('uploadFile.value',uploadFile.value);
      // })

      watch(selectModel, (newVal, oldVal) => {
        // console.log("selectModel",newVal);
        // debugger
        /**
         * 防止重复打开drawShape组件，所以每次变更选项时，都进行关闭操作
         */
        $mitt.emit('drawShapeShow', { show: false });
        // 更新状态，什么也不做
        if (isUpdateModel.value) {
          return;
        }
        // 选中类型空了，什么也不做
        if (!selectModel.value.value) {
          return;
        }
        // 当前对象不为空时，释放掉这个对象，并清理上传图片
        if (currentModel.value) {
          currentModel.value.destroy();
          currentModel.value = null;
          pinIconUpload.value?.clear();
        }
        if (newVal.value == 'wb' || newVal.value == 'ld') {
          getHostDeviceList();
        }
        // 登录人部门信息
        // let orgCode = Vue.ls.get(USER_INFO).orgCode
        let orgCode: any = userStore.userInfo?.orgCode;
        if (orgCode.length <= 3) {
          orgCode = undefined;
        }
        // this 别称
        // const that = this
        // 在取得区域数据后，进行模型的创建操作
        getAreas(orgCode)
          .then(() => {
            try {
              if (selectModel.value.value === 'jkd') {
                // console.log("jkd");
                expand.value = true; // 折叠面板
                currentModel.value = addModel();
                // console.log(" currentModel.value", currentModel.value);
              } else if (selectModel.value.value === 'qy') {
                expand.value = false; // 折叠面板
                currentModel.value = addArea();
                // currentModel.value = addPolyline();
                // console.log(" currentModel.value", currentModel.value);
              } else {
                expand.value = true; // 折叠面板
                currentModel.value = addPin();
              }
            } catch (e) {
              // 无关紧要的语法错误，不影响运行
              // console.log(that.currentModel)
              // console.error(e)
            }
          })
          .catch((e) => {
            // 提示用户加载数据出现了问题
            createMessage.error('加载区域数据出错', 2);
          });
      });

      onMounted(() => {
        //监听关闭方法 关闭本组件
        $mitt.on('windowCancel', cancel);
        // debugger
        // 传入属性
        // const props = this.getBind()
        // 当传入属性的更新对象为空时，什么也不做
        if (!props.czmObject) {
          return;
        }
        const areaCode = props.areaCode;
        // 设置当前选中的元素，模拟用户操作，切换窗体元素
        selectModel.value = { value: props.type };
        // 设置当前状态为更新
        isUpdateModel.value = props.czmObject ? true : false;
        getHostDeviceList().then(() => {
          // 获取到区域数据后在进行操作
          // getAreas(Vue.ls.get(USER_INFO).orgCode).then(() => {
          getAreas(userStore.userInfo?.orgCode).then(() => {
            // 区域数据加载完后
            nextTick(() => {
              try {
                // 记录回溯数据
                revert.value = props.czmObject.toAllJSON();
                // 设置当前模型为传入模型
                currentModel.value = props.czmObject;
                // console.log('currentModel.value',currentModel.value);
              } catch (e) {
                // 抛出异常 因为源码proxy 没有set方法没有返回true
                // 设置当前选中的元素，模拟用户操作，切换窗体元素
                selectModel.value = { value: props.type };
              }
              // 设置页面加载后的初始数据
              updateValueSet(props);
            });
          });
        });
      });

      onBeforeUnmount(() => {
        //组件销毁前 关闭mitt
        $mitt.emit('drawShapeShow', { show: false });
        $mitt.off('windowCancel');
        $mitt.off('addAreaFinished');
      });
      // 取消方法
      function cancel() {
        if (isUpdateModel.value) {
          // 调用更新时的取消
          updateClose();
        } else {
          // 调用创建时的取消
          close();
        }

        //通过父组件v-if 关闭本组件
        proxy.$parent.addModelWinShow = false;
      }

      // 创建时的取消方法
      function close() {
        // 模型不为空时，消耗模型
        if (currentModel.value) {
          if (currentModel.value.addViewShedReturn) {
            console.log('window.$earth.czm.viewer.entities', window.$earth.czm.viewer.entities);

            window.$earth.czm.viewer.entities.remove(currentModel.value.addViewShedReturn);
          }
          currentModel.value.editing = false;
          currentModel.value.destroy();
        }
      }

      // 更新时取消
      function updateClose() {
        // 还原数据
        if (currentModel.value) {
          currentModel.value.xbsjFromJSON(revert.value);
          if (Object.keys(radarOldObj.value).length > 0) {
            radarColor.value.rgba = radarOldObj.value.color;
            radarRadius.value = radarOldObj.value.radarRadius;
            radarRange.value = radarOldObj.value.radarRange;
            radarShifting.value = radarOldObj.value.radarShifting;
          }
          currentModel.value.editing = false;
          currentModel.value.positionEditing = false;
          currentModel.value.rotationEditing = false;
        }
      }

      function finish() {
        if (currentModel.value) {
          // 释放当前模型的引用
          currentModel.value.rotationEditing = false;
          currentModel.value.positionEditing = false;
          currentModel.value = null;
        }
        //通过父组件v-if 关闭本组件
        proxy.$parent.addModelWinShow = false;
      }
      /**
       * 确认方法
       */
      function ok() {
        // debugger
        // $mitt.off('windowCancel')
        // console.log('selectArea.value',selectArea.value);
        // console.log('selectArea.value.id',selectArea.value.id);
        // console.log('currentModel.value',currentModel.value);

        // 不允许选择模型为空
        if (!selectModel.value.value) {
          return;
        } else if (name.value == null || name.value.length <= 0) {
          // 名称效验
          createMessage.warning('需要先填写名称', 2);
          return;
        } else if (currentModel.value.xbsjType == 'Pin' && currentModel.value.imageUrl.length <= 0) {
          // pin类型图片效验
          createMessage.warning('需要先上传图片', 2);
          return;
        } else if (currentModel.value.xbsjType == 'Pin' && !selectHostDevice.value) {
          createMessage.warning('主机设备不能为空', 2);
          return;
        } else if (currentModel.value.xbsjType == 'Pin' && !selectDeviceNum.value) {
          createMessage.warning('设备编码不能为空', 2);
          return;
        }
        //***************************************************
        else if (currentModel.value.xbsjType !== 'Polyline' && (selectArea.value == null || selectArea.value.id <= 0)) {
          // 非区域类型，区域效验
          createMessage.warning('需要先选择区域', 2);
          return;
        }
        currentModel.value.editing = false;
        // 提交数据
        submitData();
      }
      // 绑定模型属性
      function bindModelProps(model) {
        // 绑定位移
        model.disposers.push(window.XE.MVVM.bindPosition(proxy, 'LngLatHeight', model, 'xbsjPosition'));
        // 绑定角度
        model.disposers.push(window.XE.MVVM.bindRotation(proxy, 'rotation', model, 'xbsjRotation'));
        // 绑定缩放
        model.disposers.push(window.XE.MVVM.bind(proxy, 'scale', model, 'xbsjScale'));
        // 绑定编辑状态
        model.disposers.push(window.XE.MVVM.bind(proxy, 'creating', model, 'creating'));
        // 绑定旋转状态
        model.disposers.push(window.XE.MVVM.bind(proxy, 'rotationEditing', model, 'rotationEditing'));
        // 绑定最小像素
        model.disposers.push(window.XE.MVVM.bind(proxy, 'minimumPixelSize', model, 'minimumPixelSize'));
      }

      // 添加模型
      function addModel() {
        // debugger
        // 创建模型
        const model = new window.XE.Obj.Model(window.$earth);
        // 设置视距
        model.distanceDisplayCondition = [1, 30000];
        // 设置模型地址
        model.url = window._CONFIG['domianURL'] + '/sys/common/static/dxgG.gltf';
        // 设置缩放倍数
        model.scale = 0.03;
        // model.creating = true
        // 绑定属性
        bindModelProps(model);
        minimumPixelSize.value = 80;
        // 切换为创建状态
        // modelState('creating');
        // model.flyTo()
        return model;
      }

      function bindPinProps(pin) {
        pin.disposers.push(window.XE.MVVM.bindPosition(proxy, 'LngLatHeight', pin, 'position'));
        pin.disposers.push(window.XE.MVVM.bind(proxy, 'creating', pin, 'creating'));
        pin.disposers.push(window.XE.MVVM.bind(proxy, 'show', pin, 'show'));
      }

      // 添加pin
      function addPin() {
        // 创建pin
        const pin = new window.XE.Obj.Pin(window.$earth);
        // 设置缩放
        pin.scale = 0.8;
        // 设置url
        pin.imageUrl = '';
        // 设置最大可视距离
        pin.far = 1073741824;
        // 设置显示文字样式
        pin.pinBuilder.extTextFont = '30px 楷体';
        pin.pinBuilder.extTextPixelOffset = [30, -20];
        pin.pinBuilder.fillColor = [1, 1, 1, 0.9];
        pin.pinBuilder.outlineColor = [0, 0, 0, 0.9];
        // 绑定属性
        bindPinProps(pin);
        // 设置为不可见
        show.value = false;
        // 刷新窗体
        modelState('creating');
        modelState('creating');
        return pin;
      }

      // 创建区域
      /**
       * @abstract 需要调用 drawShape组件 进行绘图，提取当中的坐标点position
       *  处理完数据再使用 addPolyline方法 window.XE.Obj.Polyline 创建线段
       *
       *  @abstract
       *   $mitt.emit('drawShapeShow') 打开drawShape组件显示
       * @abstract
       *   $mitt.emit('addAreaFinished') 接受传回来的临时图形
       */
      function addArea() {
        $mitt.emit('drawShapeShow', { show: true, title: '创建区域工具', from: 'addArea' });
        $mitt.on('addAreaFinished', (t: any) => {
          console.log('addAreaFinished', t);
          //t 为drawShape传过来的临时图形
          t.creating = true;
          // 监控t数据，完成创建后调用后续方法
          window.XE.MVVM.watch(t, 'creating', (n: any) => {
            // console.log('creating', n);
            if (n == false) {
              //面
              let positions: any = [];
              if (t._polygon) {
                positions = t._polygon._polyline.positions;
              }
              //线
              else if (t._polyline) {
                positions = t._polyline.positions;
              } else {
                positions = t.positions;
                // console.error("图形错误");
              }
              //销毁临时图形
              t.destroy();
              /**
               * 控制时序，处理完数据再调用方法  addPolyline
               * 否则会出现在数据滞后在图形创建时，导致数据错误
               *
               */
              nextTick(() => {
                addPolyline(positions);
              });
            }
          });
        });
      }
      /**
       * @params 需要调用 addArea 方法进行绘图，获取坐标点position
       */
      function addPolyline(positions: any = null) {
        // 关闭此窗体
        cancel();
        // 创建区域
        const currentModel = new window.XE.Obj.Polyline(window.$earth);
        // 设置配置参数
        const objConfig = {
          positions: positions,
        };
        // 插入数据
        currentModel.xbsjFromJSON(objConfig);
        // console.log('currentModel', currentModel);
        // 获取地图ui对象
        const earthUI = window.$uia;
        // 打开一个区域编辑ui窗体
        earthUI.showPropertyWindow(currentModel);
        nextTick(() => {
          // 主要ui窗口
          const mainUI = earthUI._vm.$refs.mainUI;
          // 所有打开的ui窗口Ref值
          const windowsAttrList = Object.keys(mainUI.$refs);
          // 寻找当前窗体的工具对象
          const modelToolKey = windowsAttrList.filter((f) => f.indexOf(currentModel.guid) > -1)[0];
          const modelTool = mainUI.$refs[modelToolKey][0];
          // console.log("modelTool",modelTool);

          // 当前窗体的元素
          const el = modelTool.$el;
          // console.log("el",el);
          // this.cloneEl(el)
          //样式
          el.children[2].style.padding = '0px';
          el.children[2].style.transition = 'none';
          // 加入循环周期输入框
        //   let divCustom = document.createElement("div");
        //   divCustom.setAttribute("data-v-74b863e5", "");
        //   divCustom.setAttribute("class", "flatten");
        //   divCustom.innerHTML = 
        //   ` 
        //         <label data-v-74b863e5="">循环周期</label> 
        //         <input data-v-74b863e5="" placeholder="循环周期(帧)" id="cycleFrame" type="number" style="float: left;">
        //   `;
        // let fatherNode = el.children[2].children[0].children[0]
        // let insertBeforeWhich = el.children[2].children[0].children[0].children[1];
        // fatherNode.insertBefore(divCustom,insertBeforeWhich);
          //加入区域场景选择器
          let divCustom = document.createElement("div");
          divCustom.setAttribute("data-v-74b863e5", "");
          divCustom.setAttribute("class", "flatten");
          divCustom.setAttribute("style", "display: flex; margin-bottom: 20px;");
          // divCustom.setAttribute("style", "position: relative;");
          divCustom.innerHTML = 
          `
            <label data-v-74b863e5="">所属区域</label> 
          `
          let instance: ReturnType<typeof createVNode> | null = null;
          // 创建虚拟节点,传入模型的数据
          instance = createVNode(seneIdTreeSelect,{currentModel});
          // 渲染
          render(instance, divCustom);
          // 父节点
          let fatherNode = el.children[2].children[0].children[0]
          // 插入位置
          let insertBeforeWhich = el.children[2].children[0].children[0].children[1];
          fatherNode.insertBefore(divCustom,insertBeforeWhich);

          // 取消按钮元素
          const cancelBtn = el.children[3].children[0];
          // 确认按钮元素
          const okBtn = el.children[3].children[1];
          // 设置确认按钮点击事件
          okBtn.onclick = function () {
            // console.log("currentModel",currentModel);
            // return
            // 判断所属区域
            if (!currentModel.sceneId) {
              createMessage.warning('请选择所属区域', 2);
              return;
            }
            //关闭多余窗口
            $mitt.emit('windowCancel');
            // 提交对象
            const submitData: any = {};
            // 路径为空，无法提交
            const poistions = currentModel.positions;
            if (poistions.length <= 0) {
              createMessage.warning('路径为空，无法创建', 2);
              return;
            }
            // 模型名称
            submitData.name = currentModel.name;
            // 场景区域
            submitData.sceneId = currentModel.sceneId;
            // 线段编码
            submitData.lineCode = currentModel.guid;
            // 首尾相连属性
            submitData.isLoop = Number(currentModel.loop);
            // 深度检查
            submitData.isDepthCheck = Number(currentModel.depthTest);
            // 宽度
            submitData.width = currentModel.width;
            // 插值方式
            submitData.interpolation = currentModel.arcType;
            // 路径数组
            submitData.positions = JSON.stringify(poistions);
             // 材质
             submitData.material = JSON.stringify(currentModel.material)
            // 材质类型
            switch (currentModel.material.type) {
              // 实线
              case 'XbsjColorMaterial':
                // 实线材质0
                submitData.materialType = 0;
                // 线段颜色
                submitData.color = JSON.stringify(currentModel.material.XbsjColorMaterial.color);
                // 以下为没有属性，所以赋予默认值
                submitData.intervalColor = null;
                submitData.dashLength = 0;
                submitData.dashStyle = 0;
                break;
              // 虚线
              case 'XbsjPolylineDashMaterial':
                // 虚线材质1
                submitData.materialType = 1;
                // 线段颜色
                submitData.color = JSON.stringify(currentModel.material.XbsjPolylineDashMaterial.color);
                // 间隔颜色
                submitData.intervalColor = JSON.stringify(currentModel.material.XbsjPolylineDashMaterial.gapColor);
                // 虚线长度
                submitData.dashLength = currentModel.material.XbsjPolylineDashMaterial.dashLength;
                // 虚线样式
                submitData.dashStyle = currentModel.material.XbsjPolylineDashMaterial.dashPattern;
                break;
              // 箭头线
              case 'XbsjPolylineArrowMaterial':
                // 箭头线2
                submitData.materialType = 2;
                // 线段颜色
                submitData.color = JSON.stringify(currentModel.material.XbsjPolylineArrowMaterial.color);
                // 以下为没有的属性
                submitData.intervalColor = null;
                submitData.dashLength = 0;
                submitData.dashStyle = 0;
                break;
              // 轨迹线
              case 'XbsjODLineMaterial':
                // 轨迹线
                submitData.materialType = 3;
                // 线段颜色
                submitData.color = JSON.stringify(currentModel.material.XbsjODLineMaterial.color);
                // 没有的属性
                submitData.intervalColor = null;
                submitData.dashLength = 0;
                submitData.dashStyle = 0;
                // 循环周期
                submitData.cycleFrame = currentModel.material.XbsjODLineMaterial.totoalFrameCount;

                // material.XbsjODLineMaterial = {}
                // material.XbsjODLineMaterial.color = JSON.parse(data.color)
                // material.XbsjODLineMaterial.totoalFrameCount = data.cycleFrame
                break;
            }
            // 提交区域数据
            defHttp
              .post({ url: '/military/msMapLine/add', params: submitData }, { isTransformResponse: false })
              .then((response) => {
                // 成功后挂载节点到树中
                if (response.success) {
                  // 记录id
                  currentModel.id = response.result;
                  // 设置父节点
                  const parent = window.$earth.sceneTree.$refs[currentModel.sceneId];
                  // 生成叶子节点
                  const leaf = new window.XE.SceneTree.Leaf(currentModel);
                  // 设置叶子节点标识
                  leaf.ref = response.result;
                  // 挂载上树
                  window.$earth.sceneTree.root.children.push(leaf);
                  // 隐藏叶子节点的dom节点
                  nextTick(() => {
                    $('#earthContainer>div>div>div:nth-child(5)')
                      .children('div')
                      .eq(1)
                      .children()
                      .eq(0)
                      .children()
                      .eq(0)
                      .children()
                      .each((index, element) => {
                        if (index <= 1) {
                          return;
                        }
                        const paddingLeft = $(element).children().eq(0).css('padding-left');
                        if (paddingLeft === '10px') {
                          $(element).css('display', 'none');
                        }
                      });
                  });
                  // 生成显示在树上的节点，此为虚假的节点，关联关系为ref一个为 node_ref 一个为ref
                  const node = {
                    ref: 'node_' + response.result,
                    title: '<防区>'+ currentModel.name,
                    expand: false,
                    children: [
                      {
                        expand: false,
                        title: '监控点位',
                        ref: 'monitor_' + window.guid(),
                        children: [],
                      },
                      {
                        expand: false,
                        title: '雷达点位',
                        ref: 'ldList_' + window.guid(),
                        children: [],
                      },
                      {
                        expand: false,
                        title: '微波点位',
                        ref: 'wbList_' + window.guid(),
                        children: [],
                      },
                    ],
                  };
                  // 挂载并显示到树上
                  // window.$earth.sceneTree.$refs.areas.children.push(node);
                  parent.children.push(node);
                  // 提示用户
                  createMessage.success('添加成功！', 2);
                } else {
                  throw '新增区域数据出错';
                }
              })
              .catch((e) => {
                createMessage.error('新增区域数据出错', 2);
              });
          };
          // 取消按钮
          cancelBtn.onclick = function () {
            $mitt.off('windowCancel');
            // 消耗当前窗体的dom节点
            el.remove();
            // 消耗当前创建的对象
            // console.log("currentModel",currentModel);
            currentModel.destroy();
          };
        });

        return currentModel;
      }

      // 修改属性状态,取反
      function modelState(propName) {
        // propName.value = !propName.value
        proxy[propName] = !proxy[propName];
      }
      function submitModel() {
        if (selectModel.value.value === 'jkd') {
        }
      }

      // 名称修改的变化事件
      function nameChange(model) {
        if (model.xbsjType == 'Model') {
        } else if (model.xbsjType == 'Pin') {
          // pin类型的名称变化时修改显示的文字
          model.pinBuilder.extText = name.value;
        }
      }

      // 获取区域数据
      function getAreas(area) {
        const submitData: any = {
          pageNo: 1,
          pageSize: 999,
        };
        if (area) {
          submitData.sysOrgCode = area + '*';
        }
        return defHttp
          .get({ url: '/military/msMapLine/list', params: submitData }, { isTransformResponse: false })
          .then((response) => {
            if (response.success) {
              const labelAttr = selectModel.value.value == 'ld' ? 4 : 10; // 雷达字典编号4 微波字典编号10
              //过滤区域（雷达为二级区域，其它为一级）
              areaList.value = response.result.records.filter((item) => {
                if (labelAttr == 4) {
                  return item.parentCode != null;
                } else {
                  return item.parentCode == null;
                }
              });
            } else {
              throw '加载区域数据出错';
            }
          })
          .catch((e) => {
            console.error(e);
          });
      }

      function getHostDeviceList() {
        const url = '/military/msDeviceInfo/list';
        const args = { pageNo: 1, pageSize: 999 };

        return defHttp
          .get({ url, params: args }, { isTransformResponse: false })
          .then((reponse) => {
            if (reponse.success) {
              hostDeviceList.value = reponse.result.records;
              // console.log(reponse)
            }
          })
          .catch(() => {
            throw '获取主机信息错误';
          });
      }

      // 提交数据方法
      function submitData() {
        // 判断当前模型为模型所提交的数据
        if (currentModel.value.xbsjType == 'Model') {
          // 查找最后一个/所在位置
          let startNum = currentModel.value.url.lastIndexOf('/') + 1;
          // 获取出模型名称 监控点
          let modelName = '';
          if (startNum > -1) {
            modelName = currentModel.value.url.substring(startNum, currentModel.value.url.length);
          }
          submitObject.value = {
            id: null,
            createBy: null,
            createTime: null,
            updateBy: null,
            updateTime: null,
            sitecode: null,
            sitename: name.value, // 名称
            longitude: LngLatHeight.value[0], // x坐标
            latitude: LngLatHeight.value[1], // y坐标
            height: LngLatHeight.value[2], // z坐标
            yaw: rotation.value[0], // x旋转
            pitch: rotation.value[1], // y旋转
            roll: rotation.value[2], // z旋转
            lineId: selectArea.value.id ? selectArea.value.id : null, // 防区id
            state: 1, // 数据状态
            modelUrl: modelName, // 模型url地址
            scale: currentModel.value.scale ? currentModel.value.scale : 1, // 整体缩放比例 默认1
            xyzScale: scale.value.toString(), // xyz缩放比例
            minimumPixelSize: minimumPixelSize.value, // 最小像素大小
          };
          let request: any = null;
          let url, // 提交地址
            method = ''; // 提交方法类型
          if (isUpdateModel.value) {
            // 设置url为编辑地址，设置方法为put 设置记录id
            url = '/military/camera/site/edit';
            submitObject.value.id = currentModel.value.customProp;
            request = defHttp.put({ url: url, params: submitObject.value }, { isTransformResponse: false });
            // request = putAction(url, submitObject.value)
          } else {
            // 设置url为新增地址，设置方法为post
            url = '/military/camera/site/add';
            request = defHttp.post({ url: url, params: submitObject.value }, { isTransformResponse: false });
            // request = postAction(url, this.submitObject)
          }
          // 提交数据，等待回复
          request
            .then(function (response) {
              // 数据回复，并成功
              if (response.success) {
                // 设置显示节点的ref为 node_ref
                const lineId = 'node_' + selectArea.value.id;
                // 当前处于新增状态
                if (!isUpdateModel.value) {
                  // 设置父节点
                  const parent = window.$earth.sceneTree.$refs[lineId].children[0];
                  // 真实的叶子节点
                  let node = new window.XE.SceneTree.Leaf(currentModel.value);
                  // 设置叶子节点的ref
                  node.ref = response.result;
                  // 将id存入customProp属性中
                  currentModel.value.customProp = response.result;
                  // 设置树中显示文
                  node.title = name.value;
                  // 设置节点的name，用来存储,区域id。name属性不在模型树上显示，故而只用作数据储存功能
                  node.name = selectArea.value.id;
                  // 将此节点添加到树中
                  window.$earth.sceneTree.root.children.push(node);
                  // 移除真实叶子节点显示的dom
                  nextTick(() => {
                    $('#earthContainer>div>div>div:nth-child(5)')
                      .children('div')
                      .eq(1)
                      .children()
                      .eq(0)
                      .children()
                      .eq(0)
                      .children()
                      .each((index, element) => {
                        if (index <= 1) {
                          return;
                        }
                        const paddingLeft = $(element).children().eq(0).css('padding-left');
                        if (paddingLeft === '10px') {
                          $(element).css('display', 'none');
                        }
                      });
                  });
                  // 虚假的节点
                  const shamNode = {
                    ref: 'node_' + response.result, // 设置节点ref
                    title: name.value, // 设置节点显示文字
                    expand: false,
                    children: [],
                  };
                  // 树中加入并显示该节点
                  parent.children.push(shamNode);
                  // 提示用户
                  createMessage.success('添加成功！', 2);
                } else {
                  //当前处于更新状态
                  // 获取更新的虚假节点
                  const shamNode = window.$earth.sceneTree.$refs['node_' + submitObject.value.id];
                  // 更新虚假节点的显示文字
                  shamNode.title = name.value;
                  // 设置name属性
                  currentModel.value.name = name.value;
                  moveNode('Model');
                  // 提示用户
                  createMessage.success('修改成功！', 2);
                }
              }
            })
            .then(function () {
              // 清空当前模型的引用
              // currentModel.value = null
              // 隐藏窗体
              // winVisible.value = false
              //通过父组件v-if 关闭本组件
              // proxy.$parent.addModelWinShow = false
              finish();
            });
        } else if (currentModel.value.xbsjType == 'Pin') {
          const lastIndex = currentModel.value.imageUrl.lastIndexOf('/temp');
          const ImgUrl = currentModel.value.imageUrl.substring(lastIndex + 1);
          // 当前模型为Pin类型
          // 更具创建时选择的模型类型判断，赋予模型类型标识
          const labelAttr = selectModel.value.value == 'ld' ? 4 : 10; // 雷达字典编号4 微波字典编号10
          submitObject.value = {
            mapLabel: {
              id: null,
              createBy: null,
              createTime: null,
              updateBy: null,
              updateTime: null,
              sysOrgCode: null,
              labelAttr: labelAttr, // 类型标识
              labelName: name.value, // 名称
              lineId: selectArea.value?.id ? selectArea.value.id : null, // 所属区域
              labelLon: LngLatHeight.value[0], // x坐标
              labelLat: LngLatHeight.value[1], // y坐标
              labelHeight: LngLatHeight.value[2], // z坐标
              labelImgUrl: ImgUrl, // 设置url
              labelStatus: 1, // 启动:1 不启用 0
              labelCode: selectDeviceNum.value,
              cameraId: null,
              cameraName: null,
              pan: 0,
              tile: 0,
              zoom: 0,
              placements: null,
            },
            deviceId: selectHostDevice.value.id,
          };
          // console.log("submitObject.value",submitObject.value);
          // let radarObj = {
          //             radarCode: selectDeviceNum.value,
          //             elevation: Number(radarRange.value),
          //             workingRadius: Number(radarRadius.value),
          //             angularRadian: Number(radarShifting.value),
          //             customProp: JSON.stringify({ color: radarColor.value.rgba })
          //           }
          //           console.log("radarObj",radarObj);
          // debugger
          let request: any = null;
          let url1, // 提交地址
            method1 = ''; // 提交方法类型
          const { eidtId } = props;
          if (isUpdateModel.value) {
            // 设置url为编辑地址，设置方法为put 设置记录id
            url1 = 'military/msMapLabel/editMapLabel';
            submitObject.value.mapLabel.id = props.eidtId;
            // console.log('props.eidtId,',props.eidtId);

            request = defHttp.put({ url: url1, params: submitObject.value }, { isTransformResponse: false });
            // request = putAction(url1, this.submitObject.value)
          } else {
            // 设置url为新增地址，设置方法为post
            url1 = 'military/msMapLabel/addMapLabel';
            request = defHttp.post({ url: url1, params: submitObject.value }, { isTransformResponse: false });
            // request = postAction(url1, this.submitObject.value)
          }
          // const props = this.getBind()
          const { setLabelStatus, setIconByRef, el } = props;
          // 提交pin数据，等待响应
          request
            .then((response) => {
              // 响应，并成功
              if (response.success) {
                // 记录虚假节点的Ref
                const lineId = 'node_' + selectArea.value.id;
                const ldLineId = 'nodeSecondary_' + selectArea.value.id;
                // 创建状态下
                if (!isUpdateModel.value) {
                  // 该区域的微波集合
                  const wbParent = window.$earth.sceneTree.$refs[lineId] && window.$earth.sceneTree.$refs[lineId].children[2];
                  // 该区域的雷达集合
                  const ldParent = window.$earth.sceneTree.$refs[ldLineId];
                  // 创建叶子节点
                  let node = new window.XE.SceneTree.Leaf(currentModel.value);
                  // 设置节点显示名称
                  node.title = name.value;
                  // 设置节点ref
                  node.ref = response.result;
                  // name属性用来记录区域id
                  node.name = submitObject.value.lineId;
                  // 用户属性用来记录标志类型
                  currentModel.value.customProp =
                    '{"labelAttr":' + labelAttr + ',"labelCode":"' + selectDeviceNum.value + '","deviceId":"' + selectHostDevice.value.id + '"}';
                  setLabelStatus(selectHostDevice.value, selectDeviceNum.value, node.ref, 2).finally(() => {
                    if (labelAttr == 4) {
                      // 雷达新增一圆
                      ldParent.children.push(node);
                    } else {
                      // 微波新增一圆
                      wbParent.children.push(node);
                    }
                    // 提示用户
                    createMessage.success('添加成功！', 2);
                  });
                } else {
                  const node = window.$earth.sceneTree.$refs[eidtId];
                  node.title = name.value;
                  // 用户属性用来记录标志类型
                  currentModel.value.customProp =
                    '{"labelAttr":' + labelAttr + ',"labelCode":"' + selectDeviceNum.value + '","deviceId":"' + selectHostDevice.value.id + '"}';
                  setLabelStatus(selectHostDevice.value, selectDeviceNum.value, node.ref, 2).finally(() => {
                    const hasMoveNode = moveNode(selectModel.value.value);
                    if (!hasMoveNode) {
                      setIconByRef(node.ref, el);
                    }
                  });
                  // 提示用户
                  createMessage.success('编辑成功！', 2);
                  //-----------------------
                }
                //是否为雷达
                if (labelAttr == 4) {
                  //编辑(存在雷达扫描)
                  if (Object.keys(radarOldObj.value).length > 0) {
                    let radarObj = {
                      id: radarOldObj.value.id,
                      radarCode: selectDeviceNum.value,
                      elevation: Number(radarRange.value),
                      workingRadius: Number(radarRadius.value),
                      angularRadian: Number(radarShifting.value),
                      customProp: JSON.stringify({ color: radarColor.value.rgba }),
                    };
                    defHttp
                      .put({ url: radarUrl.value.edit, params: radarObj }, { isTransformResponse: false })
                      // putAction(that.radarUrl.edit, radarObj)
                      .then((res) => {
                        // console.log(res,'edit');
                      });
                  } else {
                    let radarObj = {
                      radarCode: selectDeviceNum.value,
                      elevation: Number(radarRange.value),
                      workingRadius: Number(radarRadius.value),
                      angularRadian: Number(radarShifting.value),
                      customProp: JSON.stringify({ color: radarColor.value.rgba }),
                    };
                    defHttp
                      .post({ url: radarUrl.value.add, params: radarObj }, { isTransformResponse: false })
                      // postAction(that.radarUrl.add, radarObj)
                      .then((res) => {
                        // console.log(res,'add');
                      });
                  }
                }
              } else {
                createMessage.error(response.message, 2);
                currentModel.value.destroy();
              }
            })
            .then(() => {
              // 释放当前模型的引用
              // currentModel.value = null
              // 关闭窗体
              // winVisible.value = false
              //通过父组件v-if 关闭本组件
              // proxy.$parent.addModelWinShow = false
              finish();
            });
        }
      }

      // 更新状态初始值赋予
      function updateValueSet(props) {
        // debugger
        // 设置name为模型的name
        name.value = currentModel.value.name;
        // 是否存在当前区域
        const hasArea = areaList.value.filter((item: any) => {
          return item.id == props.lineId;
        });
        // 存在当前区域
        if (hasArea.length > 0) {
          // 设置选中区域
          selectArea.value = hasArea[0];
        }
        // 类型为监控点时
        if (props.type == 'jkd') {
          // 绑定属性
          bindModelProps(currentModel.value);
        } else {
          previewImgUrl.value = currentModel.value.imageUrl;
          // console.log('previewImgUrl.value',previewImgUrl.value);

          const jsonObj = JSON.parse(currentModel.value.customProp);
          const hasHostDevice = hostDeviceList.value.filter((item: any) => {
            return item.id == jsonObj.deviceId;
          });
          if (hasHostDevice && hasHostDevice.length > 0) {
            selectHostDevice.value = hasHostDevice[0];
          } else {
            console.log('没有找到已选择的主机设备');
          }
          const labelCode = jsonObj.labelCode;
          if (labelCode && labelCode != 'null') {
            selectDeviceNum.value = labelCode;
            //初始雷达扫描属性值
            if (jsonObj.labelAttr == 4) {
              defHttp.get({ url: radarUrl.value.list, params: { radarCode: labelCode } }, { isTransformResponse: false }).then((res) => {
                if (res.success) {
                  if (res.result.records.length > 0) {
                    let data = res.result.records[0];
                    radarOldObj.value = {
                      id: data.id,
                      radarRadius: data.workingRadius,
                      radarRange: data.elevation,
                      radarShifting: data.angularRadian,
                    };
                    if (data.customProp) {
                      radarColor.value.rgba = JSON.parse(data.customProp).color;
                      radarOldObj.value.color = JSON.parse(data.customProp).color;
                    }
                    radarRadius.value = data.workingRadius;
                    radarRange.value = data.elevation;
                    radarShifting.value = data.angularRadian;
                  }
                }
              });
            }
          }
          // 绑定属性
          bindPinProps(currentModel.value);
        }
      }

      // 克隆dom对象，未调用方法
      function cloneEl(el) {
        const selectNode = el.children[2].children[0].children[0].children[5];
        const parent = selectNode.parentElement;
        const cloneNode = selectNode.cloneNode(true);
        cloneNode.children[0].children[0].innerHTML = '岛屿';
        const inputEl = cloneNode.children[0].children[1];
        const context = cloneNode.children[0].children[3];
        const scope = context.attributes[0];
        inputEl.value = '';
        inputEl.onclick = function () {
          const disState = context.style.display;
          if (disState == 'none') {
            context.style.display = 'block';
          } else {
            context.style.display = 'none';
          }
        };
        const selectItemText = '';
        defHttp.get({ url: '/military/msMapScene/list', params: { pageNo: 1, pageSize: 999 } }, { isTransformResponse: false }).then((response) => {
          const records = response.result.records;
          const fragment = new DocumentFragment();
          for (const record of records) {
            const itemEl = document.createElement('div');
            itemEl.onclick = function () {
              inputEl.value = record.sceneName;
              islands.value = record;
              context.style.display = 'none';
            };
            itemEl.id = record.sysOrgCode;
            itemEl.setAttribute(scope.name, '');
            itemEl.innerHTML = `<span ${scope.name} >${record.sceneName}</span>`;
            fragment.append(itemEl);
          }
          context.innerHTML = '';
          context.append(fragment);
          const beforeNode = el.children[2].children[0].children[0].children[4];
          parent.insertBefore(cloneNode, beforeNode);
        });
      }

      function moveNode(type) {
        if (!isUpdateModel.value) {
          return false;
        }
        // 传入属性
        // const props = this.getBind()
        if (props.lineId == selectArea.value.id) {
          return false;
        }
        // const areaByNodeId = props.areaByNodeId
        const currentNode = props.node._inner.sn;
        const newNodel = 'node_' + selectArea.value.id;
        const moveAreaNode = window.$earth.sceneTree.$refs[newNodel] || window.$earth.sceneTree.$refs['nodeSecondary_' + this.selectArea.id];
        if (moveAreaNode) {
          let moveNode = null;
          if (type == 'Model') {
            moveNode = moveAreaNode.children[0];
          } else if (type == 'ld') {
            moveNode = moveAreaNode;
          } else {
            moveNode = moveAreaNode.children[2];
          }
          const index = moveNode.children.length + 1;
          currentNode.moveTo(moveNode, index);
        }
        return true;
      }

      function getRadarScan() {
        if (timer.value) clearTimeout(timer.value);
        timer.value = setTimeout(() => {
          let rgb = radarColor.value.rgba;
          if (currentModel.value.addViewShedReturn) {
            window.$earth.czm.viewer.entities.remove(currentModel.value.addViewShedReturn);
          }
          //计算偏移角
          let left = Number(radarShifting.value) - Number(radarRange.value) / 2;
          currentModel.value.addViewShedReturn = addViewShedRadar(
            currentModel.value.position,
            radarRadius.value,
            left,
            Number(radarRange.value) / 2 + Number(radarShifting.value),
            [rgb.r / 255, rgb.g / 255, rgb.b / 255, rgb.a]
          );
        }, 300);
      }

      return {
        radarColor,
        radarRange,
        radarRadius,
        radarShifting,
        radarOldObj,
        radarUrl,
        heightCoefficient,
        widthCoefficient,
        currentModel,
        isUpdateModel,
        modelSelectList,
        selectModel,
        name,
        LngLatHeight,
        rotation,
        scale,
        creating,
        show,
        rotationEditing,
        winVisible,
        areaList,
        previewImgUrl,
        uploadFile,
        selectArea,
        submitObject,
        isFristChangeMethod,
        revert,
        islands,
        minimumPixelSize,
        hostDeviceList,
        selectHostDevice,
        deviceNumList,
        selectDeviceNum,
        timer,
        width,
        height,
        top,
        left,
        cancel,
        close,
        updateClose,
        ok,
        bindModelProps,
        addModel,
        bindPinProps,
        addPin,
        addPolyline,
        addArea,
        modelState,
        submitModel,
        nameChange,
        getAreas,
        getHostDeviceList,
        submitData,
        updateValueSet,
        cloneEl,
        moveNode,
        getRadarScan,
        pinIconUpload,
        uploadFileCount,
        expand,
      };
    },
  });
</script>

<style scoped>
  :deep(.custom-item-box > div > input) {
    width: 45% !important;
    margin-right: 0% !important;
  }

  :deep(.custom-item-box) {
    padding-left: 5% !important;
    width: 80% !important;
  }

  :deep(.xbsjselect) {
    height: 100% !important;
  }

  :deep(.xbsjselect-selectdiv) {
    left: 0px !important;
    top: 0px !important;
    height: 90% !important;
    display: flex !important;
    align-items: center !important;
    line-height: 0% !important;
    justify-content: space-between !important;
    padding-left: 5px !important;
  }

  :deep(.xbsjselect-selectButton) {
    margin-top: 0%;
  }

  :deep(.custom-label) {
    width: 15% !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #ffffff;
  }

  :deep(.custom-item) {
    height: 8%;
    margin-top: 2%;
  }

  :deep(.xbsjselect-selectOption) {
    width: 100% !important;
    min-height: auto !important;
  }

  .edit-model-btn {
    cursor: pointer;
    line-height: 5%;
  }

  .edit-model-btn-disable {
    cursor: not-allowed;
  }

  .object-box {
    width: 100%;
    height: 86%;

    label {
      color: #ffffff;
    }
  }

  .container-box {
    width: 100%;
    height: 100%;
  }

  :deep(.object-box .custom-item) {
    height: 10%;
    margin-top: 2%;
  }

  .Mask {
    width: 100%;
    height: 80%;
    position: absolute;
    top: 10%;
    left: 0%;
    display: block;
  }

  .name-input {
    height: 90%;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    border: none;
    color: #ddd;
    padding: 5px;
    outline: none;
  }

  .xyz-input {
    height: 90%;
    width: 30%;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    border: none;
    color: #ddd;
    padding: 5px;
    outline: none;
  }

  .y-margin {
    margin-left: 5%;
    margin-right: 5%;
  }

  .upload-box {
    height: 100%;
    width: 20%;
  }
</style>
