<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"
    >
      <grid-item
        v-for="item in layout"
        :static="item.static"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.i"
        :isDraggable="item.isDraggable"
        :isResizable="item.isResizable"
        @resized="resizedEvent"
        @moved="movedEvent"
        @click.native="changeName(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="showHeader"
          >x</span
        >
        <!-- <span class="remove" @click="removeItem(item.i)" v-if="item.i && isEdit">x</span> -->
      </grid-item>
    </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="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>
        <van-field v-model="roomName" label="名称" placeholder="请输入名称" />
      </van-cell-group>
    </van-dialog>
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        show-toolbar
        :columns="isRoom ? roomArr : baseArr"
        @cancel="showPicker = false"
        @confirm="onConfirm"
        value-key="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";
// 动态添加/删除
export default {
  name: "riskView",
  components: {
    GridLayout,
    GridItem
  },
  data() {
    return {
      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: []
    };
  },
  props: {
    isView: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    // screenfull.toggle(this.$refs.mapbox);
    // this.$nextTick(() => {
    // this.rotateBox();
    // });
    console.log("floorId==>>", this.$route.params.floorId);
    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();
  },
  methods: {
    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 => {
              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);
            });
            // console.log('layout==>>',this.layout)
          }
        })
        .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;
    },
    // 添加其他
    addOther() {
      this.isRoom = false;
      this.isBase = false;
      this.roomType = "";
      this.roomName = "";
      this.title = "创建其他";
      this.show = true;
    },
    // 删除
    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);
          // postFun("/ledger/room/delete/" + val)
          //   .then(res => {
          //     if (res.code == 200) {
          //       Toast.success("删除成功");
          //       this.getRoomInfo();
          //     }
          //   })
          //   .catch(err => {
          //   });
        })
        .catch(() => {
          // on cancel
        });
    },
    // 修改名称
    changeName(item){
      debugger
      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;
    },
    // 移动后的事件
    movedEvent(i, newX, newY) {
      // console.log(this.layOutItem, "movedEvent");
      // this.layOutItem.x = newX;
      // this.layOutItem.y = newY;
      // console.log('layOutItem==>>',this.layOutItem)
      // console.log('this.layout==>>',this.layout)
    },
    // 调整大小后的事件
    resizedEvent: function(i, newH, newW) {
      // console.log(this.layOutItem, "resizedEvent");
      // this.layOutItem.w = newW;
      // this.layOutItem.h = newH;
      // console.log('layOutItem==>>',this.layOutItem)
      // console.log('this.layout==>>',this.layout)
    },
    //关闭
    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
      });

      //修改房间后返回清掉房间的值
      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);
        });
    }),
    //保存房间名称
    saveRoomName() {
      // this.confim();
      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,
        i: i,
        id: i,
        name: this.roomName,
        c: "#e6e5e5",
        type: this.isRoom
          ? this.roomType
          : this.isBase
          ? "基础设施"
          : "thorough",
        isDraggable: true,
        isResizable: true
      };
      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"
      };
      this.layoutData.push(data);
      // postFun("/ledger/room/save", data)
      //   .then(res => {
      //     if (res.code == 200) {
      //       // Toast.success('保存成功');
      //       this.getRoomInfo();
      //       this.roomType = "";
      //       this.roomName = "";
      //     }
      //   })
      //   .catch(err => {
      //   });
    },
    cancelDialog() {
      this.roomType = "";
      this.roomName = "";
      this.editItem = null
    },
    onConfirm(value) {
      if (this.isRoom) {
        this.roomType = value.dictValue;
      } 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: 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-rl;
  -webkit-writing-mode: vertical-rl;
}
.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);
}
</style>
