<template>
  <div class="wrap" ref="mapmidbox">
    <van-sticky v-if="showHeader">
      <header class="header">
        <span @click="close" class="iconLeft"> 返回</span>
        <span>{{ text }}</span>
        <span @click="confim" class="iconRight" v-show="!isViews">保存</span>
        <span class="iconRight" v-show="isViews"></span>
      </header>
    </van-sticky>
    <div class="north">
      <img src="../../assets/imgs/north.png" alt="" />
    </div>
    <!-- <grid-layout
      :layout.sync="layout"
      :col-num="colNum"
      :row-height="30"
      :vertical-compact="false"
      :use-css-transforms="true"
      :prevent-collision="false"
      :preventCollision="true"
    > -->
    <!-- @click.native="changeName(item)" -->
    <!-- :static="item.static" -->

    <div :style="{ minHeight: layoutHeight + 'px' }">
      <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"
        :resizable="item.isResizable" @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' : '',
    }">
        <!-- <grid-item
        v-for="item in layout"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.i"
        :draggable="item.isDraggable"
        :resizable="item.isResizable"
        @resized="resizedEvent"
        @moved="movedEvent"
        :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="showHeader">x</span>
        <!-- <span class="remove" @click="removeItem(item.i)" v-if="item.i && isEdit">x</span> -->
        <!-- </grid-item> -->
      </vue-draggable-resizable>
    </div>
    <!-- </grid-layout> -->
    <div class="setBtns">
      <van-button @click="addItem" type="info" size="mini" v-if="!isViews">添加房间</van-button>
      <van-button @click="addOther" type="info" size="mini" v-if="!isViews">添加其他</van-button>
      <van-button @click="addBase" type="info" size="mini" v-if="!isViews">添加基础设施</van-button>
      <van-button @click="toCopyRoom" type="info" size="mini" v-if="!isViews">复制房间</van-button>
      <!-- <van-button @click="editItem" type="info" size="mini" v-if="!isViews">修改</van-button> -->
      <van-grid direction="horizontal" :column-num="2" class="footer" v-if="isViews">
        风险等级图例:
        <span class="riskTab type1"></span>重大风险
        <span class="riskTab type2"></span>较大风险
        <span class="riskTab type3"></span>一般风险
        <span class="riskTab type4"></span>低风险
      </van-grid>
    </div>
    <van-dialog v-model="show" :title="title" show-cancel-button @confirm="saveRoomName" @cancel="cancelDialog">
      <van-cell-group v-if="isRoom">
        <van-field v-model="roomName" label="房间名称" placeholder="请输入房间名称" />
        <van-field readonly clickable label="房间类型" :value="roomType" placeholder="选择房间类型" @click="showPicker = true" />
      </van-cell-group>
      <van-cell-group v-else-if="isBase">
        <van-field readonly clickable label="房间名称" :value="roomName" placeholder="选择房间名称" @click="showPicker = true" />
      </van-cell-group>
      <van-cell-group v-else-if="copyRoom.isCopy">
        <van-field readonly clickable label="楼层" :value="copyRoom.floor.name" placeholder="选择楼层" @click="getFloor" />
        <van-field readonly clickable label="房间" :value="copyRoom.room.name" placeholder="选择房间" @click="seletRoom" />
        <van-field v-model="roomName" label="房间名称" placeholder="请输入房间名称" />
        <van-field readonly clickable label="房间类型" :value="copyRoom.type.dictLabel" placeholder="选择房间类型"
          @click="selectType" />
      </van-cell-group>
      <van-cell-group v-else>
        <van-field v-model="roomName" label="名称" placeholder="请输入名称" />
      </van-cell-group>
    </van-dialog>
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker v-if="!copyRoom.isCopy" show-toolbar :columns="isRoom ? roomArr : baseArr"
        @cancel="showPicker = false" @confirm="onConfirm" value-key="dictLabel" />
      <van-picker v-else show-toolbar :columns="copyRoom.copyArr" @cancel="showPicker = false" @confirm="onConfirm"
        :value-key="copyRoom.type != 'type' ? 'name' : 'dictLabel'" />
    </van-popup>
  </div>
</template>

