<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="(sign||otherSign)&&!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>
      <span style="float:right;" v-if="file.FolderName">当前对应的模型文件：{{file.FolderName}} - {{file.FloorName}}</span>
    </div>
    <!-- 展示图片 -->
    <div class="drawImg">
      <drawFloor ref="drawFloor" :isEdit="isEdit" :showTools="true" :id="1" @changeSign="changeSign"></drawFloor>
    </div>
    <!-- 查看图片弹窗 -->
    <checkGraphy ref="checkGraphy" @refresh="refresh" :alreadyRelatedModel='alreadyRelatedModel'></checkGraphy>
  </div>
</template>
<script>
import drawFloor from "./drawGraphy/drawFloor";
import checkGraphy from "./drawGraphy/checkGraphy"; //查看图片
import { floorUpdate, floorQueryAndSign } from "@/api/scan/request";
import { getFileNameById } from "@/api/model/file";
export default {
  components: {
    drawFloor,
    checkGraphy
  },
  data() {
    return {
      modelId: "", // 
      isEdit: false, // 是否编辑模式
      file: {},
      alreadyRelatedModel: [],
      sign: false,
      otherSign: false
    };
  },
  created() {
    this.modelId = this.$route.query.modelId;
    this.FloorID = this.$route.query.FloorID;
    this.BuildID = this.$route.query.BuildID;
    this.init();
  },
  mounted() { },
  methods: {
    init() {
      this.getFileName(this.modelId)
      this.getFloorData()
    },
    // 返回路由
    backRouter() {
      this.$router.push({ name: 'buildFloor' })
    },
    // 替换模型文件
    changeGraphy() {
      this.$refs.checkGraphy.showDialog({ FloorID: this.FloorID, BuildID: this.BuildID })
    },
    // 确认保存
    confirm() {
      let sceneMark = this.$refs.drawFloor.drawMainScene.sceneMark, Outline = null;
      if (sceneMark) {
        if (sceneMark.outLine.length < 3) {
          this.$message.warning('请添加轮廓线');
          return;
        }
        if (!sceneMark.closeFlag) {
          this.$message.warning('请按回车闭合轮廓线');
          this.$refs.drawFloor.focus();
          return;
        }
        Outline = this.$refs.drawFloor.drawMainScene.sceneMark.outLine
        Outline = Outline.map(t => {
          return {
            x: t.x.toFixed(2),
            y: -t.y.toFixed(2),
          }
        })
      }
      let pa = {
        Content: [{ FloorID: this.FloorID, Outline: Outline }],
        Projection: ['Outline']
      }
      floorUpdate(pa, res => {
        this.isEdit = false;
        this.$message.success("更新成功");
      })
    },
    // 取消
    cancel() {
      this.isEdit = false;
      this.$refs.drawFloor.init();
    },
    // 编辑平面图
    editGraphy() {
      this.isEdit = true;
    },
    // 替换模型文件成功
    refresh(modelId) {
      this.modelId = modelId;
      this.getFileName(this.modelId)
    },
    // 获取文件夹名称
    getFileName(modelId) {
      if (!modelId) return
      let pa = {
        Id: modelId
      }
      getFileNameById(pa, res => {
        this.file = res;
      })
    },
    // 获取楼层
    getFloorData() {
      let floorParam = {
        PageSize: 1000,
        Filters: `BuildID='${this.BuildID}'`
      };
      floorQueryAndSign(floorParam, res => {
        this.alreadyRelatedModel = res.Content.map(t => {
          if (t.FloorID != this.FloorID) return t.ModelId
          this.sign = t.Sign > 0
        }).filter(t => t);
      });
    },
    changeSign(flag){
      this.otherSign = flag
    }
  },
  watch: {
    modelId(n, o) {
      if (o && n != o) {
        this.$refs.drawFloor.initGraphy(n, 1);
      }
    }
  }
};
</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>