<template>
  <div class="leftSideSecond">
    <div class="leftSideSecondBox">
      <template v-if="obj">
        <div class="menuItem" v-for="value in obj.children" :key="value.func" @click="handleClick(value)">
          <img :src="`./assets/leftmenu/${value.func}.png`" style="color: rgb(255, 0, 0)" alt="" />
          <!--          <span :style="{ color: !clickChange[value] ? 'var(&#45;&#45;color-text)' : 'rgb(255,0,0)' }">{{ t(`${obj.key}.${value}`) }}</span>-->
          <span>{{ value.name }}</span>
        </div>
      </template>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getCurrentInstance } from 'vue';

// 获取组件实例
const instance = getCurrentInstance();
const obj: any = ref(null);
const initList = (value) => {
  obj.value = value;
  console.log(value);
};
const methodMap = {
  roam() {
    instance.proxy['$sendChanel']('flyRoamDialog', '');
  },
  // 路径规划
  routePlan() {
    instance.proxy['$sendChanel']('routePlanningDialog', '');
  },
  //投影面积
  projectionArea: () => {
    new window['YJ'].Measure.MeasureTyArea(window['Earth1']).start();
  },
  //投影距离测量
  projectionDistanceMeasure: () => {
    new window['YJ'].Measure.MeasureProjectionDistance(window['Earth1']).start();
  },
  areaMeasure: () => {
    new window['YJ'].Measure.MeasureTdArea(window['Earth1']).start();
  },
  //距离测量
  distanceMeasure: () => {
    new window['YJ'].Measure.MeasureDistance(window['Earth1']).start();
  },
  //高度测量
  heightMeasure: () => {
    new window['YJ'].Measure.MeasureHeight(window['Earth1']).start();
  },
  //三角测量
  triangleMeasure: () => {
    new window['YJ'].Measure.MeasureTriangle(window['Earth1']).start();
  },
  // 方位角
  MeasureAzimuth() {
    new window['YJ'].Measure.MeasureAzimuth(window['Earth1']).start();
  },
  //夹角测量
  MeasureAngle() {
    new window['YJ'].Measure.MeasureAngle(window['Earth1']).start();
  },
  // 坡度测量
  lopeDistanceMeasures() {
    new window['YJ'].Measure.MeasureSlopeDistance(window['Earth1']).start();
  },
  //坐标测量
  coorMeasure() {
    new window['YJ'].Measure.MeasureLocation(window['Earth1']).start();
  },
  //清除测量
  clear() {
    window['YJ'].Measure.Clear();
  }
};
const handleClick = (value = 'projectionDistanceMeasure') => {
  // console.log('点击了', value);
  methodMap[value['func']]();
  window['$']('.leftSideSecond ')[0].style.display = 'none';
};
defineExpose({
  initList
});
</script>
<style lang="scss" scoped>
.leftSideSecond {
  display: none;
  height: 250px;
  width: 230px;
  background: url('@/assets/images/map/secondBj.png') no-repeat;
  background-size: 100% 100%;
  padding: 9px 4px;

  .leftSideSecondBox {
    //border: 1px solid red;
    display: flex;
    flex-wrap: wrap;
    max-height: 100%;
    overflow-y: auto;

    .menuItem {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 5px 0;

      img {
        width: 20px;
        height: 20px;
      }

      span {
        font-size: 12px;
      }
    }
  }
}
</style>
