<!--
 * @Author: sjl
 * @Date: 2023-06-13 00:07:16
 * @Descripttion: 
-->
<template>
  <div class="toolPanel">
    <ul>
      <span class="titleName">绘制</span>
      <li v-for="(i, key) in drawOption" :key="key" :title="i.title" @click="draw(i.type)">
        <img :src="`./static/img/drawIcon${active == i.type ? 'Light' : ''}/${i.type}.png`" />
      </li>
      <span class="titleName2">测量</span>
      <li v-for="(i, key) in measureOption" :key="key" :title="i.title" @click="measure(i.type)">
        <img :src="`./static/img/drawIcon${active == i.type ? 'Light' : ''}/${i.type}.png`" />
      </li>
      <span class="titleName2">分析</span>
      <li v-for="(i, key) in analyseOption" :key="key" :title="i.title" @click="analyse(i)">
        <img :src="`./static/img/drawIcon${active == i.type ? 'Light' : ''}/${i.type}.png`" />
      </li>
      <li title="删除所有" @click="remove">
        <img src="../../assets/images/ljt.png" alt="" srcset="" />
      </li>
    </ul>
  </div>
</template>
<script>
import { defineComponent, ref, onBeforeUnmount } from 'vue';
export default defineComponent({
  name: 'Map',
  component: {},
  setup() {
    //绘制工具
    const active = ref('');
    const drawOption = ref([
      { title: '绘制点', type: 'point' },
      { title: '绘制线', type: 'polyline' },
      { title: '绘制面', type: 'polygon' },
      { title: '绘制箭头', type: 'fine_arrow' },
    ]);
    //测量工具
    const measureOption = ref([
      { title: '测量距离', type: 'measure_length' },
      { title: '测量面积', type: 'measure_area' },
      { title: '测量面积', type: 'measure_height' },
    ]);
    //分析工具
    const analyseOption = ref([{ title: '坡向分析', type: 'fine_arrow', num: 20 }]);

    const draw = (type) => {
      active.value = type;
      map.draw(
        type,
        (overlay) => {
          active.value = '';
          console.log('callback:', type, overlay);
          if (overlay.entity && window.doubleScreenMap) {
            window.doubleScreenMap.drawObj.saveLayer.entities.add(Cesium.clone(overlay.entity));
          }
        },
        true
      );
    };
    const remove = () => {
      active.value = '';
      if (map.drawObj) map.drawObj.remove();
      if (map.measureTool) map.measureTool.destroy();
      if (map.analysisObj) map.analysisObj.remove();
      if (window.doubleScreenMap) window.doubleScreenMap.drawObj.remove();
    };
    onBeforeUnmount(() => {
      active.value = '';
    });
    const measure = (type) => {
      active.value = type;
      map.measure(type, (e) => {
        active.value = '';
        console.log('返回的测量主对象:', e);
      });
    };

    const analyse = (e) => {
      active.value = e.type;
      map.analysis(e.num, (e) => {
        active.value = '';
        console.log('分析:', e);
      });
    };

    return {
      measureOption,
      active,
      drawOption,
      analyseOption,
      analyse,
      measure,
      remove,
      draw,
    };
  },
});
</script>

<style lang="less" scoped>
.titleName {
  width: 105%;
  border-bottom: 1px solid #0b5d7c;
  display: inline-block;
  margin-top: 5px;
}
.titleName2 {
  display: inline-block;
  margin-top: 25px;
}
.toolPanel ul li:first-child {
  padding-top: 5px;
}
.remove {
  padding-top: 0px;
  cursor: pointer;
  padding-left: 1px;
  font-size: 25px;
  color: #78cff6;
}
.toolPanel {
  position: absolute;
  top: 350px;
  width: 50px;
  color: #fff;
  // background-color: rgba(8, 39, 55, 0.5);
  // box-shadow: inset 0px 0px 2px 2px rgba(4, 143, 231, 0.7);
  padding: 0px 2px 10px 0px;
  text-align: center;

  border: 1px solid #0b5d7c;
  background: #031a26;
  opacity: 0.86;
  border-radius: 3px;
}
.toolPanel:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, #0b5d7c 0%, #fff 50%, rgba(255, 255, 255, 0) 99%) 1;
}

li {
  padding-top: 14px;
  padding-left: 15px;
}
ul li:last-child {
  padding-left: 13px;
}
</style>
