<template>
  <div class="tool">
    <div class="style_container">
      <div class="container">
        <ul>
          <li
            v-for="(item, index) in list"
            :key="index"
            :class="item.class"
            @click="listClick(item)"
            :title="item.name"
          >
            <p
              :class="[
                'bg',
                {
                  active: item.active,
                },
              ]"
              v-if="item.show"
            ></p>
          </li>
        </ul>
      </div>
    </div>

    <div class="style_container jump" v-if="urlParam.level && urlParam.level == 4">
      <div class="container" @click="jumpUrl" :title="'跳转到元数据管理系统'">
        <p class="bg"></p>
      </div>
    </div>

    <div class="style_container clear" v-if="list[0].show">
      <div class="container" @click="clear"  :title="'清空标注'">
        <p class="bg"></p>
      </div>
    </div>

    <Mark
      ref="mark"
      v-bind="{
        isShow: IsShowMark,
        closeCallback: closeMarker,
        closeMeasure: closeMeasure,
      }"
      v-if="list[0].show"
    ></Mark>

    <Buffer
      ref="buffer"
      v-bind="{
        isShow: IsShowBuffer,
        closeCallback: closeBuffer,
      }"
    ></Buffer>

    <iframe ref="metadata" :src="metadata_system" loading="lazy" frameborder="0"></iframe>
  </div>
</template>

<script>
import measureTool from "@/utils/openlayer_plugins/measure";

