<template>
  <!-- 查看平面图页面 -->
  <div id="repetitionGraphy">
    <div class="buttons">
      <el-button icon="el-icon-back" size="mini" @click="backRouter"></el-button>
      <el-button v-if="!isEdit" size="mini" @click="changeGraphy">替换平面图</el-button>
      <el-button v-if="!isEdit" size="mini" @click="editGraphy">编辑平面图</el-button>
      <el-button v-if="isEdit" size="mini" @click="cancel">取消</el-button>
      <el-button v-if="isEdit" size="mini" @click="confirm" type="primary">确认</el-button>
    </div>
    <!-- 展示图片 -->
    <div class="drawImg">
      <drawFloor ref="drawFloor" :isEdit="isEdit" :showTools="true" :id="1"></drawFloor>
    </div>
    <!-- 查看图片弹窗 -->
    <checkGraphy ref="checkGraphy" @refresh="refresh"></checkGraphy>
  </div>
</template>
<script>
import drawFloor from "./drawGraphy/drawFloor";
import checkGraphy from "./drawGraphy/checkGraphy"; //查看图片
import { floorUpdate } from "@/api/scan/request";
export default {
  components: {
    drawFloor,
    checkGraphy
  },
  data() {
    return {
      modelId: "", // 
      isEdit: false, // 是否编辑模式
    };
  },
  created() {
    this.modelId = this.$route.query.modelId;
    this.FloorID = this.$route.query.FloorID;
  },
  mounted() {
    this.$refs.drawFloor.initGraphy(this.modelId)
  },
  methods: {
    // 返回路由
    backRouter() {
      this.$router.push({ name: 'buildFloor' })
    },
    // 替换模型文件
    changeGraphy() {
      this.$refs.checkGraphy.showDialog({ FloorID: this.FloorID })
    },
    // 确认保存
    confirm() {
      let sceneMark = this.$refs.drawFloor.drawMainScene.sceneMark;
      if (!sceneMark || sceneMark.outLine.length < 3) {
        this.$message.warning('请添加轮廓线');
        return;
      }
      if (!sceneMark.closeFlag) {
        this.$message.warning('请按回车闭合轮廓线');
        this.$refs.drawFloor.focus();
        return;
      }
      let pa = {
        Content: [{ FloorID: this.FloorID, Outline: this.$refs.drawFloor.drawMainScene.sceneMark.outLine }],
        Projection: ['Outline']
      }
      floorUpdate(pa, res => {
        this.isEdit = false;
        this.$message.success("更新成功");
      })
    },
    // 取消
    cancel() {
      this.isEdit = false;
      this.$refs.drawFloor.initGraphy(this.modelId)
    },
    // 编辑平面图
    editGraphy() {
      this.isEdit = true;
    },
    refresh() { }
  },
};
</script>
<style lang="less">
#repetitionGraphy {
  width: 100%;
  height: 100%;
  background: #fff;
  position: relative;
  padding: 10px;
  box-sizing: border-box;
  .drawImg {
    width: 100%;
    margin-top: 10px;
    height: calc(100% - 40px);
  }
}
</style>