<template>
  <div id="repetitionGraphy">
    <div class="buttons">
      <el-button icon="el-icon-back" size="mini" @click="backRouter"></el-button>
      <el-button size="mini" @click="changeGraphy">替换平面图</el-button>
      <el-button size="mini">编辑平面图</el-button>
    </div>
    <!-- 展示图片 -->
    <div class="drawImg">
      <drawFloor ref="drawFloor" :findGraphyItemId="findGraphyItemId" :point="point" :pointWidth="pointWidth"
        :isScale="false" indexs="repetion"></drawFloor>
    </div>
    <!-- 查看图片弹窗 -->
    <checkGraphy :checkGraphyVisible="checkGraphyVisible" @handleCloseCGraphy="checkGraphyVisible=false"></checkGraphy>
    <div id="operateList">
      <operateGraphyItem></operateGraphyItem>
    </div>
  </div>
</template>
<script>
import drawFloor from "./drawGraphy/drawFloor";
import checkGraphy from "./drawGraphy/checkGraphy"; //查看图片
import operateGraphyItem from "./drawGraphy/operateGraphyItem" //各个item
export default {
  components: {
    drawFloor,
    checkGraphy,
    operateGraphyItem
  },
  data() {
    return {
      checkGraphyVisible: false, //查看平面图弹窗
      modelId: "04153a22ce3111e9b1c7318645437bfe", // key
      point: [40703.54760591985, 42678.14510522981], //坐标
      pointWidth: 2000,
      findGraphyItemId: "", //高亮的id
      slidervalue: 0
    };
  },
  methods: {
    handleClose() {
      this.$emit("closeRepeatVisible");
    },
    // 返回路由
    backRouter() {
      this.$router.go(-1);
    },
    // 替换模型文件
    changeGraphy() {
      this.checkGraphyVisible = true;
    },
  },
  mounted() {
    // this.dataKey = `/image-service/common/file_get/${this.$route.query.jsonKey}?systemId=revit`;
    // this.modelId = this.$router.query.modelId
    let modelId = this.modelId
    console.log(this.$refs.drawFloor)
    this.$refs.drawFloor.initGraphy(modelId)
  },
};
</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);
  }
  #operateList {
    position: absolute;
    left: 50%;
    bottom: 100px;
    // margin-left: 
  }
}
</style>