<template>
  <div style="overflow: hidden">
    <div
      id="topology-hrhx"
      v-show="false"
      :style="{ width: width, height: height }"
    ></div>
    <el-tooltip :content="title" placement="top">
      <el-image :src="imgData" :style="{ width: width, height: height }" lazy>
        <div slot="error" class="image-slot">
          <i class="el-icon-picture-outline"></i>
        </div>
      </el-image>
    </el-tooltip>
  </div>
</template>
<script>
import { Topology } from "@topology/core";
import { register as registerChart } from "@topology/chart-diagram";
export default {
  props: {
    canvasData: {
      type: Object,
      require: true,
    },
    height: {
      type: String,
      require: true,
    },
    width: {
      type: String,
      require: true,
    },
    title: {
      type: String,
      require: true,
    },
  },
  watch: {
    canvasData: {
      handler(n, o) {
        this.$nextTick(() => {
          this.init();
        });
      },
      deep: true,
    },
  },
  data() {
    return {
      canvas: {},
      locked: 0,
      showTools: true,
      imgData: "",
    };
  },
  created() {
    registerChart();
  },
  mounted() {
    this.init();
  },
  methods: {
    onBack() {
      //   this.$router.push({
      //     path: "/workspace",
      //   });
    },
    onSizeWindow() {
      this.canvas.fitView(20);
    },
    onSizeOri() {
      //   this.canvas.open(this.$store.state.canvas.topologyData);
    },
    init() {
      this.canvas = new Topology("topology-hrhx");
      this.canvasData.locked = 1;
      // 3. 渲染图形
      // 画布图形数据，可以来自于官网下载的json
      this.canvasData.websocket = "";
      this.canvas.open(this.canvasData);
      // 或 用window.topology对象 === 上面的canvas
      // topology.open(json);
      // 4. 如果json发送变化，重绘
      this.canvas.render();
      this.imgData = this.canvas.toImage();
      this.canvas.destroy();
    },
  },
};
</script>
<style lang="scss">
image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: hsl(216deg 33% 97%);
  color: hsl(220deg 4% 58%);
  font-size: 30px;
}
.tools {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  display: flex;
  & > div {
    flex-grow: 1;
  }

  button {
    margin: 12px 16px;
  }
}
</style>