<template>
  <div class="left_second" id="secondMenu" style="color: #fff" ref="secondMenu">
    <!--二级菜单背景图-->
    <!-- <svg-icon :class-name="['left_second_menu_bg']" icon-class="secondMenuBg"></svg-icon> -->
    <!--菜单列表-->
    <div class="menus_box">
      <div v-for="item in currentItem" @click.right="item.rightfun(item)" @click="item.fun(item)" class="menus_item"
        @mouseover="mouseover(item)" @mouseleave="mouseout(item)">
        <div class="item_icon">
          <template v-if="item.hasOwnProperty('svg')">
            <svg-icon v-show="!item.isMoveIn" :class-name="['second_menu_icon']" :icon-class="item.svg"></svg-icon>
            <img style="width: 100%;height: 100%;" v-if="item.isMoveIn" :src="'/static/animation/' + item.svg + '.png'"
              alt="">
          </template>
          <template v-else>
            <img width="100%" height="100%" :src="item.poster_url" alt="" />
            <!--            <el-button icon="el-icon-document" style="width: 100%;height: 100%"></el-button>-->
            <!--            <i class="el-icon-document-add"></i>-->
            <!--            <i class="el-icon-document" style="width: 100%;height: 100%"></i>-->
          </template>
        </div>
        <template v-if="item.hasOwnProperty('svg')">
          <template v-if="item.hasOwnProperty('trueName') && item.status">
            <div :class="['item_text', !item.status ? '' : 'active']">
              {{ $t(`leftMenu.secondMenu.${item.trueName}`) }}
            </div>
          </template>
          <template v-else>
            <div :class="['item_text', !item.status ? '' : 'active']">
              {{ $t(`leftMenu.secondMenu.${item.name}`) }}
            </div>
          </template>
        </template>
        <template v-else>
          <div class="item_text">{{ item.model_name || item.ts_name }}</div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import secondMenuFun from "./secondMenuFun";
