<template>
  <div>
    <div class="marklistbox marklistboxhistory">
      <div class="flex jc-sb ai-c">
        <div class="title">历史标注</div>
      </div>
      <div class="mark-content">
        <div
          v-for="(item, index) in allHistoryMarkList"
          :key="index"
          class="table-li-history"
        >
          <div class="flex jc-sb ai-c max-h max-w">
            <div class="flex-1 flex column mr-2">
              <div class="flex ai-c jc-sb max-w">
                <span>{{ item.title }}</span>
                <span>{{ item.createTime }}</span>
              </div>
              <div>
                <span>{{ item.remark }}</span>
              </div>
            </div>
            <div>
              <el-button
                size="mini"
                type="danger"
                @click="delOneHistoryMark(item)"
                >删除</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <div class="markfooter flex ai-c jc-e">
        <el-button @click="historyMarkBack">返 回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getMethodCommon } from '../../../api/common';
  export default {
    name: 'hitorylabelbox',
    data(){
        return {
            allHistoryMarkList:[],
            historyMarkGraphicLayer:null,
        }
    },
    mounted(){
        this.getHistoryMarkList();
    },
    methods:{
        //获取所有标注
    getHistoryMarkList() {
      let param = {
        pageIndex: 1,
        pageSize: 99999,
      };
      getMethodCommon("/FireCodePC/MarkerList", param).then((res) => {
        this.allHistoryMarkList = res.data;

        if (this.historyMarkGraphicLayer == null) {
          this.historyMarkGraphicLayer = new mars3d.layer.GraphicLayer();
          window.globalmap.addLayer(this.historyMarkGraphicLayer);
        }

        this.historyMarkGraphicLayerArr = [];
        this.allHistoryMarkList.forEach((item, index) => {
          let horizontalOrigin = Cesium.HorizontalOrigin.CENTER;
          let verticalOrigin = Cesium.VerticalOrigin.MIDDLE;
          if (item.iconUrl == "箭头") {
            horizontalOrigin = Cesium.HorizontalOrigin.RIGHT;
            verticalOrigin = Cesium.VerticalOrigin.TOP;
          }
          let graphic = new mars3d.graphic.BillboardEntity({
            position: [item.lng, item.lat],
            style: {
              // image: "img/jiuyuanrenyuan.png",
              image: item.createUser,
              scale: 0.8,
              horizontalOrigin: horizontalOrigin,
              verticalOrigin: verticalOrigin,
              distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
                0,
                200000
              ), // 按视距距离显示
              scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
              clampToGround: true,
            },
            attr: { remark: "示例11" },
            pointerEvents: true,
          });
          this.historyMarkGraphicLayerArr.push(graphic);

          this.historyMarkGraphicLayer.addGraphic(graphic);
        });
      });
    },
    }
  }
</script>

<style scoped>
  
</style>