<!-- 
  监控站管理

  目录位置：三维地图管理 -> 监控站管理
  功能概述：场景管理，上帝视角，控制飞入，视角
 -->
<template>
  <div class="mainContainer">
    <a-row>
      <a-col :span="24" class="container1">
        <span class="textdisplay">场景管理</span>
        <!-- <a-input class="inputText" v-model:value="filter"></a-input>

        <a-button type="primary" class="buttonQuery" @click="getDataSource">查询</a-button> -->
        <a-button type="primary" class="addProject" @click="addScene">新增场景</a-button>
      </a-col>
      <hr class="hrDivider" />
      <a-col :span="24" style="display: flex">
        <div class="tree-container">
          <a-tree :tree-data="treeData" :defaultExpandAll="true" v-model:selectedKeys="selectedKeys" @select="showDataSourceFilter"></a-tree>
        </div>
        <div class="table-container">
          <a-tabs v-model:activeKey="activeKey">
            <!-- <a-tab-pane key="1" tab="详细信息">

              <scene-info ref="sceneInfo" :parentCodeArr="parentCodeArr" :nextNodeIndex="nextNodeIndex"
                :parentNodeCode="parentNodeCode" :subObject="subObject" @updateDataSource="getDataSource"
                :disable="sceneInfoDisable">
                <template #header>
                  <div class="scene-info-do">
                    <div v-if="sceneInfoDisable">
                      <a-tooltip placement="top">
                        <template slot="title">
                          <span>编辑</span>
                        </template>
                        <img :src="edit" class="actionImg" @click="sceneInfoDisableChange" />
                      </a-tooltip>
                    </div>
                    <div v-else>
                      <a-tooltip placement="top">
                        <template slot="title">
                          <span>确定</span>
                        </template>
                        <a>
                          <CheckOutlined class="scene-info-icon" @click="updateSubObj"></CheckOutlined>
                        </a>
                      </a-tooltip>

                      <a-tooltip placement="top">
                        <template slot="title">
                          <span>取消编辑</span>
                        </template>
                        <a>
                          <CloseOutlined class="scene-info-icon" @click="revserObj" />
                        </a>
                      </a-tooltip>
                    </div>
                    <div>
                      <a-tooltip placement="top">
                        <template slot="title">
                          <span>删除</span>
                        </template>
                        <img :src="deleteIcon" class="actionImg" @click="doSomething(record, 'delete')" />
                      </a-tooltip>
                    </div>

                  </div>
                </template>
              </scene-info>
            </a-tab-pane> -->
            <a-tab-pane key="1" tab="子节点信息" :force-render="true">
              <a-table :columns="columns" :dataSource="dataSource" :pagination="{ defaultPageSize: 5 }" rowKey="sceneCode">
                <template #action="{ text, record }">
                  <div class="action-div">
                    <a-tooltip placement="top">
                      <template slot="title">
                        <span>编辑</span>
                      </template>
                      <img :src="edit" class="actionImg" @click="doSomething(record, 'edit')" />
                    </a-tooltip>
                    <a-tooltip placement="top">
                      <template slot="title">
                        <span>删除</span>
                      </template>
                      <img :src="deleteIcon" class="actionImg" @click="showDeleteConfirm(record, 'delete')" />
                    </a-tooltip>
                  </div>
                </template>
                <template #xyz="{ text, record }">
                  <a-row>
                    <a-col :span="24" class="xyzContainer">
                      <span>中心经度：</span>
                      <a-tag color="#2db7f5">
                        {{ Number.parseFloat(record.xyz[0] == undefined ? 0 : record.xyz[0]).toFixed(6) }}
                      </a-tag>
                    </a-col>
                    <a-col :span="24" class="xyzContainer">
                      <span>中心纬度：</span>
                      <a-tag color="#87d068">
                        {{ Number.parseFloat(record.xyz[1] == undefined ? 0 : record.xyz[1]).toFixed(6) }}
                      </a-tag>
                    </a-col>
                    <a-col :span="24" class="xyzContainer">
                      <span>中心高度：</span>
                      <a-tag color="#108ee9">
                        {{ Number.parseFloat(record.xyz[2] == undefined ? 0 : record.xyz[2]).toFixed(6) }}
                      </a-tag>
                    </a-col>
                  </a-row>
                </template>
                <template #rxyz="{ text, record }">
                  <a-row>
                    <a-col :span="24" class="xyzContainer">
                      <span>相机偏航角：</span>
                      <a-tag color="#2db7f5">
                        {{ Number.parseFloat(record.rxyz[0] == undefined ? 0 : record.rxyz[0]).toFixed(6) }}
                      </a-tag>
                    </a-col>
                    <a-col :span="24" class="xyzContainer">
                      <span>相机俯仰角：</span>
                      <a-tag color="#87d068">
                        {{ Number.parseFloat(record.rxyz[1] == undefined ? 0 : record.rxyz[1]).toFixed(6) }}
                      </a-tag>
                    </a-col>
                    <a-col :span="24" class="xyzContainer">
                      <span>相机翻转角：</span>
                      <a-tag color="#108ee9">
                        {{ Number.parseFloat(record.rxyz[2] == undefined ? 0 : record.rxyz[2]).toFixed(6) }}
                      </a-tag>
                    </a-col>
                  </a-row>
                </template>
                <template #cxyz="{ text, record }">
                  <a-row>
                    <a-col :span="24" class="xyzContainer">
                      <span>相机经度：</span>
                      <a-tag color="#2db7f5">
                        {{ Number.parseFloat(record.cxyz[0] == undefined ? 0 : record.cxyz[0]).toFixed(6) }}
                      </a-tag>
                    </a-col>
                    <a-col :span="24" class="xyzContainer">
                      <span>相机纬度：</span>
                      <a-tag color="#87d068">
                        {{ Number.parseFloat(record.cxyz[1] == undefined ? 0 : record.cxyz[1]).toFixed(6) }}
                      </a-tag>
                    </a-col>
                    <a-col :span="24" class="xyzContainer">
                      <span>相机高度：</span>
                      <a-tag color="#108ee9">
                        {{ Number.parseFloat(record.cxyz[2] == undefined ? 0 : record.cxyz[2]).toFixed(4) }}
                      </a-tag>
                    </a-col>
                  </a-row>
                </template>
              </a-table>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-col>
    </a-row>
    <Model
      :visible="visible"
      :parentCodeArr="parentCodeArr"
      :title="title"
      :editInfo="doItem"
      :nextNodeIndex="nextNodeIndex"
      :parentNodeCode="selectedKeys[0]"
      @closeWin="closeWin"
      @updateDataSource="getDataSource"
    >
    </Model>
  </div>
