<script setup lang="ts">
import { getCurrentInstance } from 'vue';
import { getModelList, getModelTypeList, addOtherSource } from '@/views/largeScreen/components/api';
import { useTreeNode } from '../treeNode';
const isShowPup = ref(false);
const categories = ref<any[]>([]);
const loading = ref(false);
const { cusAddNodes } = useTreeNode();
//-----------类型树-----------

interface TypeNode {
  id: string;
  label: string;
  parentId: string | null;
  children?: TypeNode[];
}
let typeArr = {
  point: '点',
  line: '线',
  area: '面'
};
const currentTypeId = ref<string>('');
const typeTreeData = ref<TypeNode[]>([]);

let activeIndex: any = ref(null);
// 获取组件实例
const instance = getCurrentInstance();
instance.proxy['$recvChanel']('open-model', () => {
  console.log('open-model');
  isShowPup.value = true;
  typeList();
});
const typeList = async () => {
  const res: any = await getModelTypeList();
  if (res.code == 0 || res.code == 200) {
    console.log('typeList', res);
    let data = transformNestedJson(res.data, 'name', 'label');
    typeTreeData.value = data;
  }
};
const transformNestedJson = (data, oldKey, newKey) => {
  if (Array.isArray(data)) {
    return data.map((item) => transformNestedJson(item, oldKey, newKey));
  } else if (data && typeof data === 'object') {
    const newObj = {};
    for (const key in data) {
      // 替换键名
      const currentKey = key === oldKey ? newKey : key;
      // 递归处理子元素
      newObj[currentKey] = transformNestedJson(data[key], oldKey, newKey);
    }
    return newObj;
  }
  return data;
};
const handleTypeClick = (row: TypeNode) => {
  getModelListByType(row.id);
  currentTypeId.value = row['$treeNodeId'];
};
const getModelListByType = (id) => {
  let formData = new FormData();
  formData.append('modelTypeId', id);
  console.log('formData', formData.get('modelTypeId'));
  getModelList(formData).then((res) => {
    categories.value = res.data;
  });
};
const filterNode: any = (value, data) => {
  if (!value) return true;
  return data.label.includes(value);
};
const modelClick = (index, row) => {
  activeIndex.value = index;
  console.log('modelClick', row);

  // 轨迹运动选择模型
  // if (selectCallback && typeof selectCallback === 'function' && addType.value === 'trajectoryMotion') {
  //   selectCallback('http://127.0.0.1:8848' + row.data);
  //   close();
  //   return;
  // }

  // if (!isSetting) {
  //   ElMessage.warning('请先设置模型默认参数');
  //   return;
  // }

  isShowPup.value = false;
  let id = new window['YJ'].Tools().randomString();
  new window['YJ'].Obj.BatchModel(window['Earth1'], { id, type: typeArr['point'] }, function (data) {
    console.log(data);
    renderModel(data, row);
  });
  const renderModel = async (option, model) => {
    let selectedNode = window['treeObj'].getSelectedNodes()[0];
    // 存在坐标
    if (option.positions.length > 0) {
      let id = new window['YJ'].Tools().randomString();
      let params = {
        id: id,
        position: option.positions[0],
        name: model.modelName,
        show: true,
        scale: { x: 1, y: 1, z: 1 },
        url: getURL(model.modelDataUrl),
        maximumScale: 1,
        rotate: {
          x: 0,
          y: 0,
          z: 0
        }
      };
      await new window['YJ'].Obj.Model(window['Earth1'], params);
      let DbOption: any = {
        params,
        id,
        sourceName: model.modelName,
        sourceType: 'model',
        parentId: selectedNode ? (selectedNode.sourceType == 'directory' ? selectedNode.id : selectedNode.parentId) : undefined
      };

      addOtherSource(DbOption);
      DbOption.params = JSON.stringify(DbOption.params);
      DbOption.isShow = true;
      cusAddNodes(window['treeObj'], DbOption.parentId, [DbOption]);
    }
  };
};
const getURL = (url) => {
  // 'http://192.168.110.2:3456';
  return import.meta.env.VITE_APP_MAP_API + url;
};
</script>

