<template>
  <div class="wrap" ref="mapmidbox">
    <div>
      <div class="setBtns" v-if="!isViews">
        <el-button @click="confim" type="primary">保存</el-button>
        <el-button @click="addItem" type="default">添加房间</el-button>
        <el-button @click="addOther" type="default">添加其他</el-button>
        <el-button @click="addBase" type="default">添加基础设施</el-button>
        <!-- <el-button @click="toCopyRoom" type="default">复制房间</el-button> -->
      </div>
      <el-row v-if="isViews && componentBtn" style="margin-top: 20px; margin-left: 20px;font-size: 18px;">
        <el-row type="flex" justify="space-around" align="middle">
          <el-col> 风险等级图例:
            <span class="riskTab type1"></span>重大风险
            <span class="riskTab type2"></span>较大风险
            <span class="riskTab type3"></span>一般风险
            <span class="riskTab type4"></span>低风险</el-col>
        </el-row>
        <el-button style="margin: 10px 0;" type="primary" @click="getPdf">导 出</el-button>
      </el-row>
      <!-- <el-button @click="editItem" type="default"  v-if="!isViews">修改</el-button> -->

      <div id="printDiv" :style="{ minHeight: layoutHeight + 'px', padding: '20px' }" class="vue-grid-layout">
        <div class="north" style="margin-right: 20px">
          <img src="../../../assets/images/north.png" alt="" />
        </div>
        <vue-draggable-resizable parent ref="dragResizable" v-for="item in layout" :x="(W / 12) * item.x" :y="item.y * 30"
          :w="(W / 12) * item.w" :h="item.h * 30" :i="item.i" :key="item.i" :z="item.zIndex"
          :draggable="item.isDraggable && !isViews" :resizable="item.isResizable && !isViews"
          @resizestop="(x, y, w, h) => resizedEvent(item, x, y, w, h)" @dragging="(x, y) => onDrag(item, x, y)" @dragstop="(x, y) => {
            movedEvent(item, x, y);
          }
            " @resizing="(x, y, w, h) => onResize(item, x, y, w, h)" @activated="onActivated(item)"
          @click.native="dbClickEvent($event, item)" :style="{
            backgroundColor: item.c,
            border: item.type == 'thorough' ? 'none !important' : '',
          }">
          <span class="text" :class="item.w > item.h * 5 ? '' : 'rowText'">{{
            item.name
          }}</span>
          <span class="remove" @click.stop="removeItem(item.i)" v-if="!isViews">x</span>
        </vue-draggable-resizable>
      </div>
    </div>
    <el-dialog :visible.sync="show" :title="title" show-cancel-button>
      <el-form label-width="100px">
        <div v-if="isRoom">
          <el-form-item label="房间名称" prop="roomName">
            <el-input v-model="roomName" placeholder="请输入房间名称" />
          </el-form-item>
          <el-form-item label="房间类型" prop="roomType">
            <el-select v-model="roomType" placeholder="请选择房间类型">
              <el-option v-for="item in roomArr" :key="item.dictValue" :label="item.dictLabel"
                :value="item.dictValue"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div v-else-if="isBase">
          <el-form-item label="房间名称" prop="roomName">
            <el-select v-model="roomName" placeholder="请选择房间类型">
              <el-option v-for="item in copyRoom.typeData" :key="item.dictValue" :label="item.dictLabel"
                :value="item.dictValue"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div v-else-if="copyRoom.isCopy">
          <el-form-item label="楼层" prop="floorName">
            <!-- <el-select v-model="copyRoom.floor.name" placeholder="选择楼层">
              <el-option
                v-for="item in copyRoom.floorData"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select> -->
            <!-- v-model="copyRoom.floor.name" -->
            <el-cascader :options="copyRoom.floorData" :props="{
              label: 'name',
              value: 'id',
            }" @change="handleChange"></el-cascader>
          </el-form-item>
          <el-form-item label="房间" prop="copyRoomName">
            <el-select v-model="copyRoom.room.id" @visible-change="seletRoom" placeholder="选择房间">
              <el-option v-for="item in copyRoom.roomData" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="房间名称">
            <el-input v-model="roomName" placeholder="请输入房间名称" />
          </el-form-item>
          <el-form-item label="房间类型" prop="roomType">
            <!-- <el-input
              readonly
              clickable
              label="房间类型"
              :value="copyRoom.type.dictLabel"
              placeholder="选择房间类型"
              @click="selectType"
            /> -->
            <el-select v-model="copyRoom.type1.dictValue" placeholder="选择房间" @change="copyTypeChnage">
              <el-option v-for="item in copyRoom.typeData" :key="item.dictValue" :label="item.dictLabel"
                :value="item.dictValue"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item label="名称" prop="roomName">
            <el-input v-model="roomName" label="名称" placeholder="请输入名称" />
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog">取 消</el-button>
        <el-button type="primary" @click="saveRoomName">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
