<template>
  <div class="coordInfoDialog" v-if="refresh">
    <crossDistance
      class="cross-distance"
      :contentData="contentData"
    ></crossDistance>
    <greenWave :contentData="contentData"></greenWave>
  </div>
</template>

<script>
import { currentGreenwaveDetail } from "@/common/api/signalOp.js";
export default {
  data() {
    return {
      greenwaveId: null,
      contentData: null,
      refresh: false,
    };
  },
  props: ["propsData"],
  components: {
    greenWave: (resolve) => require(["./greenWave.vue"], resolve),
    crossDistance: (resolve) => require(["./crossDistance.vue"], resolve),
  },
  mounted() {
    this.greenwaveId = this.propsData.id;
    this.getData();
  },
  methods: {
    getData() {
      currentGreenwaveDetail({ greenwaveId: this.greenwaveId }).then((res) => {
        if (res && res.data) {
          this.contentData = res.data.content;
          this.refresh = true;
          // console.log(this.contentData);
        }
      });
    },
  },
};
</script>

<style lang="less">
.img-dialog {
  position: absolute;
  .el-dialog__header {
    position: absolute;
    width: 100%;
    z-index: 999;
    top: -45px;
  }
  .el-dialog__body {
    background: #fff;
    min-height: 400px;
  }

  .coordInfoDialog {
    width: 100%;
    height: 444px;
    background: #fff;
    padding: 10px 20px;
    // background: url("../../assets/images/dialogImg/coordInfoDialog.png")
    //   no-repeat;
    // background-size: 100% 100%;
    .green-wave {
      margin: 0;
    }
    #waveCanvas {
      z-index: 1 !important;
    }
  }
}
</style>