<template>
  <div class="set_pup">
    <el-dialog :close-on-click-modal="false" v-model="isShowPup" :modal="false" draggable>
      <template #header>
        <div class="set_pup_header">
          <div class="system_title">模型选择</div>
        </div>
      </template>
      <div class="set_detail">
        <!--        搜索和参数设置-->
        <!--        <div class="top">
          <el-input v-model="modelName" class="w-50 m-2" placeholder="请输入模型名称进行搜索" :suffix-icon="Search" />
          <button @click="setting" class="btn">
            <svg-icon name="sys_set" class="setIcon" :size="12" color="rgba(255,255,255, 1)" style="margin-right: 5px"></svg-icon>默认模型参数设置
          </button>
        </div>-->
        <div class="content">
          <!-- 左侧Tab导航 -->
          <div class="treeCon">
            <el-tree
              style="max-width: 600px"
              :data="typeTreeData"
              ref="treeRef"
              node-key="id"
              @node-click="handleTypeClick"
              :filter-node-method="filterNode"
            >
              <template #default="{ node, data }">
                <!-- <span> {{ node.label }}</span> -->
                 <!-- @click.stop="toggleExpand(node)" @click.stop="toggleExpand(node)" -->
                <span
                  :class="{
                    'primary-type': !(node.childNodes.length != 0),
                    'selected-text': node.id === currentTypeId
                  }"
                  
                  class="allowDrag"
                >
                  <svg-icon
                    :name="node.expanded ? 'arrow' : 'more'"
                    :size="12"
                    color="rgba(0, 255, 255, 1)"
                    style="margin-right: 5px; margin-left: 5px"
                    v-if="node.childNodes.length != 0"
                    
                  ></svg-icon>
                  {{ node.label }}</span
                >
              </template>
            </el-tree>
          </div>

          <div class="model-gallery" ref="galleryRef">
            <div class="model-section">
              <!-- <h2 class="section-title">{{ categories[Number(currentTypeId)].name }}</h2> -->
              <div class="model-grid">
                <div v-for="(model, mIndex) in categories" :key="mIndex" class="model-item" @click="modelClick(mIndex, model)">
                  <div class="imgbg">
                    <el-image :src="getURL(model.posterDataUrl)" fit="cover" class="thumbnail">
                      <!--                      <template #error>-->
                      <!--                        <div class="image-error">加载失败</div>-->
                      <!--                      </template>-->
                    </el-image>
                  </div>

                  <div class="model-name" :class="{ isactive: activeIndex == mIndex }">
                    {{ model.modelName }}
                  </div>
                </div>
              </div>
            </div>
            <div v-show="loading" class="loading-more">加载中...</div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