import { GridLayout, GridItem } from "vue-grid-layout";
import { ledgerRoomList, getDictList, updateBatch } from "@/api/risk/draw";

import VueDraggableResizable from "@/components/vue-draggable-resizable/vue-draggable-resizable.vue";
import "@/components/vue-draggable-resizable/vue-draggable-resizable.css";
import { debounce } from "@/utils";
import { getFun, postFun } from "@/api/risk/draw";
// 动态添加/删除
export default {
  name: "riskView",
  components: {
    GridLayout,
    GridItem,
    VueDraggableResizable,
  },
  data() {
    return {
      beforEle: null,
      beforeTime: 0,
      W: 0, //当前屏幕的宽度
      H: 0, //当前屏幕的高度
      layoutHeight: 0,
      text: "房间位置绘制工具",
      isabled: true,
      layout: [],
      draggable: false,
      resizable: true,
      colNum: 12,
      // isScreenFull :null,
      layOutItem: {}, //新增的房间对象
      show: false,
      title: "",
      showPicker: false,
      roomType: "",
      roomName: "",
      roomArr: [],
      colorList: ["#FF4433", "#FF9800", "#FFFF00", "#0091EA"],
      isViews: false, // true:查看页面；  false: 添加页面
      showHeader: true,
      isRoom: true, //是否为添加房间
      isBase: false,
      baseName: "",
      baseArr: [],
      layoutData: [],
      editItem: null,
      layoutDataStr: [],
      copyRoom: {
        isCopy: false,
        floor: {},
        room: {},
        type1: {},
        floorData: [],
        roomData: [],
        typeData: [],
        copyArr: [],
        buildingId: "",
      },
    };
  },
  props: {
    componentBuilding: Number,
    componentIsViews: {
      type: Boolean,
      default: true
    },
    componentBtn: {
      type: Boolean,
      default: true
    },
    componentFloorId: {
      type: String,
      default: '18'
    },
  },
  watch: {
    componentBuilding(val) {
      this.copyRoom.buildingId = val;
      this.isViews = this.componentIsViews;
      this.selectType();
      this.getFloor();
      this.setWH()
    },
    componentFloorId(val) {
      this.getRoomInfo();
    }
  },
  mounted() {
    // screenfull.toggle(this.$refs.mapbox);
    // this.$nextTick(() => {
    // this.rotateBox();
    // });
    if (!this.$route.params.buildingId) return;
    this.copyRoom.buildingId = this.$route.params.buildingId;
    this.isViews = this.$route.params.isViews;
    this.getRoomInfo();
    this.selectType();
    this.getFloor();
    this.setWH()
  },
  methods: {
    setWH() {
      setTimeout(() => {
        this.W = document.documentElement.clientWidth - document.querySelector('.has-logo').clientWidth;
        this.H = document.documentElement.clientHeight - 180;
      })
    },
    handleChange(e) {
      this.copyRoom.floor.id = e[1];
    },
    copyTypeChnage(e) {
      // console.log(e);
      this.copyRoom.type1 = this.copyRoom.typeData.find(
        (x) => x.dictValue == e
      );
    },

    getPdf() {
      var title = "四色图";
      // html2Canvas(document.querySelector('#pdfDom'), { //这是在界面上设置一个id
      //只下载id为pdfDom的内容
      html2Canvas(document.querySelector("#printDiv"), {}).then(function (
        canvas
      ) {
        console.log(canvas.width, canvas.height);
        let contentWidth = canvas.width;
        let contentHeight = canvas.height;
        let pageHeight = (contentWidth / 592.28) * 841.89; // 一页pdf显示html页面生成的canvas高度;
        let leftHeight = contentHeight; //未生成pdf的html页面高度
        let position = 0; //pdf页面偏移
        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        let imgWidth = 595.28;
        let imgHeight = (592.28 / contentWidth) * contentHeight;
        let pageData = canvas.toDataURL("image/jpeg", 1.0);
        let PDF = new JsPDF("", "pt", "a4");
        console.log(pageData, "111");
        // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
        } else {
          while (leftHeight > 0) {
            PDF.addImage(pageData, "JPEG", 20, position, imgWidth, imgHeight);
            leftHeight -= pageHeight;
            position -= 841.89;
            if (leftHeight > 0) {
              PDF.addPage();
            }
          }
        }
        PDF.save(title + ".pdf");
      });
    },
    // 双击
    dbClickEvent(e, item) {
      if (this.isViews) return;
      if (this.beforEle && this.beforEle != e.target) {
        this.beforeTime = 0;
        this.beforEle = null;
      }
      if (this.beforeTime && new Date().getTime() - this.beforeTime < 500) {
        console.log("dbclick");
        this.changeName(item);
        this.beforeTime = 0;
        this.beforEle = null;
      }
      this.beforeTime = new Date().getTime();
      this.beforEle = e.target;
    },
    // 选择楼层
    getFloor() {
      this.copyRoom.type = "floor";
      this.showPicker = true;
      this.copyRoom.roomData = [];
      if (this.copyRoom.floorData.length) {
        this.copyRoom.copyArr = this.copyRoom.floorData;
        return;
      }
      return getFun(`/risk/plan/floor/list/${this.copyRoom.buildingId}`)
        .then((res) => {
          this.copyRoom.floorData = res.data;
          this.copyRoom.copyArr = this.copyRoom.floorData;
        })
        .catch(() => {
          this.$message.error("加载失败,请稍后再试");
        });
    },
    // 选择房间
    seletRoom(bol) {
      if (!bol) return;
      this.copyRoom.type = "room";
      this.showPicker = true;
      if (!this.copyRoom.floor) {
        this.$message.error("先选择楼层");
        return;
      }
      if (this.copyRoom.roomData.length) {
        this.copyRoom.copyArr = this.copyRoom.roomData;
        return;
      }
      getFun(`/risk/plan/room/list/${this.copyRoom.floor.id}`)
        .then((res) => {
          this.copyRoom.roomData = res.data;
          this.copyRoom.copyArr = this.copyRoom.roomData;
        })
        .catch(() => {
          this.$message.error("加载失败,请稍后再试");
        });
    },
    selectType() {
      // selectType
      this.copyRoom.type = "type";
      this.showPicker = true;
      if (this.copyRoom.typeData.length) {
        this.copyRoom.copyArr = this.copyRoom.typeData;
        return;
      }
      getFun("/dict/data/list/all", {
        dictType: "risk_plan_base_room",
      }).then((res) => {
        this.copyRoom.typeData = res.data;
        this.copyRoom.copyArr = this.copyRoom.typeData;
      });
    },
    orientationChange() {
      if (window.orientation === 180 || window.orientation === 0) {
        console.log("竖屏状态！");
      }
      if (window.orientation === 90 || window.orientation === -90) {
        console.log("横屏状态！");
      }
      // let width = document.documentElement.clientWidth//页面宽度
      //    let  height = document.documentElement.clientHeight//页面高度
      //     console.log('width==>>',width)
      //     console.log('height==>>',height)
      this.rotateBox();
    },
    initRotate() {
      let width = document.documentElement.clientWidth, //页面宽度
        height = document.documentElement.clientHeight, //页面高度
        wrapper = this.$refs.mapmidbox, //需要横屏的块，与全屏的块要区分开，不区分全屏的块无法显示横屏效果
        style = ""; //样式
      console.log("width==>>", width);
      console.log("height==>>", height);
      style += "width:" + height + "px;";
      style += "height:" + width + "px;";
      style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
      // 注意旋转中点的处理
      style +=
        "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
      style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
      wrapper.style.cssText = style;
    },
    rotateBox() {
      // this.isScreenFull = !this.isScreenFull;//是否全屏状态
      let width = document.documentElement.clientWidth, //页面宽度
        height = document.documentElement.clientHeight, //页面高度
        wrapper = this.$refs.mapmidbox, //需要横屏的块，与全屏的块要区分开，不区分全屏的块无法显示横屏效果
        style = ""; //样式
      console.log("width==>>", width);
      console.log("height==>>", height);
      // if (height < width) {//注意原来就是宽屏时不用横屏
      //     return;
      // }
      if (height < width) {
        // 横屏
        style += "width:" + height + "px;";
        style += "height:" + width + "px;";
        style += "-webkit-transform: rotate(0deg); transform: rotate(0deg);";
        // 注意旋转中点的处理
        style +=
          "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
        style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
      } else {
        // 竖屏
        // style += "width:" + height + "px;";
        // style += "height:" + width + "px;";
        // style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
        // // 注意旋转中点的处理
        // style +=
        // "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
        // style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
        style += "width:100%";
        style += "height:100%;";
        style += "-webkit-transform: rotate(0); transform: rotate(0);";
        style += "-webkit-transform-origin: 0 0;";
        style += "transform-origin: 0 0;";
      }
      console.log("style==>>", style);
      wrapper.style.cssText = style;
    },
    getRoomInfo() {
      let data = {
        floorId: this.$route.params.floorId || this.componentFloorId,
      };
      getFun("/ledger/room/list", data)
        .then((res) => {
          if (res.code == 200) {
            this.layout = [];
            this.layoutData = res.data;
            this.layoutDataStr = JSON.stringify(this.layoutData);
            if (!res.data.length) {
              this.updateLayoutHeight();
              return;
            }
            res.data.forEach((item) => {
              if (item.position) {
                item.position = JSON.parse(item.position);
                item.position.i = item.id;
                item.position.id = item.id;
                if (!this.showHeader) {
                  item.position.isDraggable = false;
                  item.position.isResizable = false;
                }
                if (!this.isViews) {
                  //添加页面不显示颜色
                  item.position.c = "#e6e5e5";
                } else {
                  item.position.c = item.color;
                }
                this.layout.push(item.position);
                this.updateLayoutHeight();
              }
            });
            // console.log(res.data);
          }
        })
        .catch((err) => {
          console.log("err==>>", err);
        });

      getFun("/dict/data/list/all", {
        dictType: "risk_plan_room_type",
      }).then((res) => {
        this.roomArr = res.data;
      });
      getFun("/dict/data/list/all", {
        dictType: "risk_plan_base_room",
      }).then((res) => {
        this.baseArr = res.data;
      });
    },
    // 增加
    addItem() {
      this.roomType = "";
      this.roomName = "";
      this.title = "创建房间";
      this.isRoom = true;
      this.show = true;
      this.isBase = false;
      this.copyRoom.isCopy = false;
    },
    // 添加其他
    addOther() {
      this.isRoom = false;
      this.isBase = false;
      this.copyRoom.isCopy = false;
      this.roomType = "";
      this.roomName = "";
      this.title = "创建其他";
      this.show = true;
    },
    // 复制房间
    toCopyRoom() {
      this.roomType = "";
      this.roomName = "";
      this.title = "复制房间";
      this.show = true;
      this.copyRoom.isCopy = true;
      this.isBase = false;
      this.isRoom = false;
    },
    // 删除
    removeItem(val) {
      this.$confirm("是否删除")
        .then(() => {
          console.log(this.layout, val);
          const index = this.layout.map((item) => item.i).indexOf(val);
          this.layout.splice(index, 1);
          this.layoutData.splice(index, 1);
          this.updateLayoutHeight();
          // postFun("/ledger/room/delete/" + val)
          //   .then(res => {
          //     if (res.code == 200) {
          //       Toast.success("删除成功");
          //       this.getRoomInfo();
          //     }
          //   })
          //   .catch(err => {
          //   });
        })
        .catch(() => {
          // on cancel
        });
    },
    // 修改名称
    changeName(item) {
      this.editItem = item;
      switch (item.type) {
        case "基础设施":
          this.addBase();
          break;
        case "thorough":
          this.addOther();
          break;
        default:
          this.addItem();
          this.roomType = item.type;
      }
      this.title = "编辑";
      this.roomName = item.name;
    },
    //添加基础设施
    addBase() {
      this.roomType = "";
      this.roomName = "";
      this.title = "添加基础设备";
      this.isRoom = false;
      this.isBase = true;
      this.show = true;
    },
    // 更新画布高度
    updateLayoutHeight() {
      const layoutData = this.layoutData.filter((x) => x.position); //以防没有position报错
      const max = Math.max(
        ...layoutData.map((x) => {
          let data = x.position;
          if (typeof x.position == "string") {
            // x.position.y + x.position.h
            data = JSON.parse(x.position);
          }
          return data.y + data.h;
        })
      );
      // 设置layout高度,使页面可以滚动
      const maxTop = max * 30;
      this.layoutHeight = (maxTop > this.H ? maxTop : this.H) + 30;
      console.log(this.layoutHeight);
    },
    // 移动后的事件
    movedEvent(item, newX, newY) {
      item.x = (newX / this.W) * 12;
      item.y = newY / 30;
    },
    // 拖动
    onDrag(item, x, y) {
      // 拖动时判断layoutHeight是否需要更新
      item.x = (x / this.W) * 12;
      item.y = y / 30;
      debounce(this.updateLayoutHeight)();
    },
    // 调整大小后的事件
    resizedEvent(item, x, y, w, h) {
      item.w = (w / this.W) * 12;
      item.h = h / 30;
      item.x = (x / this.W) * 12;
      item.y = y / 30;
    },
    onResize() {
      debounce(this.updateLayoutHeight)();
    },
    // 激活
    onActivated(item) {
      if (this.isViews) return;
      if (this.beforItem) {
        this.beforItem.zIndex = 1;
      }
      item.zIndex = 10;
      this.beforItem = item;
      this.$forceUpdate();
    },

    //关闭
    async close() {
      this.layoutData.forEach((item) => {
        if (
          typeof item.position == "object" &&
          Object.prototype.toString.call(item.position) === "[object Object]"
        ) {
          item.position = JSON.stringify(item.position);
        }
      });
      this.$dialog
        .confirm({
          title: "提示",
          message: "是否保存已修改内容？",
        })
        .then(() => {
          this.confim();
          setTimeout(() => {
            history.go(-1);
          }, 500);
          // on confirm
        })
        .catch(() => {
          history.go(-1);
          // on cancel
        });
    },
    // 确定 执行批量编辑保存
    confim: debounce(function () {
      //修改房间后返回清掉房间的值
      var inherenForm = JSON.parse(sessionStorage.getItem("inherenForm"));
      if (inherenForm) {
        inherenForm.roomName = "";
        inherenForm.roomId = "";
        sessionStorage.setItem("inherenForm", JSON.stringify(inherenForm));
      }
      //保存
      let data = this.layoutData;
      if (!data.length) {
        this.$message.info("请先添加房间");
        return;
      }
      data.forEach((item) => {
        if (
          typeof item.position == "object" &&
          Object.prototype.toString.call(item.position) === "[object Object]"
        ) {
          item.position = JSON.stringify(item.position);
        }
      });
      console.log("this.$route.params.floorId==>>", this.$route.params.floorId);
      postFun(
        "/ledger/room/update/batch?floorId=" + this.$route.params.floorId,
        data
      )
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("保存成功");
            this.getRoomInfo();
          }
        })
        .catch((err) => {
          console.log("err==>>", err);
        });
    }),
    //保存房间名称
    async saveRoomName() {
      this.show = false;
      if (this.copyRoom.isCopy) {
        if (
          !this.copyRoom.room.id ||
          !this.copyRoom.floor.id ||
          !this.copyRoom.type1.dictLabel
        ) {
          Toast.fail({
            title: "提示",
            forbidClick: true,
            message: "请填写完整！",
          });
          return false;
        }
        await this.saveCopy();
      }
      if (this.roomName == "") {
        Toast.fail({
          title: "提示",
          forbidClick: true,
          message: "请输入名称！",
        });
        return;
      }
      if (this.editItem) {
        const editItem = this.layout.find((x) => x.i == this.editItem.i);
        console.log(this.layoutData);
        const layoutData = this.layoutData.find((x) => x.id == editItem.i);
        if (layoutData) {
          layoutData.name = this.roomName;
        }
        if (editItem) {
          editItem.name = this.roomName;
          editItem.type = this.roomType;
          this.editItem = {};
          return;
        }
        this.editItem = {};
      }
      var i =
        this.layout && this.layout.length > 0
          ? Math.max.apply(
            Math,
            this.layout.map((item) => {
              return item.id;
            })
          ) + 1
          : 1;
      this.layOutItem = {
        x: (this.layout.length * 2) % (this.colNum || 12),
        y: this.layout.length + (this.colNum / 2 || 12),
        w: 2,
        h: 3,
        zIndex: 10,
        i: this.copyRoom.isCopy ? this.copyRoom.id : i,
        id: this.copyRoom.isCopy ? this.copyRoom.id : i,
        name: this.roomName,
        c: "#e6e5e5",
        type: this.isRoom
          ? this.roomType
          : this.isBase
            ? "基础设施"
            : "thorough",
        isDraggable: true,
        isResizable: true,
      };
      this.beforItem = this.layOutItem;
      this.layout.push(this.layOutItem);

      let data = {
        floorId: this.$route.params.floorId ? this.$route.params.floorId : "18",
        name: this.roomName,
        position: this.layOutItem,
        roomType: this.isRoom
          ? this.roomType
          : this.isBase
            ? "基础设施"
            : "9999",
      };
      if (this.copyRoom.isCopy) {
        data.id = this.copyRoom.id;
      }

      this.layoutData.push(data);
      this.resetCopy();
      this.updateLayoutHeight();
      // postFun("/ledger/room/save", data)
      //   .then(res => {
      //     if (res.code == 200) {
      //       // Toast.success('保存成功');
      //       this.getRoomInfo();
      //       this.roomType = "";
      //       this.roomName = "";
      //     }
      //   })
      //   .catch(err => {
      //   });
    },
    resetCopy() {
      const copyRoom = {
        isCopy: false,
        floor: {},
        room: {},
        type1: {},
        copyArr: [],
        id: "",
      };
      this.copyRoom = { ...this.copyRoom, ...copyRoom };
      // this.copyRoom.isCopy = false;
      // this.copyRoom.floor = {};
      // this.copyRoom.room = {};
      // this.copyRoom.type = {};
      // this.copyRoom.copyArr = [];
    },
    cancelDraw() {
      this.resetCopy();
      this.show = false;
    },
    // saveCopy
    saveCopy() {
      const planId = sessionStorage.getItem("planId");
      return postFun(`/risk/plan/copy/room/${planId}`, {
        id: this.copyRoom.room.id,
        floorId: this.$route.params.floorId,
        name: this.roomName,
        roomType: this.copyRoom.type1.dictType,
      }).then((res) => {
        this.copyRoom.id = res.data;
      });
    },
    cancelDialog() {
      this.roomType = "";
      this.roomName = "";
      this.editItem = null;
      this.show = false;
    },
    onConfirm(value) {
      if (this.isRoom) {
        this.roomType = value.dictValue;
      } else if (this.copyRoom.isCopy) {
        if (this.copyRoom.type == "floor") {
          this.copyRoom.floorData.forEach((val) => {
            if (val.name == value[0]) {
              this.copyRoom.floor = val.children.find(
                (x) => x.name === value[1]
              );
            }
          });
        } else if (this.copyRoom.type == "room") {
          this.copyRoom.room = value;
        } else {
          this.copyRoom.type1 = value;
        }
      } else {
        this.roomName = value.dictValue;
      }
      this.showPicker = false;
    },
  },
};
</script>

