<template>
  <!-- 拓扑图demo -->
  <el-container>
    <el-aside width="200px" class="el-scrollbar">
      <div title="划线">
        <el-button size="mini" @click="drawline" icon="el-icon-crop"></el-button>
      </div>
      <div title="适配底图">
        <el-button size="mini" @click="fitClick" icon="el-icon-crop"></el-button>
      </div>
      <div title="添加item">
        <el-button size="mini" @click="additem" icon="el-icon-crop"></el-button>
      </div>
    </el-aside>
    <el-main>
      <div ref="graphy" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)" style="height: 100%">
        <canvas id="bg" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
        <div v-show="menuShow" id="menu" ref="menu">
          <p @click="editName">编辑名称</p>
          <p @click="deleteItem">删除</p>
        </div>
      </div>
    </el-main>
  </el-container>
</template>
<script>

import { TopoScene, TopoView } from "@saga-web/topology/lib";
export default {
  data() {
    return {
      view: null,
      scene: null,
      loading: false,
      canvasWidth: 800,
      canvasHeight: 800,
      menuShow: false,
      img1:'data:image/jpg;base64,[encoded data, 8308 characters]',
      img2:'data:image/jpg;base64,[encoded data, 101284 characters]',
      img3:'data:image/jpg;base64,[encoded data, 23580 characters]'
    }
  },
  mounted() {
    this.canvasWidth = this.$refs.graphy.offsetWidth;
    this.canvasHeight = this.$refs.graphy.offsetHeight;
    this.createGraphy();
    document.onkeydown = E => {
      console.log(E)
    }
    window.onresize = () => {
      this.canvasWidth = this.$refs.graphy.offsetWidth;
      this.canvasHeight = this.$refs.graphy.offsetHeight;
    }
  },
  beforeCreate() {
    // 读取文件
    FileReader.prototype.reading = function ({ encode } = pms) {
      let bytes = new Uint8Array(this.result);    //无符号整型数组
      let text = new TextDecoder(encode || 'UTF-8').decode(bytes);
      return text;
    };
    /* 重写readAsBinaryString函数 */
    FileReader.prototype.readAsBinaryString = function (f) {
      if (!this.onload)       //如果this未重写onload函数，则创建一个公共处理方式
        this.onload = e => {  //在this.onload函数中，完成公共处理
          let rs = this.reading();
          console.log(rs);
        };
      this.readAsArrayBuffer(f);  //内部会回调this.onload方法
    };
  },
  methods: {
    createGraphy() {
      this.clearGraphy();
      this.scene = new TopoScene()
      this.view.scene = this.scene;
    },
    // 清除canvas
    clearGraphy() {
      if (this.view) {
        this.view.scene = null;
        return
      }
      this.view = new TopoView('bg')
    },
    fitClick() {
      this.view.fitSceneToView();
    },
    additem() {
      let equipdata = {
        ID: this.uuid(),
        Size: {
          Width: 100,
          Height: 50
        },
        Pos: {},
        ImgSource: this.img1,
        AnchorList: [{ Pos: { X: 0, Y: -25 } }, { Pos: { X: 0, Y: 25 } }, { Pos: { X: -50, Y: 0 } }, { Pos: { X: 50, Y: 0 } }]
      }
      this.scene.createItem(equipdata)
    },
    drawline() {
      this.scene.isLining = true;
    },
    // 清除默认左右键事件
    disableRightButton() {
      this.$refs.canvas.addEventListener('contextmenu', (e) => {
        e.preventDefault();
      })
      this.$refs.canvas.addEventListener('click', (e) => {
        e.preventDefault();
        this.menuShow = false
      })
    },
    //
    editName(){

    },
    //
    deleteItem(){},
    uuid(len, radix) {
      var chars = '0123456789abcdef'.split('');
      var uuid = [],
        i;
      radix = radix || chars.length;
      if (len) {
        for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
      } else {
        var r;
        uuid[8] = uuid[13] = uuid[18] = uuid[23] = '';
        uuid[14] = '4';
        for (i = 0; i < 32; i++) {
          if (!uuid[i]) {
            r = 0 | Math.random() * 16;
            uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
          }
        }
      }
      return uuid.join('');
    }
  },
}
</script>
<style lang="less" scoped>
.el-container {
  background: #fff;

  /deep/ textarea.el-textarea__inner {
    width: 100%;
    height: 100% !important;
  }

  .el-aside {
    padding: 10px;
    border: 1px solid #e4e4e4;
  }

  .el-aside > div {
    margin: 10px auto;
    text-align: right;
  }

  .el-main {
    padding: 10px !important;
    border: 1px solid #e4e4e4;
    border-left: none;
  }

  input[type="file"] {
    display: none;
  }
}
</style>