:root {
  --color-sdk-base-rgb: 0, 255, 255;
  --color-sdk-auxiliary: 0, 66, 66;
  --color-sdk-auxiliary-public: #ffffff;
  --color-sdk-warning-0: #1bf8c3;
  --color-sdk-warning-1: #f16c55;
  --color-sdk-warning-2: #ffa145;
  --color-sdk-warning-3: #ffdf53;
  --color-sdk-text-head: #ffffff;
  --color-sdk-text-head-1: #e6f7ff;
  --color-sdk-text-head-2: #adf1ff;
  --color-sdk-gradual: rgb(0, 255, 255) 6.25%, rgb(0, 200, 255) 100%;
  --color-sdk-bg-gradual: #00ffff33 0%, #00ffff00 100%;
  --color-sdk-text-shadow: rgba(20, 118, 255, 1);
}
.set_pup {
  position: fixed;
  width: 40vw;
  height: 50vh;
  :deep(.el-dialog) {
    background: linear-gradient(180deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 255, 255, 0) 100%), rgba(0, 0, 0, 0.6);
    border: 1px solid #00c9ff;
    padding-left: 0 !important;
  }
  :deep(.el-dialog__body) {
    padding: 0 !important;
  }
  :deep(.el-dialog__headerbtn) {
    height: 30px;
    width: 30px;
    border-bottom-left-radius: 80%;
    background-color: #008989;
    &:hover {
      background-color: #00ffff;
      .el-dialog__close {
        color: rgba(0, 66, 66, 1); // 悬停时改变关闭图标为红色
      }
    }
  }
  :deep(.el-dialog__headerbtn .el-dialog__close) {
    color: #fff;
  }
  .set_pup_header {
    width: 100%;
    height: 100%;
    // background-color: #00ffff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;
    .system_title {
      background: url('@/assets/images/map/titlebg.png') no-repeat;
      background-size: 100% 100%;
      width: 229px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      font-family: 'alimamashuheiti';
      font-size: 18px;
      color: #fff;
      font-weight: 700;
    }
  }
  .set_detail {
    box-sizing: border-box;
    // height: 50vh;
    :deep(
        .el-tabs--left .el-tabs__active-bar.is-left,
        .el-tabs--left .el-tabs__active-bar.is-right,
        .el-tabs--right .el-tabs__active-bar.is-left,
        .el-tabs--right .el-tabs__active-bar.is-right
      ) {
      width: 3px;
      background: rgba(0, 255, 255, 1);
      height: 40px !important;
    }

    :deep(
        .el-tabs--left .el-tabs__nav-wrap.is-left::after,
        .el-tabs--left .el-tabs__nav-wrap.is-right::after,
        .el-tabs--right .el-tabs__nav-wrap.is-left::after,
        .el-tabs--right .el-tabs__nav-wrap.is-right::after
      ) {
      width: 3px;
    }

    :deep(.el-tabs__nav-wrap::after) {
      background: rgba(204, 204, 204, 0.5);
      border-radius: 4px;
    }

    // .switchmy {
    //   display: flex;
    //   flex-wrap: wrap;
    //   margin-top: 15px;

    //   .center {
    //     width: 33%;
    //     margin-bottom: 15px;
    //   }
    // }
    :deep(.el-tabs__content) {
      height: 50vh;
      width: 80%;
      padding: 0 10px;
      overflow: hidden;
      overflow-y: scroll;
      color: #fff;
    }

    // 美化滚动条
    :deep(.el-tabs__content::-webkit-scrollbar) {
      width: 5px;
      height: 5px;
    }
    :deep(.el-tabs__content::-webkit-scrollbar-thumb) {
      background-color: #0ff;
      border-radius: 5px;
    }
    :deep(.el-tabs__content::-webkit-scrollbar-track) {
      background-color: rgba(0, 255, 255, 0.2);
    }
    :deep(.el-tabs__item) {
      width: 8vw;
      color: #fff !important;
      font-size: 1.1rem;
      font-family: 黑体;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 3px;
      box-sizing: border-box;
    }
    :deep(.el-tabs__item:hover) {
      background: linear-gradient(90deg, rgba(0, 255, 255, 0) 0%, rgba(0, 255, 255, 0.5) 48.91%, rgba(0, 255, 255, 0) 100%);
      border: 1px solid;
      box-sizing: border-box;
      border-image: linear-gradient(90deg, rgba(0, 255, 255, 0) 0%, rgba(0, 255, 255, 1) 55.55%, rgba(0, 255, 255, 0) 100%) 1;
    }
    :deep(.el-tabs__item.is-active) {
      background: linear-gradient(90deg, rgba(0, 255, 255, 0) 0%, rgba(0, 255, 255, 0.5) 48.91%, rgba(0, 255, 255, 0) 100%) !important;
      border: 0.1px solid;
      // box-sizing: border-box;
      border-image: linear-gradient(90deg, rgba(0, 255, 255, 0) 0%, rgba(0, 255, 255, 1) 55.55%, rgba(0, 255, 255, 0) 100%) 1 !important;
    }
    :deep(.el-tabs__header) {
      height: 50vh !important;
      width: 8vw;
      overflow-y: auto;
      overflow-x: hidden;
    }
    :deep(.el-tabs__nav-next, .el-tabs__nav-prev) {
      color: #fff;
    }
  }
  .el-input {
    width: 300px;
    margin-left: 30px;

    --el-input-placeholder-color: rgba(173, 241, 255, 1) !important;
    --el-input-placeholder-font-size: 14px;
    --el-input-text-color: #fff;
    --el-input-border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
    --el-input-hover-border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
    --el-input-focus-border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
  }
  ::v-deep .el-input__wrapper {
    background-color: rgba(0, 0, 0, 0.5) !important;
  }
  .btn {
    float: right;
    height: 32px;
    line-height: 32px;
    background: rgba(var(--color-sdk-base-rgb), 0.2) !important;
    border: 1px solid rgba(var(--color-sdk-base-rgb), 0.5) !important;
    border-radius: 4px;
    color: #fff !important;
    padding: 0 15px;
  }
  .btn:hover {
    color: rgba(var(--color-sdk-base-rgb), 1) !important;
    border: 1px solid rgba(var(--color-sdk-base-rgb), 1) !important;
    .setIcon {
      color: rgba(var(--color-sdk-base-rgb), 1) !important;
    }
  }

  .content {
    margin-top: 20px;
    height: 400px;
  }
}
.model-container {
  display: flex;
  height: 100vh;
}
.model-tabs {
  width: 130px;
  height: 100%;
  float: left;
}
.treeCon {
  width: 140px;
  height: 100%;
  float: left;
  border-right: 1px solid rgba(204, 204, 204, 0.2);
}
.model-gallery {
  flex: 1;
  /* padding: 20px; */
  overflow-y: auto;
  height: 100%;
  width: calc(100% - 160px);
  float: left;
  margin-left: 10px;
}
.model-section {
  min-height: 10vh;
  margin-bottom: 40px;
}
.model-grid {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-around; */
  //justify-content: space-between;
  gap: 10px;
}
.model-name {
  width: 100%;
  //height: 30px;
  //line-height: 30px;
  text-align: center;
  word-break: break-all;
  /* overflow-wrap: break-word; */
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
}
.isactive {
  color: rgba(var(--color-sdk-base-rgb), 1) !important;
}
.model-item {
  border-radius: 8px;
  overflow: hidden;
  width: 18%;
  /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); */
}
.model-item:hover {
  cursor: pointer !important;
  color: rgba(var(--color-sdk-base-rgb), 1) !important;
  .model-name {
    color: rgba(var(--color-sdk-base-rgb), 1) !important;
  }
}