export default {
  data() {
    return {
      list: [
        {
          name: "标注",
          class: "mark",
          active: false,
          show: true,
        },
        {
          name: "测距",
          class: "measure_length",
          active: false,
          show: true,
        },
        {
          name: "测面",
          class: "measure_area",
          active: false,
          show: true,
        },
        {
          name: "缓冲区分析",
          class: "buffer_analysis",
          active: false,
          show: true,
        },
      ],
      IsShowMark: false,
      IsShowBuffer: false,
      measure: null,
      metadata_system: systemConfig.metadata_system,
    };
  },
  components: {
    Mark: () => import("@/components/Mark.vue"),
    Buffer: () => import("@/components/Buffer.vue"),
  },
  methods: {
    listClick(item) {
      this.list.map(function (item_) {
        if (item_.class != item.class) item_.active = false;
      });
      item.active = !item.active;
      if (item.class.indexOf("measure") > -1 && this.measure == null)
        this.measure = new measureTool(globalVariable.map);
      if (this.measure != null) {
        this.measure.stop();
      }
      if (this.$refs.mark && this.$refs.mark.draw) {
        this.$refs.mark.stop();
      }
      switch (item.class) {
        case "mark":
          if (!this.$store.state.SVGObject) {
            this.$message({
              type: "warning",
              message: "标注图标获取中，请稍后重试。",
            });
            item.active = false;
            return;
          }
          if (item.active) {
            if (this.$refs.buffer) {
              this.$refs.buffer.close();
            }
            this.IsShowMark = true;
          } else {
            this.IsShowMark = false;
            if (this.$refs.mark) {
              this.$refs.mark.close();
            }
          }
          break;
        case "measure_length":
          if (item.active) {
            this.measure.start("line");
          }
          break;
        case "measure_area":
          if (item.active) {
            this.measure.start("area");
          }
          break;
        case "buffer_analysis":
          if (item.active) {
            if (this.$refs.mark) {
              this.$refs.mark.hide();
            }
            this.IsShowBuffer = true;
          } else {
            this.IsShowBuffer = false;
            if (this.$refs.buffer) {
              this.$refs.buffer.close();
            }
          }
          break;

        default:
          break;
      }
    },
    closeMeasure() {
      if (this.measure != null) {
        this.measure.stop();
      }
      this.changeToolState("measure_length", false);
      this.changeToolState("measure_area", false);
    },
    closeBuffer() {
      this.IsShowBuffer = false;
      this.changeToolState("buffer_analysis", false);
    },
    closeMarker() {
      this.IsShowMark = false;
      this.changeToolState("mark", false);
    },
    changeToolState(classname, state) {
      this.list = this.list.map(function (item) {
        if (item.class == classname) item.active = state;
        return item;
      });
    },
    jumpUrl() {
      let that = this;
      this.$refs.metadata.contentWindow.postMessage(
        JSON.stringify({
          type: "ONEMAP",
          action: "ADD",
          autologin: true,
        }),
        this.metadata_system
      );
      window.addEventListener(
        "message",
        function (e) {
          var data = e.data;
          console.log(data);
        },
        false
      );
      // window.onbeforeunload = function (e) {
      //   e = e || window.event;
      //   that.$refs.metadata.contentWindow.postMessage(
      //     JSON.stringify({
      //       type: "ONEMAP",
      //       action: "REMOVE"
      //     }),
      //     that.metadata_system
      //   );
      //   // // 兼容IE8和Firefox 4之前的版本
      //   // if (e) {
      //   //   e.returnValue = "关闭提示";
      //   // }
      //   // // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
      //   // return "关闭提示";
      // };
      window.open(systemConfig.metadata_system);
    },
    clear() {
      if (this.$refs.mark && this.$refs.mark.draw) {
        this.$refs.mark.close();
      }
    },
  },
  computed: {
    urlParam() {
      return this.$store.state.urlParams;
    },
  },
  watch: {
    urlParam: {
      immediate: true,
      handler(newVal) {
        if (
          newVal.userId != "" &&
          newVal.userId != null &&
          newVal.userId != undefined &&
          !isNaN(Number(newVal.level))
        ) {
          if (Number(newVal.level) > 0) {
            this.list[0].show = true;
          } else {
            this.list[0].show = false;
          }
        } else {
          this.list[0].show = false;
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
.tool {
  position: absolute;
  top: 150px;
  right: 20px;

  ul {
    width: fit-content;
    height: fit-content;
    border-radius: 4px;
    li {
      width: fit-content;
      height: fit-content;
      cursor: pointer;
      p {
        width: 30px;
        height: 30px;
        margin: 5px 5px;
        cursor: pointer;
        display: inline-block;
      }
      p.bg {
        background-position-x: center;
        background-position-y: center;
        background-repeat: no-repeat;
      }
      &.mark .bg {
        background-image: url(../assets/images/tool/mark1.png);
        &.active,
        &:hover {
          background-image: url(../assets/images/tool/mark_active1.png);
        }
      }
      &.measure_length .bg {
        background-image: url(../assets/images/tool/measure_length1.png);
        &.active,
        &:hover {
          background-image: url(../assets/images/tool/measure_length_active1.png);
        }
      }
      &.measure_area .bg {
        background-image: url(../assets/images/tool/measure_area1.png);
        &.active,
        &:hover {
          background-image: url(../assets/images/tool/measure_area_active1.png);
        }
      }
      &.buffer_analysis .bg {
        background-image: url(../assets/images/tool/buffer_analysis1.png);
        &.active,
        &:hover {
          background-image: url(../assets/images/tool/buffer_analysis_active1.png);
        }
      }
    }
  }

  .clear {
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 4px;
    margin-top: 10px;
    p {
      width: 40px;
      height: 40px;
      cursor: pointer;
      background-position-x: center;
      background-position-y: center;
      background-repeat: no-repeat;
      &.bg {
        background-image: url(../assets/images/tool/clear1.png);
        &:hover {
          background-image: url(../assets/images/tool/clear_active1.png);
        }
      }
    }
  }

  .jump {
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 4px;
    margin-top: 10px;
    p {
      width: 40px;
      height: 40px;
      cursor: pointer;
      background-position-x: center;
      background-position-y: center;
      background-repeat: no-repeat;
      &.bg {
        background-image: url(../assets/images/tool/metadata_manage.png);
        &:hover {
          background-image: url(../assets/images/tool/metadata_manage_active.png);
        }
      }
    }
  }
  iframe {
    display: none;
  }
}
</style>