<style scoped>
.router-view {
  padding-bottom: 0px !important;
}

.wrap {
  /* height: 100vh; */
  width: 105%;
  position: relative;
}

.north {
  position: absolute;
  display: inline-block;
  top: 30px;
  right: 100px;
  z-index: 999;
}

.north img {
  width: 40px;
}

.footer {
  /* position: fixed; */
  /* left: 0; */
  /* bottom: 0; */
  font-size: 0.3rem;
  font-weight: 600;
}

.riskTab {
  display: inline-block;
  width: 50px;
  height: 20px;
  margin: 0 10px 0px 15px;
  border-radius: 5px;
  vertical-align: middle;
}

.type1 {
  background-color: #ff4433;
}

.type2 {
  background-color: #ff9800;
}

.type3 {
  background-color: #ffff00;
}

.type4 {
  background-color: #0091ea;
}

.layoutJSON {
  background: #ddd;
  border: 1px solid black;
  padding: 10px;
}

.columns {
  -moz-columns: 120px;
  -webkit-columns: 120px;
  columns: 120px;
}

/*************************************/
.setBtns {
  /* position: fixed;
    top:auto;
    right: auto;
    left: 0;
    bottom: 0; */
  margin-top: 10px;
  font-size: 0.3rem;
  padding: 10px;
  vertical-align: middle;
  display: flex;
  align-items: flex-start;
  /* flex-direction: column; */
}