import { listSituation, modelList } from "../../api/gisAPI";
export default {
  name: "secondMenu",
  mixins: [secondMenuFun],
  data() {
    return {
      menuList: [
        // 菜单内容来源于文件
        {
          list: [],
          key: "situation",
        },
        // 模型库二级菜单
        {
          list: [],
          key: "model",
        },
        // 特效库二级菜单
        {
          list: [
            //轨迹运动
            {
              fun: this.toDo,
              name: "trajectoryMotion",
              svg: "trajectoryMotion",
              // 是否移入
              isMoveIn: false,

            },
            //电子围墙
            {
              fun: this.toDo,
              name: "electronicFence",
              svg: "electronicFence",
              // 是否移入
              isMoveIn: false,

            },
            //扩散光波
            {
              fun: this.toDo,
              name: "radarLightWave",
              svg: "radarLightWave",
              // 是否移入
              isMoveIn: false,

            },
            //雷达光波
            {
              fun: this.toDo,
              name: "diffusedLightWave",
              svg: "diffusedLightWave",
              // 是否移入
              isMoveIn: false,

            },
            //立体雷达
            {
              fun: this.toDo,
              name: "scanStereoscopic",
              svg: "scanStereoscopic",
              // 是否移入
              isMoveIn: false,

            },
            //多边体
            {
              fun: this.toDo,
              name: "multilateralBody",
              svg: "multilateralBody",
              // 是否移入
              isMoveIn: false,

            },
            //水面
            {
              fun: this.toDo,
              name: "waterSurface",
              svg: "waterSurface",
              // 是否移入
              isMoveIn: false,

            },
            //贴地文字
            // {
            //   fun: this.toDo,
            //   name: "groundText",
            //   svg: "groundText",
            // },
            // //立体文字
            // {
            //   fun: this.toDo,
            //   name: "standText",
            //   svg: "standText",
            // },
            /*
            {
              fun: this.toDo,
              name: 'cube',
              svg: "cube",
            },
            {
              fun: this.toDo,
              name: 'trajectoryMotion',
              svg: "trajectoryMotion",
            },

            */
            //绘制道路（无）
            // {
            //   fun: this.toDo,
            //   name: "roadDraw",
            //   svg: "roadDraw",
            // },
            //   //线路绘制（无）
            // {
            //   fun: this.toDo,
            //   name: "lineDraw",
            //   svg: "lineDraw",
            // },
            //喷泉
            {
              fun: this.toDo,
              name: "fountain",
              svg: "fountain",
              // 是否移入
              isMoveIn: false,

            },
            // // 水流
            {
              fun: this.toDo,
              name: "waterL",
              svg: "waterL",
              // 是否移入
              isMoveIn: false,

            },
            //火焰
            {
              fun: this.toDo,
              name: "fire",
              svg: "fire",
              // 是否移入
              isMoveIn: false,

            },
            //爆炸
            {
              fun: this.toDo,
              name: "explosion",
              svg: "explosion",
              // 是否移入
              isMoveIn: false,

            },
            //烟雾
            {
              fun: this.toDo,
              name: "smoke",
              svg: "smoke",
              // 是否移入
              isMoveIn: false,

            },
            //夜视
            {
              fun: this.toDo,
              name: "nightVision",
              svg: "nightVision",
              status: false,
              // 是否移入
              isMoveIn: false,

            },
            // 雨
            {
              fun: this.toDo,
              name: "rain",
              svg: "rain",
              status: false,
              // 是否移入
              isMoveIn: false,

            },
            // 雪
            {
              fun: this.toDo,
              name: "snow",
              svg: "snow",
              status: false,
              // 是否移入
              isMoveIn: false,

            },
            //雾
            {
              fun: this.toDo,
              name: "fog",
              svg: "fog",
              status: false,
              // 是否移入
              isMoveIn: false,

            },
            //光照
            {
              fun: this.toDo,
              name: "illumination",
              svg: "illumination",
              status: false,
              // 是否移入
              isMoveIn: false,

            },
            //星空
            {
              fun: this.toDo,
              name: "skystarry",
              svg: "skystarry",
              status: false,
              // 是否移入
              isMoveIn: false,

            },

            /* {
               fun: this.toDo,
               name: 'light',
               svg: "light",
                status: false
             },*/
            //热力图（无）
            // {
            //   fun: this.toDo,
            //   name: "heatMap",
            //   svg: "heatMap",
            // },
          ],
          key: "effect",
        },
        // 分析二级菜单
        {
          list: [
            //淹没分析
            {
              fun: this.toDo,
              name: "inundationAnalysis",
              svg: "inundationAnalysis",
              // 是否移入
              isMoveIn: false,

            },
            //剖面分析
            {
              fun: this.toDo,
              name: "profileAnalysis",
              svg: "profileAnalysis",
              // 是否移入
              isMoveIn: false,

            },
            //通视
            {
              fun: this.toDo,
              name: "Intervisibility",
              svg: "Intervisibility",
              // 是否移入
              isMoveIn: false,

            },
            //视域分析
            {
              fun: this.toDo,
              name: "visualFieldAnalysis",
              svg: "visualFieldAnalysis",
              // 是否移入
              isMoveIn: false,

            },
            // 视域分析（地形）
            {
              fun: this.toDo,
              name: "visualFieldAnalysis2",
              svg: "visualFieldAnalysis2",
              // 是否移入
              isMoveIn: false,

            },

            //坡度坡向
            {
              fun: this.toDo,
              name: "slopeDirection",
              svg: "slopeDirection",
              // 是否移入
              isMoveIn: false,

            },
            //土方分析
            {
              fun: this.toDo,
              name: "cutFill",
              svg: "cutFill",
              // 是否移入
              isMoveIn: false,

            },

            //范围查询
            // {
            //   fun: this.toDo,
            //   name: "rangeQuery",
            //   svg: "rangeQuery",
            // },
            //透视
            // {
            //   fun: this.toDo,
            //   name: "perspective",
            //   svg: "perspective",
            //   status: false,
            // },

            //等高线
            {
              fun: this.toDo,
              name: "contour",
              svg: "contour",
              // 是否移入
              isMoveIn: false,

            },
            //清除分析
            {
              fun: this.toDo,
              name: "clear",
              svg: "clearMeasure",
              // 是否移入
              isMoveIn: false,

            },
          ],
          key: "analysis",
        },
        {
          list: [
            // 投影面积
            {
              fun: this.toDo,
              name: "projectionArea",
              svg: "projectionArea",
              // 是否移入
              isMoveIn: false,

            },
            // 贴地面积
            {
              fun: this.toDo,
              name: "areaMeasure",
              svg: "areaMeasure",
              // 是否移入
              isMoveIn: false,

            },
            // 投影距离
            {
              fun: this.toDo,
              name: "projectionDistanceMeasure",
              svg: "projectionDistanceMeasure",
              // 是否移入
              isMoveIn: false,

            },
            // // 贴地距离
            {
              fun: this.toDo,
              name: "distanceMeasure",
              svg: "distanceMeasure",
              // 是否移入
              isMoveIn: false,

            },
            // 高度测量
            {
              fun: this.toDo,
              name: "heightMeasure",
              svg: "heightMeasure",
              // 是否移入
              isMoveIn: false,

            },
            // 三角测量
            {
              fun: this.toDo,
              name: "triangleMeasure",
              svg: "triangleMeasure",
              // 是否移入
              isMoveIn: false,

            },
            // 方位角测量
            {
              fun: this.toDo,
              name: "MeasureAzimuth",
              svg: "MeasureAzimuth",
              // 是否移入
              isMoveIn: false,

            },
            //夹角测量（无）
            {
              fun: this.toDo,
              name: "MeasureAngle",
              svg: "MeasureAngle",
              // 是否移入
              isMoveIn: false,

            },
            // 坡度测量
            {
              fun: this.toDo,
              name: "lopeDistanceMeasures",
              svg: "lopeDistanceMeasures",
              // 是否移入
              isMoveIn: false,

            },
            // 坐标测量
            {
              fun: this.toDo,
              name: "coorMeasure",
              svg: "coorMeasure",
              // 是否移入
              isMoveIn: false,

            },
            // 清除测量
            {
              fun: this.toDo,
              name: "clearMeasure",
              svg: "clearMeasure",
              // 是否移入
              isMoveIn: false,

            },
          ],
          key: "measure",
        },
        // 工具二级菜单
        {
          list: [
            //BIM编辑（无）
            // {
            //   fun: this.toDo,
            //   name: "BIMEdit",
            //   svg: "BIMEdit",
            //   status: false,
            // },
            // 路径规划
            {
              fun: this.toDo,
              name: "routePlan",
              svg: "routePlan",
              // 是否移入
              isMoveIn: false,

            },
            // 清除路径规划
            {
              fun: this.toDo,
              name: "clearTrajectoryMotion",
              svg: "clearTrajectoryMotion",
              // 是否移入
              isMoveIn: false,

            },

            /*{
              fun: this.toDo,
              name: 'floodSimulation',
              svg: 'floodSimulation'
            },*/
            /*    {
                  fun: this.toDo,
                  name: 'clearQuery',
                  svg: 'clearQuery'
                },*/
            /*  {
                fun: this.toDo,
                name: 'videoRecord',
                svg: 'videoRecord'
              },*/
            //涂鸦
            {
              fun: this.toDo,
              name: "graffiti",
              svg: "graffiti",
              status: false,
              // 是否移入
              isMoveIn: false,

            },
            //清除涂鸦
            {
              fun: this.toDo,
              name: "clearGraffiti",
              svg: "clearGraffiti",
              // 是否移入
              isMoveIn: false,

            },
            // 飞行漫游
            {
              fun: this.toDo,
              name: "path",
              svg: "path",
              // 是否移入
              isMoveIn: false,

            },
            // 坐标定位
            {
              fun: this.toDo,
              name: "coorLocation",
              svg: "coorLocation",
              // 是否移入
              isMoveIn: false,

            },
            //鼠标定位
            {
              fun: this.toDo,
              name: "mouseLocation",
              trueName: "mouseOver",
              svg: "mouseLocation",
              status: false,
              // 是否移入
              isMoveIn: false,

            },
            //标注点聚合
            {
              fun: this.toDo,
              name: "annotationAggregation",
              svg: "annotationAggregation",
              status: false,
              // 是否移入
              isMoveIn: false,

            },
            // 卷帘对比
            {
              fun: this.toDo,
              name: "splitScreen",
              svg: "splitScreen",
              status: false,
              // 是否移入
              isMoveIn: false,

            },
            // //  全景导入222
            // {
            //   fun: this.toDo,
            //   name: "importPanorama",
            //   svg: "importPanorama",
            // },
            // // //照片定位222
            // {
            //   fun: this.toDo,
            //   name: "pictureLocation",
            //   svg: "pictureLocation",
            // },

            // 屏幕截图（无）
            {
              fun: this.toDo,
              name: "HDScreen",
              svg: "HDScreen",
              // 是否移入
              isMoveIn: false,

            },
            // 高清出图（2）
            {
              fun: this.toDo,
              name: "HDScreenHD",
              svg: "HDScreenHD",
              // 是否移入
              isMoveIn: false,

            },
            // 视频录制222
            {
              fun: this.toDo,
              name: "videoRecording",
              trueName: "destoryRecord",
              svg: "videoRecord",
              status: false,
              // 是否移入
              isMoveIn: false,

            },

            //模型压平
            {
              fun: this.pressModel,
              name: "pressModel",
              svg: "pressModel",
              // 是否移入
              isMoveIn: false,

            },
            //地形开挖
            {
              fun: this.terrainDig,
              name: "terrainDig",
              svg: "terrainDig",
              // 是否移入
              isMoveIn: false,

            },
            // 剖切
            {
              fun: this.tilesetClipping,
              name: "tilesetClipping",
              svg: "tilesetClipping",
              // 是否移入
              isMoveIn: false,

            },
            //清除剖切
            {
              fun: this.clearTilesetClipping,
              name: "clearTilesetClipping",
              svg: "clearTilesetClipping",
              // 是否移入
              isMoveIn: false,

            },

            //范围截图(无)
            // {
            //   fun: this.toDo,
            //   name: "areaScreen",
            //   svg: "areaScreen",
            // },

            // 模型转换
            // {
            //   fun: this.toDo,
            //   name: "transform",
            //   svg: "transform",
            // },

            //照片定位

            // 度分秒转换
            {
              fun: this.toDo,
              name: "projConvert",
              svg: "projConvert",
              status1: false,
              // 是否移入
              isMoveIn: false,

            },
            // 投影转换
            {
              fun: this.toDo,
              name: "projectionConvert",
              svg: "projectionConvert",
              status1: false,
              // 是否移入
              isMoveIn: false,

            },
            // 全景关联222
            // {
            //   fun: this.toDo,
            //   name: "importImg",
            //   svg: "importImg",
            // },
            // gdb导入222
            {
              fun: this.toDo,
              name: "gdbImport",
              svg: "gdbImport",
              // 是否移入
              isMoveIn: false,

            },
            // obj模型
            // {
            //   fun: this.toDo,
            //   name: "objModel",
            //   svg: "gdbImport",
            // },
            //  人房关联222
            {
              fun: this.toDo,
              name: "peopleRoomLink",
              svg: "peopleRoomLink",
              // 是否移入
              isMoveIn: false,

            },
            // {
            //   fun: this.toDo,
            //   name: "airLine",
            //   svg: "peopleRoomLink",
            // },
            // 物资关联222
            // 圆形统计
            {
              fun: this.goodsSearchCircle,
              name: "goodsSearchCircle",
              svg: "goodsSearchCircle",
              // 是否移入
              isMoveIn: false,
              af
            },
            // 多边形统计
            {
              fun: this.goodsSearchPolgon,
              name: "goodsSearchPolgon",
              svg: "goodsSearchPolgon",
              // 是否移入
              isMoveIn: false,

            },
            // 分屏
          ],
          key: "tool",
        },
        // 菜单内容来源于文件
        //   军标二级菜单
        {
          list: [],
          key: "militaryMark",
        },
        // 在线图源二级菜单
        {
          key: "onlinePictureSource",
        },
      ],
      currentItem: [],
      currentIndex: 0,
    };
  },
  created() { },
  mounted() {
    // 接收一级菜单页面传过来的具体值，并指定当前页面将要显示的二级菜单具体值
    this.$recvChanel("currentSecondMenu", (params) => {
      console.log(params);
      let arr = ["importImg", "gdbImport", "importPanorama"];
      this.menuList.forEach((it, i) => {
        if (it.key == params.item.key) {
          if (["model"].includes(it.key)) {
            this.currentItem = [];
            console.log("secondMenu的mounted");
            modelList((res) => {
              it.list = res.list;
              it.list.forEach((item) => {
                item.fun = this.addGlb;
              });
              this.currentItem = it.list;
            });
            // this.currentItem = [{name: 'imports',}]
          } else if (["situation"].includes(it.key)) {
            this.currentItem = [];
            console.log("secondMenu的mounted");
            listSituation({}, (res) => {
              console.log(res);
              it.list = res.list;
              it.list.forEach((item) => {
                item.rightfun = this.editTs;
                item.fun = this.tsOnclick;
              });
              this.currentItem = it.list;
              this.currentItem.unshift({ ts_name: "新建", fun: this.newTs });
            });
            // this.currentItem = [{name: 'imports',}]
          } else {
            this.currentItem = it.list;
          }
          // this.currentIndex = i
        }
      });
    });
  },
  methods: {
    // 鼠标移入
    mouseover(item) {
      if (item.hasOwnProperty("isMoveIn")) item.isMoveIn = true;
    },
    // 鼠标移出
    mouseout(item) {
      if (item.hasOwnProperty("isMoveIn")) item.isMoveIn = false;
    },
    toDo(item) {
      if (!item.hasOwnProperty("status"))
        this.$changeComponentShow(".left_second", false);
      this[item.name](item, this.menuList);
    },
  },
};
</script>