</template>
<script setup>
  import { ref, onMounted, watch, createVNode } from 'vue';
  import { message, Modal } from 'ant-design-vue';
  import { defHttp } from '@/utils/http/axios';
  import Model from './model/Modal.vue';
  import SceneInfo from './model/sceneInfo/SenceInfo.vue';
  import deleteIcon from '@/assets/images/delete.png';
  import edit from '@/assets/images/edit.png';
  import { CheckOutlined, CloseOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
  // import earthUtils from '@/utils/earthMap/earth';
  // api接口
  const querySceneList = (params) => {
    return defHttp.get({ url: '/military/msMapScene/list', params }, { isTransformResponse: false });
  };
  const deleteScene = (params) => {
    return defHttp.delete({ url: '/military/msMapScene/deleteBySceneCode', params }, { isTransformResponse: false });
  };

  const showDeleteConfirm = (record, doType) => {
    Modal.confirm({
      title: '删除',
      icon: createVNode(ExclamationCircleOutlined),
      content: '这将会删除此节点与它的子节点，你是否确认进行此操作？',
      okText: '确认',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        doSomething(record, doType);
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };

  // 查询条件
  const filter = ref('');
  // 表格列
  const columns = [
    // {
    //   title: '场景编号',
    //   dataIndex: 'sceneCode',
    //   key: 'sceneCode',
    //   align: 'center',
    //   width: '6%',
    // },
    // {
    //   title: '父场景编号',
    //   dataIndex: 'parentSceneCode',
    //   key: 'parentSceneCode',
    //   align: 'center',
    //   width: '6%',
    // },
    {
      title: '场景名称',
      dataIndex: 'sceneName',
      key: 'sceneName',
      width: '10%',
      align: 'center',
      // filters: filtersArr,
    },
    {
      title: '视距',
      dataIndex: 'distance',
      key: 'distance',
      align: 'center',
      width: '10%',
    },
    {
      title: '飞入时间',
      dataIndex: 'flyTime',
      key: 'flyTime',
      align: 'center',
      width: '6%',
    },
    {
      title: '中心坐标',
      dataIndex: 'xyz',
      key: 'xyz',
      slots: { customRender: 'xyz' },
      align: 'center',
      width: '14%',
    },
    {
      title: '相机坐标',
      dataIndex: 'cxyz',
      key: 'cxyz',
      slots: { customRender: 'cxyz' },
      align: 'center',
      width: '14%',
    },
    {
      title: '相机角度',
      dataIndex: 'rxyz',
      key: 'rxyz',
      slots: { customRender: 'rxyz' },
      align: 'center',
      width: '14%',
    },
    {
      title: '操作',
      key: 'action',
      slots: { customRender: 'action' },
      align: 'center',
      width: '6%',
    },
  ];
  // 选中节点
  const selectedKeys = ref(['00001']);

  const parentCodeArr = ref([]);
  // 表格数据源
  const dataSource = ref([]);
  // 树形图数据源
  const treeData = ref([]);
  // 下一个节点的下标
  const nextNodeIndex = ref(1);
  // 选中节点编码
  const selectNodeCode = ref('00001');
  // 原始数据根据父场景编码划分
  const dataByParentCode = new Map();
  // 原始数据更具编码划分
  const dataByCode = new Map();
  // 显示在表格中的数据
  let allData = [];
  // 根节点
  const rootNodes = ref([]);
  // 当前选中节点
  let currentSelectNode = null;
  // 传入弹窗数据
  const subObject = ref({
    sceneCode: '',
    sceneName: '',
    parentSceneCode: '',
    sceneType: 1,
    viewDistance: 0,
    duration: 0,
    lon: 0,
    lat: 0,
    altitude: 0,
    rotationX: 0,
    rotationY: 0,
    rotationZ: 0,
  });
  // 页签编码
  const activeKey = ref('1');
  // 场景信息只读
  const sceneInfoDisable = ref(true);
  const sceneInfoDisableChange = () => {
    sceneInfoDisable.value = false;
  };
  // 场景信息ref
  // const sceneInfo = ref(null);
  // 更新传入的SubObj
  const updateSubObj = function () {
    sceneInfo.value.handleOk().then(() => {
      closeChange();
      getUpdateMySelf();
    });
  };
  // 变为只读
  const closeChange = function () {
    sceneInfoDisable.value = true;
  };
  // 还原取消编辑的subObj
  const revserObj = function () {
    subObject.value = { ...dataByCode.get(selectNodeCode.value) };
    closeChange();
  };
  // 获取数据和更新页面数据 isUpdateTree=true为更新选中节点下的子节点
  const getDataSource = function (isUpdateTree = false) {
    const params = { pageIndex: 1, pageSize: 9999 };
    // 添加查询条件 父场景编码=选中编码
    if (filter.value && filter.value.length > 0) {
      params.parentSceneCode = filter.value;
    }
    // 查询返回数据
    return querySceneList(params).then((res) => {
      if (res.code == 200) {
        allData = [];
        const records = res.result.records;
        // 全量更新清理数据
        if (!isUpdateTree) {
          dataByCode.clear();
          dataByParentCode.clear();
          rootNodes.value = [];
        } else {
          // 当前选中节点不为空，并且拥有下级节点时候，初始化下级节点
          if (currentSelectNode && dataByParentCode.has(currentSelectNode.key)) {
            dataByParentCode.set(currentSelectNode.key, []);
          } else {
            dataByParentCode.set('', []);
          }
        }
        let addRootNode = null;
        records.forEach((item) => {
          const sceneCode = item.sceneCode;
          // sceneCodes.push(sceneCode);
          const sceneName = item.sceneName;
          const sceneType = item.sceneType;
          const parentSceneCode = item.parentSceneCode;
          parentCodeArr.value.push(sceneCode);
          const cxyz = [item.cameraLon, item.cameraLat, item.cameraAltitude];
          const xyz = [item.lon, item.lat, item.altitude];
          const rxyz = [item.rotationX, item.rotationY, item.rotationZ];
          const distance = item.viewDistance;
          const flyTime = item.duration;
          const id = item.id;
          const icon = item.icon;

          // 创建对象
          const obj = {
            sceneCode,
            parentSceneCode,
            sceneType,
            sceneName,
            cxyz,
            xyz,
            rxyz,
            distance,
            flyTime,
            id,
            icon,
          };
          if (selectedKeys.value[0] == '00001') {
            if (parentSceneCode == '00001') {
              allData.push(obj);
            }
          } else {
            // 在表格中排除根节点
            if (sceneCode != '00001') {
              allData.push(obj);
            }
          }
          // dataByCode.set(sceneCode, subObject);
          if (!isUpdateTree) {
            // 全量加载的所有根节点
            if (sceneCode.indexOf('-') == -1) {
              rootNodes.value.push({
                key: sceneCode,
                title: sceneName,
                children: [],
              });
            }
          } else {
            // 增量新增的根节点
            if (sceneCode.indexOf('-') == -1) {
              addRootNode = {
                key: sceneCode,
                title: sceneName,
                children: [],
              };
            }
          }
          // 向dataByParentCode中放入数据
          if (dataByParentCode.has(parentSceneCode)) {
            dataByParentCode.get(parentSceneCode).push(obj);
          } else {
            const datas = [obj];
            dataByParentCode.set(parentSceneCode, datas);
          }
        });
        if (!isUpdateTree) {
          // 全量创建树
          if (rootNodes.value.length > 0) {
            // 创建树
            createTreeData(rootNodes.value);
            // 排序根节点找出下一个根节点的下标
            rootNodes.value.sort((a, b) => {
              return Number(a.key) - Number(b.key);
            });
            getRootMaxIndex();
            // 更新树数据
            treeData.value = rootNodes.value;
          }
        } else {
          // 选中节点后新增
          if (currentSelectNode) {
            // 更新选中节点的子节点
            updateTreeData(currentSelectNode);
            // 设置树更新
            treeData.value = [...treeData.value];
            //获取当前节点数据
          } else {
            // 新增根节点
            treeData.value = [...treeData.value, addRootNode];
          }
        }

        // 设置表格更新
        dataSource.value = allData;
      } else {
        message.error('无法获取到场景信息');
      }
    });
  };

  // 更新选中节点本身
  const getUpdateMySelf = function () {
    const params = { pageIndex: 1, pageSize: 9999 };
    if (filter.value && filter.value.length > 0) {
      // 新增查询条件
      params.sceneCode = filter.value;
    }
    querySceneList(params).then((res) => {
      if (res.code == 200) {
        const records = res.result.records;
        const record = records[0];
        if (record) {
          // 成功请求时，修改该节点标题
          currentSelectNode.title = record.sceneName;
          // 更新原始数据
          dataByCode.set(record.sceneCode, record);
          // 更新树
          treeData.value = [...treeData.value];
        }
      }
    });
  };
  // 计算下一个新增的根节点的下标
  const getRootMaxIndex = function () {
    nextNodeIndex.value = Number(rootNodes.value[rootNodes.value.length - 1].key) + 1;
  };
  // 创建树
  const createTreeData = function (parentNodes) {
    const pNodes = [];
    parentNodes.forEach((pNode) => {
      const childDatas = dataByParentCode.get(pNode.key);
      if (childDatas != null) {
        for (const childData of childDatas) {
          const childNode = {
            key: childData.sceneCode,
            title: childData.sceneName,
            children: [],
          };
          pNode.children.push(childNode);
          pNodes.push(childNode);
        }
      }
    });
    // 当前父节点集合的子节点集合大于0的时候在递归
    if (pNodes.length > 0) {
      createTreeData(pNodes);
    }
  };
  // 更新选中节点的子节点
  const updateTreeData = function (parentNodes) {
    // 选中节点的子节点
    const childNodes = parentNodes.children;
    // 选中节点的子节点原始数据
    const childDatas = dataByParentCode.get(parentNodes.key);
    if (childDatas && childNodes) {
      //当原始数据大于等于节点数时，走更新和新增逻辑
      if (childDatas.length >= childNodes.length) {
        for (const childData of childDatas) {
          const found = childNodes.find((element) => element.key == childData.sceneCode);
          // 更新节点
          if (found) {
            found.title = childData.sceneName;
          } else {
            const childNode = {
              key: childData.sceneCode,
              title: childData.sceneName,
              children: [],
            };
            // 新增子节点
            parentNodes.children.push(childNode);
          }
        }
      } else {
        // 当原始数据小于节点数时，走删除逻辑
        // index要删除的下标
        let index = 0;
        for (const childNode of childNodes) {
          const findIndex = childDatas.findIndex((element) => element.sceneCode == childNode.key);
          index++;
          if (findIndex > -1) {
            continue;
          } else {
            break;
          }
        }
        //删除
        childNodes.splice(index - 1, 1);
      }
    }
  };
  onMounted(() => {
    // 挂载后全量请求数据
    getDataSource().then(() => {
      if (treeData.value.length > 0) {
        currentSelectNode = treeData.value[0];
      }
    });
  });
  // 对话框显隐
  const visible = ref(false);
  // 对话框标题
  const title = ref('新增站点');
  //新增场景
  const addScene = function () {
    //只有在树节点的数量大于0，并且没有选中节点的情况下提示用户
    // console.log(treeData.value, selectedKeys.value);
    if (treeData.value.length > 0 && selectedKeys.value.length == 0) {
      message.warn('请先选中场景，再进行新增！');
      return;
    }
    title.value = '新增站点';
    // 新增前准备
    beforeDo();
    // 打开对话框
    visible.value = true;
  };
  // 关闭对话框
  const closeWin = function () {
    visible.value = false;
    doItem.value = null;
  };
  // 操作数据
  const doItem = ref({});
  const doSomething = function (item, doType) {
    if (treeData.value.length > 0 && !selectedKeys.value) {
      message.warn('请先选中场景，再进行修改！');
      return;
    }
    if (doType === 'edit') {
      doItem.value = item;
      // console.log("doItem",item);
      visible.value = true;
    } else if (doType === 'delete') {
      const formData = new FormData();
      formData.append('sceneCode', item.sceneCode + '*');
      deleteScene(formData).then((res) => {
        if (res.code == 200) {
          message.info('删除成功');
          getDataSource(true);
        }
      });
    } else if (doType === 'change') {
    }
  };
  // 选中节点后，显示子节点
  const showDataSourceFilter = function (selectedKeys, { selected, selectedNodes, node, event }) {
    // 选中节点
    if (selectedKeys.length > 0) {
      // 记录当前节点
      currentSelectNode = node.dataRef;
      // 记录选中编码
      selectNodeCode.value = selectedKeys[0];
      // 过滤条件设置
      filter.value = selectNodeCode.value;
      // 更新选中节点的子节点
      getDataSource(true);
      // 更新下标
      beforeDo();
      // 设置传入数据
      subObject.value = { ...dataByCode.get(selectNodeCode.value) };
      // dataSource.value = dataByParentCode.get(selectNodeCode.value);
    } else {
      // 记录当前节点
      currentSelectNode = treeData.value[0];
      // 树节点大于0，却没有选中节点的情况下查询根节点下的子节点
      // if (treeData.value.length > 0) {

      //   selectNodeCode.value = "00001";
      //   filter.value = "00001*";
      // } else {
      //   // 查询所有
      //   selectNodeCode.value = "";
      //   filter.value = "";
      // }
      selectNodeCode.value = '';
      filter.value = '';
      // 执行数据源的更新
      getDataSource();
    }
  };
  // 新增前的准备
  const beforeDo = function () {
    // 获取当前选中子节点的集合
    const childDatas = dataByParentCode.get(selectNodeCode.value);
    if (childDatas && childDatas.length >= 0) {
      const datas = [...childDatas];
      if (datas.length > 0) {
        // 排序
        datas.sort((a, b) => {
          const pathA = a.sceneCode.split('-');
          const aIndex = pathA[pathA.length - 1];
          const pathB = b.sceneCode.split('-');
          const bIndex = pathB[pathB.length - 1];
          return Number(bIndex) - Number(aIndex);
        });
        const maxPath = datas[0].sceneCode.split('-');
        // 更新下个新增子节点的作弊
        nextNodeIndex.value = Number(maxPath[maxPath.length - 1]) + 1;
      } else {
        nextNodeIndex.value = 1;
      }
    } else {
      // 没有子节点则下个坐标为1
      nextNodeIndex.value = 1;
    }
  };
</script>
<style scoped>
  .mainContainer {
    max-height: 800px;
    background-color: #fff;
    padding: 8px;
  }

  .container1 {
    position: relative;
    padding-top: 12px;
    padding-bottom: 12px;
    display: flex;
    align-items: center;
  }

  .textdisplay {
    color: #000;
    font-size: 0.8rem;
    font-weight: bold;
  }

  .inputText {
    width: 20%;
    margin-left: 5%;
  }

  .buttonQuery {
    margin-left: 1%;
  }

  .addProject {
    position: absolute;
    right: 0;
  }

  .hrDivider {
    border: 0.1rem #1aa391 solid;
  }

  .actionImg {
    width: 24px;
    height: 24px;
    cursor: pointer;
  }

  .xyzContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4px;
  }

  .xyzContainer > span:nth-child(2) {
    width: 80px;
    height: 22px;
  }

  .action-div {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    justify-content: space-around;
  }

  .tree-container {
    width: 15%;
    overflow: auto;
    max-height: 730px;
    margin-top: 13px;
  }

  .table-container {
    width: 85%;
  }

  .scene-info-do {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .scene-info-icon {
    font-size: 24px;
  }
</style>
