<template>
  <el-container>
    <el-aside width="200px" class="el-scrollbar">
      <div style="height: 300px;">
        <el-input type="textarea" v-model="ModelID" placeholder='输入业务空间轮廓线,三维数组,X,Y,Z均为大写;或者模型ID' style="height: 100%;"></el-input>
      </div>
      <div title="上传json文件">
        <el-button size="mini" @click="clickInputFile" icon="el-icon-upload"></el-button>
        <input type="file" @change="filechange" ref="file">
      </div>
      <div title="适配底图">
        <el-button size="mini" @click="fitClick" icon="el-icon-crop"></el-button>
      </div>
      <div title="切割">
        <el-button size="mini" @click="cut" icon="el-icon-edit"></el-button>
      </div>
      <div title="清除">
        <el-button size="mini" @click="clear" icon="el-icon-refresh-left"></el-button>
      </div>
      <div title="定位">
        <el-button size="mini" @click="location" icon="el-icon-position"></el-button>
      </div>
      <div title="开启/关闭吸附">
        <el-button size="mini" @click="absorb" icon="el-icon-price-tag"></el-button>
      </div>
      <div title="矩形选择">
        <el-button size="mini" @click="rectSelection" icon="el-icon-mouse"></el-button>
      </div>
      <div title="通过模型ID生成平面图">
        <el-button size="mini" icon="el-icon-s-promotion" @click="modelChange"></el-button>
      </div>
      <div title="通过轮廓线生成业务空间">
        <el-button size="mini" @click="showOutline" icon="el-icon-magic-stick"></el-button>
      </div>
      <div title="打印">
        <el-button size="mini" @click="console" icon="el-icon-printer"></el-button>
      </div>
      <div title="下载svg">
        <el-button size="mini" @click="saveSvg" icon="el-icon-printer">下载svg</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>
    </el-main>
  </el-container>
</template>
<script>

import { SGraphScene } from "@saga-web/graph/lib/";
import { DivideFloorScene, LocationPointScene } from "@saga-web/cad-engine/lib";
import { FloorView } from "@saga-web/cad-engine/lib/FloorView";
export default {
  data() {
    return {
      view: null,
      scene: null,
      flag: undefined,
      show: true,
      loading: false,
      canvasWidth: 800,
      canvasHeight: 800,
      ModelID: "4cea832a217c11ea962ac576d98e7540"
    }
  },
  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() {
      let that = this;
      // this.disableRightButton()
      this.clearGraphy()
      that.scene = new DivideFloorScene();
      this.loading = true;
      that.scene.getFloorData('/modelapi/base-graph/query', { ModelId: this.ModelID }).then(res => {
        if (res.Result == 'failure') {
          this.$message.warning(res.Message)
        }
        console.log(res)
        that.view.scene = that.scene;
        that.view.fitSceneToView();
        this.loading = false;
      }).catch(err => {
        console.log(err)
      })
    },
    // 清除canvas
    clearGraphy() {
      if (this.view) {
        this.view.scene = null;
        return
      }
      this.view = new FloorView('bg')
    },
    fitClick() {
      this.view.fitSceneToView();
    },
    showSpace() {
      this.show = !this.show
      // this.scene.isShowDoor = this.show
      // this.scene.isShowSpace = this.show
      this.scene.spaceList.map(t => {
        if (!t.selected) {
          t.visible = false;
        }
      })
      this.scene.isShowColumn = this.show
      // Opt.spaceColor = new SColor(100,100,100,100);
    },
    disableRightButton() {
      this.$refs.canvas.addEventListener('contextmenu', (e) => {
        console.log(e)
        e.preventDefault();
      })
      this.scene.isShowSpace = false
    },
    cut() {
      this.scene.isMarking = true;
      console.log(this.scene)
    },
    console() {
      console.log(this.scene.getSelectedSpaces())
      this.scene.isShowColumn = false
      this.scene.isShowWall = false
    },
    clear() {
      this.scene.clearSceneMark()
    },
    location() {
      // console.log(this)
      this.view.fitSelectedToView()
    },
    move() {
      this.view.isMoving = !this.view.isMoving;
    },
    absorb() {
      this.scene.isAbsorbing = !this.scene.isAbsorbing;
    },
    rectSelection() {
      this.scene.isRectSelection = 1;
      console.log(this.scene)
    },
    showOutline() {
      try {
        let outline = JSON.parse(this.ModelID)
        console.log(outline)
        let obj = {
          RoomLocalName: '哈哈哈哈',
          OutLine: outline,
          RoomID: 12312,
          Color: "#006bd6",
          Height: 5000,
          HeightLightFlag: true
        }
        this.scene.removeAllZone()
        this.scene.addZone(obj);
        this.scene.zoneList[0].selected = true;
        this.view.fitSelectedToView();
      } catch (err) {
        alert('格式不正确')
      }
    },
    filechange(e) {
      let file = e.target.files[0]
      this.read(file)
    },
    read(f) {
      let rd = new FileReader();
      this.loading = true;
      rd.onload = e => {
        //this.readAsArrayBuffer函数内，会回调this.onload函数。在这里处理结果
        let cont = rd.reading({ encode: 'UTF-8' });
        let res = JSON.parse(cont);
        this.JSON = res;
        this.loadRes()
      };
      rd.readAsBinaryString(f);
    },
    loadRes() {
      if (this.JSON) {
        this.view.scene = null;
        this.scene = new DivideFloorScene();
        this.scene.addBaseMapItem(this.JSON.EntityList[0].Elements)
        this.view.scene = this.scene;
        console.log(this.scene)
        this.view.fitSceneToView();
      }
      this.loading = false;
    },
    modelChange() {
      console.log(this.ModelID)
      this.createGraphy();
    },
    clickInputFile() {
      this.$refs.file.click()
    },
    saveSvg(){
      if(this.view){
        this.view.saveSceneSvg(`1.svg`, 6400, 4800);
      }
    }
  },
}
</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>