<style scoped lang="scss">
#secondMenu {
  user-select: none;
  -webkit-user-select: none;
  z-index: 888;
  display: none;
  transform: translateY(-50%);
  /*width: 17vw;
  height: 30vh;*/
  width: 15vw;
  left: 9vw;
  //border: 1px solid greenyellow;

  .menus_box {
    width: 95%;
    position: absolute; // 绝对定位
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    //background: #0bcb9a;
    //margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-content: flex-start;
    text-align: center;
    flex-wrap: wrap;
    overflow: auto;
    background: url('../../assets/images/hongse/leftbg.png') no-repeat;
    background-size: 100% 100%;
    padding: 10px;

    .menus_item {
      margin-top: 0.6em;
      cursor: pointer;
      //width: 4vw;
      //height: 5vh;
      width: 25%;
      height: 20%;
      //background: salmon;
      //padding: .4em;

      .item_icon {
        height: 20px;
        width: 20px;
        position: relative;
        margin: auto;
      }

      .item_text {
        font-size: 12px;
        color: #fff;
        text-align: center;
        padding-top: 0.5em;
      }
    }
  }

  .menus_box::-webkit-scrollbar-track {
    border: 1px solid #66b8cd;
    background-color: #fff;
    border-radius: 10px;
  }

  .menus_box::-webkit-scrollbar {
    width: 8px;
    background-color: #193a49;
  }

  .menus_box::-webkit-scrollbar-thumb {
    background-color: #28e4fc;
    border-radius: 15px;
  }

  .item_icon {
    .el-button {
      padding: 0;
    }
  }

  .active {
    color: #f00 !important;
  }
}
</style>