.setBtns .el-button--mini {
  padding: 0 10px;
}

.remove {
  position: absolute;
  right: 2px;
  top: 0;
  cursor: pointer;
}

::v-deep .el-dialog__header {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

.vue-grid-item {
  -ms-touch-action: none;
  touch-action: none;
  box-sizing: border-box;
  /* container-type: inline-size; */
}

.vue-grid-layout {
  background: #f0f1f5;
  box-sizing: border-box;
}

.vue-grid-item:not(.vue-grid-placeholder) {
  background: #ccc;
  border: 1px solid black;
}

.vue-grid-item .resizing {
  opacity: 0.9;
}

.vue-grid-item .static {
  background: #cce;
}

.vue-grid-item .text {
  /* font-size: 6cqw; */
  display: flex;
  align-items: center;
  justify-content: center;
  /* position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; */
  margin: auto;
  height: 100%;
  width: 100%;
}

.rowText {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  font-size: 20px;
}

.vue-grid-item .no-drag {
  height: 100%;
  width: 100%;
}

.vue-grid-item .minMax {
  font-size: 12px;
}

.vue-grid-item .add {
  cursor: pointer;
}

.vue-draggable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
  background-position: bottom right;
  padding: 0 8px 8px 0;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  cursor: pointer;
}

.header {
  width: 100%;
  height: 1.2rem;
  background: #2980f7;
  text-align: center;
  line-height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.iconLeft {
  color: white;
  font-size: 12px;
  transform: scale(0.8);
}

.header span {
  color: white;
  font-size: 16px;
  line-height: 1.2rem;
  margin: auto;
  font-family: "Microsoft YaHei";
}

.iconRight {
  color: white;
  font-size: 12px;
  transform: scale(0.8);
}

.vdr {
  border-style: solid;
}
</style>