<script>
// import { GridLayout, GridItem } from "vue-grid-layout";
import screenfull from "screenfull";
import { Toast, Dialog } from "vant";
import { debounce } from "@/utils/common.js";
import { getFun, postFun } from "@/service/table.js";
import VueDraggableResizable from "@/components/vue-draggable-resizable/vue-draggable-resizable.vue";
import "@/components/vue-draggable-resizable/vue-draggable-resizable.css";
// 动态添加/删除
var timer;
export default {
  name: "riskView",
  components: {
    // GridLayout,
    // GridItem,
    VueDraggableResizable,
  },
  data() {
    return {
      beforEle: null,
      beforeTime: 0,
      W: 0, //当前屏幕的宽度
      H: 0, //当前屏幕的高度
      layoutHeight: 0,
      text: "房间位置绘制工具",
      isabled: true,
      layout: [
        // { x: 0, y: 0, w: 2, h: 3, i: "1",name: "办公室1",c:'#FF4433',isDraggable:false,isResizable:false,},
        // { x: 2, y: 0, w: 2, h: 3, i: "2",name: "办公室2",c:'#FF9800',isDraggable:false,isResizable:false},
        // { x: 4, y: 0, w: 2, h: 3, i: "3",name: "办公室2",c:'#FFFF00',isDraggable:false,isResizable:false},
        // { x: 6, y: 0, w: 2, h: 3, i: "4",name: "办公室2",c:'#0091EA',isDraggable:false,isResizable:false},
        // { x: 0, y: 3, w: 2, h: 3, i: "5",name: "办公室2",c:'#FF4433',isDraggable:false,isResizable:false},
      ],
      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: {},
        type: {},
        floorData: [],
        roomData: [],
        typeData: [],
        copyArr: [],
        buildingId: "",
      },
    };
  },
  props: {
    isView: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    // screenfull.toggle(this.$refs.mapbox);
    // this.$nextTick(() => {
    // this.rotateBox();
    // });
    this.copyRoom.buildingId = this.$route.params.buildingId;
    if (this._props.isView) {
      console.log("作为组件传值==>>");
      this.isViews = true;
      this.showHeader = false;
    }
    if (this.$route.params.isView) {
      this.isViews = true;
      this.initRotate();
      window.addEventListener(
        "onorientationchange" in window ? "orientationchange" : "resize",
        this.orientationChange,
        false
      );
    }
    this.getRoomInfo();
    this.W = document.documentElement.clientWidth;
    this.H = document.documentElement.clientWidth;
  },
  methods: {
    // 双击
    dbClickEvent(e, item) {
      if (this.beforEle && this.beforEle != e.target) {
        this.beforeTime = 0;
        this.beforEle = null;
      }
      if (this.beforeTime && new Date().getTime() - this.beforeTime < 500) {
        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 = [];
      debugger
      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.$toast.fail("加载失败,请稍后再试");
        });
    },
    // 选择房间
    seletRoom(name) {
      this.copyRoom.type = "room";
      this.showPicker = true;
      if (!this.copyRoom.floor) {
        this.$toast.fail("先选择楼层");
        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.$toast.fail("加载失败,请稍后再试");
        });
    },
    selectType() {
      // selectType
      this.copyRoom.type = "type";
      this.showPicker = true;
      if (this.copyRoom.typeData.length) {
        this.copyRoom.copyArr = this.copyRoom.typeData;
        return;
      }
      getFun("/risk/plan/dict/data/list", {
        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.$route.params.floorId : "18",
      };
      getFun("/ledger/room/list", data)
        .then((res) => {
          if (res.code == 200) {
            this.layout = [];
            this.layoutData = res.data;
            this.layoutDataStr = JSON.stringify(this.layoutData);
            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("/risk/plan/dict/data/list", {
        dictType: "risk_plan_room_type",
      }).then((res) => {
        this.roomArr = res.data;
      });
      getFun("/risk/plan/dict/data/list", {
        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.$dialog
        .confirm({
          title: "提示",
          message: "是否删除",
        })
        .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;
      this.copyRoom.isCopy = false;
    },

    // 更新画布高度
    updateLayoutHeight() {
      const max = Math.max(
        ...this.layoutData.map((x) => {
          let data = x.position;
          if (!data) return 0;
          if (typeof x.position == "string") {
            data = JSON.parse(x.position);
          }
          return data.y + data.h;
        })
      );
      // 设置layout高度,使页面可以滚动
      const maxTop = max * 30;
      this.layoutHeight = maxTop > this.H ? maxTop : this.H;
    },
    // 移动后的事件
    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;
      item.x = (x / this.W) * 12;
      item.y = y / 30;
      debounce(this.updateLayoutHeight)();
      // if (top > this.layoutHeight) {
      //   this.layoutHeight = top;
      // }
      // console.log(top, this.layoutHeight);
    },
    // 调整大小后的事件
    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.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 () {
      this.$toast.loading({
        message: "处理中...",
        forbidClick: true,
        loadingType: "spinner",
        duration: 3,
      });

      //修改房间后返回清掉房间的值
      if (sessionStorage.getItem("inherenForm")) {
        var inherenForm = JSON.parse(sessionStorage.getItem("inherenForm"));
        if (inherenForm) {
          inherenForm.roomName = "";
          inherenForm.roomId = "";
          sessionStorage.setItem("inherenForm", JSON.stringify(inherenForm));
        }
      }
      //保存
      let data = this.layoutData;
      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) {
            Toast.success("保存成功");
            this.getRoomInfo();
          }
        })
        .catch((err) => {
          console.log("err==>>", err);
        });
    }),
    //保存房间名称
    async saveRoomName() {
      if (this.copyRoom.isCopy) {
        if (
          !this.copyRoom.room.id ||
          !this.copyRoom.floor.id ||
          !this.copyRoom.type.dictCode
        ) {
          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);
        const layoutData = this.layoutData.find(
          (x) => x.position.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: {},
        type: {},
        copyArr: [],
        id: "",
      };
      this.copyRoom = { ...this.copyRoom, ...copyRoom };
      // this.copyRoom.isCopy = false;
      // this.copyRoom.floor = {};
      // this.copyRoom.room = {};
      // this.copyRoom.type = {};
      // this.copyRoom.copyArr = [];
    },
    // 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.type.dictType,
      }).then((res) => {
        this.copyRoom.id = res.data;
      });
    },
    cancelDialog() {
      this.roomType = "";
      this.roomName = "";
      this.editItem = null;
    },
    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.type = value;
        }
      } else {
        this.roomName = value.dictValue;
      }
      this.showPicker = false;
    },
  },
};
</script>

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

.wrap {
  height: 100vh;
  width: 100vw;
  position: relative;
}

.north {
  /* position: fixed; */
  position: absolute;
  display: inline-block;
  top: 1.5rem;
  right: 0.5rem;
  z-index: 999;
}

.north img {
  width: 15px;
  height: 30px;
}

.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;
}

.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 .van-button--mini {
  padding: 0 10px;
}

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

::v-deep .van-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;
}

.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-lr;
  -webkit-writing-mode: vertical-lr;
  font-size: 18px;
}

.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>