.imgbg {
  //width: 70px;
  //height: 70px;
  width: 100%;
  margin: 0 auto;
  background: url('@/assets/images/map/model-bg.png') no-repeat;
  background-size: 100% 100%;
}
.thumbnail {
  width: 100%;
  //width: 66px;
  //height: 66px;
  //margin-left: 2px;
  //margin-top: 2px;
}
.loading-more {
  text-align: center;
  padding: 20px;
}

::v-deep .el-tabs__content {
  display: none !important;
}
/* 修改滚动条轨道的颜色 */
::v-deep ::-webkit-scrollbar-track {
  background: rgba(var(--color-sdk-base-rgb), 0.1) !important;
}
/* 修改滚动条滑块的样式 */
::v-deep ::-webkit-scrollbar-thumb {
  background: rgba(var(--color-sdk-base-rgb), 1) !important;
  border-radius: 10px;
}

/* 当滑块被激活（用户点击或拖动时） */
::v-deep ::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--color-sdk-base-rgb), 1) !important;
}
</style>
<style>
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
/* 定义背景颜色和圆角 */
::-webkit-scrollbar-thumb {
  border-radius: 1em;
  background-color: rgba(50, 50, 50, 0.3);
}
/* //定义滚动条轨道 内阴影+圆角 */
::-webkit-scrollbar-track {
  border-radius: 1em;
  background-color: rgba(50, 50, 50, 0.1);
}

/* tree */
.el-tree-node__content > .el-tree-node__expand-icon {
  display: none !important;
}
.el-tree {
  background: transparent !important;
  --el-tree-node-hover-bg-color: rgba(var(--color-sdk-base-rgb), 0.2) !important;
  color: rgba(255, 255, 255, 1) !important;
  /* font-size: 12px !important; */
  width: 130px;
  float: left;
  margin-left: 10px;
}
::v-deep .el-text {
  color: rgba(255, 255, 255, 1) !important;
  font-size: 12px !important;
}
.selected-text {
  color: rgba(var(--color-sdk-base-rgb), 1) !important; /* Element UI主色，可自定义 */
}
::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  border-right: 1px solid rgba(var(--color-sdk-base-rgb), 0.2) !important;
}
</style>
