<template>
  <div class="app-container">
    <div class="screen">
      <div class="screen-left">
        <div class="screen-left-tit">
          <i class="el-icon-info" style="color: #3e9dff" />
          鼠标拖拽模块数据进入大屏
        </div>
        <!-- 左边拖拽列表 -->
        <div class="screen-left-main">
          <template v-for="item in leftData">
            <div :key="item.id">
              <div
                class="screen-left-main-text"
                @click="item.show = !item.show"
              >
                {{ item.title }}({{
                  item.subdata.filter((v) => v.subShow).length
                }})
                <i v-if="!item.show" class="el-icon-caret-bottom" />
                <i v-else class="el-icon-caret-top" />
              </div>
              <div>
                <template v-for="v in item.subdata">
                  <draggable
                    v-if="item.show"
                    :key="v.id"
                    v-model="item.subdata"
                    :group="{
                      name: 'site',
                      pull: true,
                      put: false,
                    }"
                    animation="300"
                    drag-class="dragClass"
                    ghost-class="ghostClass"
                    chosen-class="chosenClass"
                    @start="(e) => handlestart(e, v)"
                    @unchoose="startData = []"
                    @end="onEnd"
                  >
                    <div v-if="v.subShow" class="screen-left-main-item">
                      <div class="screen-left-main-item-tit">
                        {{ v.subtitle }}
                      </div>
                      <div class="screen-left-main-item-img">
                        <img :src="v.imgUrl" alt="" />
                      </div>
                    </div>
                  </draggable>
                </template>
              </div>
            </div>
          </template>
        </div>
      </div>
      <!-- 右边 -->
      <div class="screen-right">
        <div class="screen-right-top">
          <div class="screen-right-top-left">
            <el-form
              ref="formRef"
              :model="addOrUpdateForm"
              :rules="rules"
              inline
              label-position="left"
            >
              <div class="creen-right-top-form">
                <el-form-item
                  label="大屏分辨率"
                  prop="resolution"
                  style="flex: 0.5"
                  label-width="120px"
                >
                  <el-radio-group
                    v-model="addOrUpdateForm.resolution"
                    @change="changeResolution"
                  >
                    <el-radio :label="1">1920*1080</el-radio>
                    <el-radio :label="2">3840*2160</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item
                  label="多个屏切换展示"
                  prop="cut"
                  style="flex: 0.5; margin-left: 20px"
                  label-width="120px"
                >
                  <el-radio-group v-model="addOrUpdateForm.cut">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
              <el-form-item
                v-if="addOrUpdateForm.cut"
                label="切换屏标题"
                label-width="120px"
              >
                <el-form-item label="标题1" prop="titlename1">
                  <el-input
                    v-model="addOrUpdateForm.titlename1"
                    clearable
                    placeholder="请输入标题内容"
                    @input="handleTitleInput1"
                  />
                </el-form-item>
                <el-form-item label="标题2" prop="titlename2">
                  <el-input
                    v-model="addOrUpdateForm.titlename2"
                    clearable
                    placeholder="请输入标题内容"
                    @input="handleTitleInput2"
                  />
                </el-form-item>
                <el-form-item label="标题3">
                  <el-input
                    v-model="addOrUpdateForm.titlename3"
                    clearable
                    placeholder="请输入标题内容"
                    @input="handleTitleInput3"
                  />
                </el-form-item>
              </el-form-item>
            </el-form>
          </div>
          <div class="screen-right-top-right">
            <el-button
              type="primary"
              icon="el-icon-copy-document"
              plain
              style="width: 164px"
              @click="goScreenHome"
              >全屏展示</el-button
            >
            <el-button type="primary" style="width: 164px" @click="submit"
              >保存内容</el-button
            >
          </div>
        </div>
        <!-- 主体 -->
        <div class="screen-right-main" :style="`width:${bigBoxWidth}px`">
          <div class="screen-right-main-title">
            <div v-if="addOrUpdateForm.cut" style="display: flex">
              <div
                class="screen-right-main-title-item"
                :class="{ active: active === 1 }"
                :style="{
                  backgroundImage: `url(${
                    active === 1 ? title_active : title_img
                  })`,
                }"
                @click="active = 1"
              >
                {{ titlebox1 }}
              </div>
              <div
                class="screen-right-main-title-item"
                :class="{ active: active === 2 }"
                :style="{
                  backgroundImage: `url(${
                    active === 2 ? title_active : title_img
                  })`,
                }"
                @click="active = 2"
              >
                {{ titlebox2 }}
              </div>
              <div
                class="screen-right-main-title-item"
                :class="{ active: active === 3 }"
                :style="{
                  backgroundImage: `url(${
                    active === 3 ? title_active : title_img
                  })`,
                }"
                @click="active = 3"
              >
                {{ titlebox3 }}
              </div>
            </div>
          </div>
          <div
            class="screen-right-main-box"
            @dragover.prevent="dragOver"
            @drop="onDropA"
          >
            <div class="screen-right-main-bigbox">
              <div
                v-for="(item, index) in getBgBoxItemList"
                :key="item.id"
                class="screen-right-item-box"
                :class="`item_box_${index}`"
                :style="[
                  {
                    width: item.boxWidth + 'px',
                    height: item.boxHeight + 'px',
                  },
                ]"
              >
                <div class="screen-right-item-box-1" />
              </div>
            </div>
            <template v-for="item in newrightData">
              <VueDraggableResizable
                :key="item.id + '' + uuuuuuekey"
                :is-conflict-check="true"
                :handles="['tm', 'bm', 'ml', 'mr']"
                :parent="true"
                :lock-aspect-ratio="true"
                :x="item.x"
                :y="item.y"
                :w="item.w"
                :h="item.h"
                :grid="[boxWidth, boxHeight]"
                :resizable="false"
                :debug="false"
                :min-width="200"
                :min-height="200"
                :snap="true"
                :snap-tolerance="10"
                @dragging="(left, top) => onDrag(left, top, item)"
                @resizing="
                  (left, top, width, height) =>
                    onResize(left, top, width, height, item)
                "
                @dragstop="(left, top) => dragstop(item.id, left, top)"
              >
                <div class="screen-right-item-img">
                  <img :src="item.imgUrl" alt="" />
                  <div class="delete-icon" @click="handleDelete(item)">
                    <i class="el-icon-delete-solid" />
                  </div>
                </div>
              </VueDraggableResizable>
            </template>
          </div>
        </div>
        <!-- {{ newrightData }} -->
      </div>
    </div>
  </div>
</template>
<script>
import draggable from "vuedraggable";
import VueDraggableResizable from "vue-draggable-resizable-gorkys/src/components/vue-draggable-resizable.vue";
// 导入默认样式
import "vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css";
export default {
  components: {
    draggable,
    VueDraggableResizable,
  },
  data() {
    return {
      title_active: require("../../assets/title_active.png"), // 标题高亮图片
      title_img: require("../../assets/title_img.png"), // 标题默认图片
      addOrUpdateForm: {
        resolution: 2, // 1是1920,2是3840
        cut: true,
        titlename1: "",
        titlename2: "",
        titlename3: "",
      },
      rules: {
        resolution: [
          {
            required: true,
            message: "请选择大屏分辨率",
            trigger: "change",
          },
        ],
        cut: [
          {
            required: true,
            message: "请选择是否多屏切换",
            trigger: "change",
          },
        ],
        titlename1: [
          {
            required: true,
            message: "请输入标题内容",
            trigger: "blur",
          },
        ],
        titlename2: [
          {
            required: true,
            message: "请输入标题内容",
            trigger: "blur",
          },
        ],
      },
      leftData: [
        {
          title: "航班数据",
          show: true,
          id: 1,
          subdata: [
            {
              id: 11,
              subtitle: "今日航班情况",
              imgUrl: require("../../assets/screen_img/hbsj/jrhbqk.png"),
              x: 0,
              y: 0,
              w: 2,
              h: 1,
              subShow: true,
            },
            {
              id: 12,
              subtitle: "今日国际/地区航班",
              imgUrl: require("../../assets/screen_img/hbsj/jrgjdqhb.png"),
              x: 200,
              y: 200,
              w: 1,
              h: 2,
              subShow: true,
            },
            {
              id: 13,
              subtitle: "今日进港航班",
              imgUrl: require("../../assets/screen_img/hbsj/jrjghb.png"),
              x: 200,
              y: 200,
              w: 1,
              h: 2,
              subShow: true,
            },
            {
              id: 14,
              subtitle: "今日出港航班",
              imgUrl: require("../../assets/screen_img/hbsj/jrcghb.png"),
              subShow: true,
              w: 1,
              h: 2,
            },
            {
              id: 15,
              subtitle: "今日省内其他机场航班情况",
              imgUrl: require("../../assets/screen_img/hbsj/jrsnqtjchbqk.png"),
              subShow: true,
              w: 1,
              h: 3,
            },
          ],
        },
        {
          title: "行为记录数据",
          show: true,
          id: 2,
          subdata: [
            {
              id: 21,
              subtitle: "今日目的地人员数据大到小 前五",
              imgUrl: require("../../assets/screen_img/xwjlsj/jrmddrysjddxqw.png"),
              x: 200,
              y: 200,
              w: 1,
              h: 1,
              subShow: true,
            },
            // {
            //   id: 22,
            //   subtitle: "今日目的地人员数据情况",
            //   imgUrl: require("../../assets/screen_img/xwjlsj/jrmddrysjqk.png"),
            //   x: 200,
            //   y: 200,
            //   w: 2,
            //   h: 2,
            //   subShow: true,
            // },
            {
              id: 23,
              subtitle: "今日人员、车辆行为数据",
              imgUrl: require("../../assets/screen_img/xwjlsj/jrryclxwsj.png"),
              x: 200,
              y: 200,
              w: 1,
              h: 2,
              subShow: true,
            },
            {
              id: 24,
              subtitle: "今日人员/车辆行为预警情况",
              imgUrl: require("../../assets/screen_img/xwjlsj/jrryclxwyjqk.png"),
              x: 200,
              y: 200,
              w: 1,
              h: 1,
              subShow: true,
            },
            {
              id: 25,
              subtitle: "今日人员行为数据用户户籍分布 前九",
              imgUrl: require("../../assets/screen_img/xwjlsj/jrryxwsjyhhjfbqj.png"),
              x: 200,
              y: 200,
              w: 1,
              h: 1,
              subShow: true,
            },
            {
              id: 26,
              subtitle: "今日人员行为数据占比情况",
              imgUrl: require("../../assets/screen_img/xwjlsj/jrryxwsjzbqk.png"),
              x: 200,
              y: 200,
              w: 2,
              h: 1,
              subShow: true,
            },
            {
              id: 27,
              subtitle: "今日人员进出港情况",
              imgUrl: require("../../assets/screen_img/xwjlsj/jreyjcgqk.png"),
              x: 200,
              y: 200,
              w: 1,
              h: 1,
              subShow: true,
            },
            {
              id: 28,
              subtitle: "今日始发地人员数据大到小 前五",
              imgUrl: require("../../assets/screen_img/xwjlsj/jrsfdrysjcddxqw.png"),
              x: 200,
              y: 200,
              w: 1,
              h: 1,
              subShow: true,
            },
          ],
        },
        {
          title: "预警数据",
          show: true,
          id: 3,
          subdata: [
            {
              id: 31,
              subtitle: "本月各预警等级预警情况",
              imgUrl: require("../../assets/screen_img/yjsj/bygyjdjyjqk.png"),
              x: 200,
              y: 200,
              w: 1,
              h: 1,
              subShow: true,
            },
            {
              id: 32,
              subtitle: "本月预警排名情况",
              imgUrl: require("../../assets/screen_img/yjsj/byyjpmqk.png"),
              x: 200,
              y: 200,
              w: 1,
              h: 2,
              subShow: true,
            },
            {
              id: 33,
              subtitle: "本月预警情况",
              imgUrl: require("../../assets/screen_img/yjsj/byyjqk.png"),
              x: 200,
              y: 200,
              w: 1,
              h: 1,
              subShow: true,
            },
            {
              id: 34,
              subtitle: "布控车牌号信息",
              imgUrl: require("../../assets/screen_img/yjsj/bkcphxx.png"),
              x: 200,
              y: 200,
              w: 1,
              h: 2,
              subShow: true,
            },
            {
              id: 35,
              subtitle: "布控人员信息",
              imgUrl: require("../../assets/screen_img/yjsj/bkryxx.png"),
              x: 200,
              y: 200,
              w: 1,
              h: 2,
              subShow: true,
            },
            {
              id: 36,
              subtitle: "车辆预警信息",
              imgUrl: require("../../assets/screen_img/yjsj/clyjxx.png"),
              x: 200,
              y: 200,
              w: 2,
              h: 2,
              subShow: true,
            },
            {
              id: 37,
              subtitle: "今日布控情况",
              imgUrl: require("../../assets/screen_img/yjsj/jrbkqk.png"),
              x: 200,
              y: 200,
              w: 1,
              h: 1,
              subShow: true,
            },
            {
              id: 38,
              subtitle: "今日各时段预警情况",
              imgUrl: require("../../assets/screen_img/yjsj/jrgsdyjqk.png"),
              x: 200,
              y: 200,
              w: 2,
              h: 1,
              subShow: true,
            },
            {
              id: 39,
              subtitle: "今日各预警等级预警情况",
              imgUrl: require("../../assets/screen_img/yjsj/jrgyjdjyjqk.png"),
              x: 200,
              y: 200,
              w: 1,
              h: 1,
              subShow: true,
            },
            {
              id: 310,
              subtitle: "今日人员七类重点预警情况",
              imgUrl: require("../../assets/screen_img/yjsj/jrryqlzdyjqk.png"),
              x: 200,
              y: 200,
              w: 1,
              h: 1,
              subShow: true,
            },
            {
              id: 311,
              subtitle: "今日人员预警人员户籍分布情况 前九",
              imgUrl: require("../../assets/screen_img/yjsj/jryyyjryhjfbqkqj.png"),
              x: 200,
              y: 200,
              w: 1,
              h: 1,
              subShow: true,
            },
            {
              id: 312,
              subtitle: "年度预警情况",
              imgUrl: require("../../assets/screen_img/yjsj/ndyjqk.png"),
              x: 200,
              y: 200,
              w: 2,
              h: 1,
              subShow: true,
            },
            {
              id: 313,
              subtitle: "人员预警信息",
              imgUrl: require("../../assets/screen_img/yjsj/ryyjxx.png"),
              x: 200,
              y: 200,
              w: 2,
              h: 2,
              subShow: true,
            },
          ],
        },
        {
          title: "单功能数据",
          show: true,
          id: 4,
          subdata: [
            {
              id: 41,
              subtitle: "今日单模块预警情况",
              imgUrl: require("../../assets/screen_img/dgnsj/jrdmkyjqk.png"),
              x: 200,
              y: 200,
              w: 1,
              h: 1,
              subShow: true,
            },
            {
              id: 42,
              subtitle: "今日无人机、红绿灯、冰冻雨雪监控数量",
              imgUrl: require("../../assets/screen_img/dgnsj/jrwrjhldbdyxjksl.png"),
              x: 200,
              y: 200,
              w: 1,
              h: 2,
              subShow: true,
            },
            {
              id: 43,
              subtitle: "年度单模块预警情况",
              imgUrl: require("../../assets/screen_img/dgnsj/nddmkyjqk.png"),
              x: 200,
              y: 200,
              w: 2,
              h: 1,
              subShow: true,
            },
            // {
            //   id: 44,
            //   subtitle: "无人机、红绿灯、冰冻雨雪监控情况",
            //   imgUrl: require("../../assets/screen_img/dgnsj/wrjhldbdyxjkqk.png"),
            //   x: 200,
            //   y: 200,
            //   w: 2,
            //   h: 2,
            //   subShow: true,
            // },
            {
              id: 45,
              subtitle: "无人机反制记录",
              imgUrl: require("../../assets/screen_img/dgnsj/wrjfzjl.png"),
              x: 200,
              y: 200,
              w: 1,
              h: 2,
              subShow: true,
            },
            {
              id: 46,
              subtitle: "无人机反制驱离情况",
              imgUrl: require("../../assets/screen_img/dgnsj/wrjfzqlqk.png"),
              x: 200,
              y: 200,
              w: 1,
              h: 1,
              subShow: true,
            },
          ],
        },
        {
          title: "值班数据",
          show: true,
          id: 5,
          subdata: [
            {
              id: 51,
              subtitle: "今日值班信息",
              imgUrl: require("../../assets/screen_img/zbsj/jrzbqk.png"),
              x: 200,
              y: 200,
              w: 1,
              h: 1,
              subShow: true,
            },
          ],
        },
      ],
      uuuuuuekey: "",
      rightData: {
        1: [],
        2: [],
        3: [],
      },
      startData: [],
      x: 0,
      y: 0,
      boxWidth: 1344 / 4,
      boxHeight: 693 / 3,
      bigBoxWidth: 1344, // 可拖动的盒子宽度
      bigBoxHeight: 693, // 可拖动的盒子高度
      active: 1, // 切换标题
      // 大屏面板的标题
      titlebox1: "标题1",
      titlebox2: "标题2",
      titlebox3: "标题3",
      getBgBoxItemList: [], // 拖拽格子列表
    };
  },
  computed: {
    newrightData() {
      return this.rightData[this.active];
    },
  },
  mounted() {
    this._getBgBoxItemList(this.addOrUpdateForm.resolution);
  },
  created() {
    const screenData = JSON.parse(localStorage.getItem("screenData"));
    if (screenData) {
      this.addOrUpdateForm = screenData?.addOrUpdateForm;
      this.rightData = screenData?.rightData;
      screenData.addOrUpdateForm.titlename1
        ? (this.titlebox1 = screenData.addOrUpdateForm.titlename1)
        : "";
      screenData.addOrUpdateForm.titlename2
        ? (this.titlebox2 = screenData.addOrUpdateForm.titlename2)
        : "";
      screenData.addOrUpdateForm.titlename3
        ? (this.titlebox3 = screenData.addOrUpdateForm.titlename3)
        : "";
      this.handleLeftIfShow();
    }
  },
  methods: {
    // 开始拖拽事件
    handlestart(e, item) {
      // 开始拖拽拿到数据
      this.startData = item;
    },
    // 拖拽结束事件
    onEnd() {
      this.startData = [];
    },
    // 目标元素移动位置
    dragOver(e) {
      const className = e.toElement.parentNode.className;
      const number = className.match(/\d+/g);
      if (number) {
        const index = +number[0];
        const obj = this.getBgBoxItemList[index];
        // 左上角
        this.x = obj.leftTopX;
        this.y = obj.leftTopY;
      }
    },
    // 拖拽完成
    onDropA(e) {
      const box =
        this.getBgBoxItemList.filter((item) => {
          return item.leftTopX == this.x && item.leftTopY == this.y;
        })[0] || {};
      const www = this.startData.w;
      const hhh = this.startData.h;
      //被占用的盒子
      const filterOccBoxArr = this.getBgBoxItemList.filter(
        (boxItem) =>
          box.horizontalNumber <= boxItem.horizontalNumber &&
          boxItem.horizontalNumber <= box.horizontalNumber + (www - 1) &&
          box.verticalNumber <= boxItem.verticalNumber &&
          boxItem.verticalNumber <= box.verticalNumber + (hhh - 1)
      );
      // console.log(filterOccBoxArr, "filterOccBoxArr");

      if (filterOccBoxArr.length < www * hhh) {
        console.log("格子不够了 不允许拖拽");
        return;
      }

      let rightArr = JSON.parse(JSON.stringify(this.rightData[this.active]));
      let isContinue = false;
      // console.log(rightArr, "rightData");
      rightArr.map((item) => {
        const itemBox =
          this.getBgBoxItemList.filter((bItem) => {
            return bItem.leftTopX == item.x && bItem.leftTopY == item.y;
          })[0] || {};
        const BeingOccupiedBoxArr = this.getBgBoxItemList.filter(
          (boxItem) =>
            itemBox.horizontalNumber <= boxItem.horizontalNumber &&
            boxItem.horizontalNumber <=
              itemBox.horizontalNumber + (item.w / this.boxWidth - 1) &&
            itemBox.verticalNumber <= boxItem.verticalNumber &&
            boxItem.verticalNumber <=
              itemBox.verticalNumber + (item.h / this.boxHeight - 1)
        );
        // 所需的格子块id在不在BeingOccupiedBoxArr里面
        const filterOccBoxArrIds = filterOccBoxArr.map((i) => i.id);
        const BeingOccupiedBoxArrIds = BeingOccupiedBoxArr.map((v) => v.id);
        // 检查 filterOccBoxArrIds 中的任何一个 id 是否存在于 BeingOccupiedBoxArrIds 中
        const conflict = filterOccBoxArrIds.some((id) =>
          BeingOccupiedBoxArrIds.includes(id)
        );
        if (conflict) {
          isContinue = conflict;
          return;
        }
      });
      if (isContinue) {
        console.log("所需的格子被占用 不允许拖拽");
        return;
      }
      // 获取左上占据的格子
      const filterBoxArrIds = filterOccBoxArr.map((i) => i.id);
      const minValue = Math.min(...filterBoxArrIds);
      // 拖拽完成数据push
      this.rightData[this.active].push({
        ...this.startData,
        w: this.startData.w * this.boxWidth,
        h: this.startData.h * this.boxHeight,
        x: this.x,
        y: this.y,
        wRate: this.startData.w,
        hRate: this.startData.h,
        minValue: minValue,
      });
      // 遍历右边的数据中每一项
      this.rightData[this.active].forEach((rightDataItem) => {
        // 对于leftData中的每个对象
        this.leftData.forEach((leftDataItem) => {
          // 查找并更新匹配的子项
          leftDataItem.subdata = leftDataItem.subdata.map((subdataItem) => {
            if (subdataItem.id === rightDataItem.id) {
              // 如果id匹配，设置subShow为false
              return { ...subdataItem, subShow: false };
            } else {
              // 否则，保持原样
              return subdataItem;
            }
          });
        });
      });
    },
    // 删除
    handleDelete(value) {
      // 遍历leftData的每个项目
      this.leftData.forEach((leftDataItem) => {
        if (leftDataItem.subdata) {
          // 遍历子项目
          leftDataItem.subdata = leftDataItem.subdata.map((subdataItem) => {
            // 如果id匹配，则更新show属性
            if (subdataItem.id === value.id) {
              return { ...subdataItem, subShow: true };
            }
            return subdataItem;
          });
        }
      });
      const index = this.rightData[this.active].findIndex(
        (i) => i.id === value.id
      );
      if (index > -1) {
        this.rightData[this.active].splice(index, 1);
      }
    },
    // 右边拖动过程中
    onDrag(left, top, item) {
      // console.log(item, 8);
      const box =
        this.getBgBoxItemList.filter((v) => {
          return v.leftTopX == left && v.leftTopY == top;
        })[0] || {};
      const www = item.w;
      const hhh = item.h;
      //被占用的盒子
      const filterOccBoxArr = this.getBgBoxItemList.filter(
        (boxItem) =>
          box.horizontalNumber <= boxItem.horizontalNumber &&
          boxItem.horizontalNumber <= box.horizontalNumber + (www - 1) &&
          box.verticalNumber <= boxItem.verticalNumber &&
          boxItem.verticalNumber <= box.verticalNumber + (hhh - 1)
      );
      // 获取左上占据的格子
      const filterBoxArrIds = filterOccBoxArr.map((i) => i.id);
      const minValue = Math.min(...filterBoxArrIds);
      this.rightData[this.active] = this.rightData[this.active].map(
        (rightDataItem) => {
          if (rightDataItem.id === item.id) {
            return { ...rightDataItem, x: left, y: top, minValue: minValue };
          }
          return rightDataItem;
        }
      );
    },
    // 调整大小
    onResize(left, top, width, height, item) {
      // console.log(left, top, width, height, item, "弄啥的");
      // this.rightData[this.active] = this.rightData[this.active].map(
      //   (rightDataItem) => {
      //     if (rightDataItem.id === item.id) {
      //       return { ...rightDataItem, x: left, y: top, w: width, h: height };
      //     }
      //     return rightDataItem;
      //   }
      // );
    },
    dragstop(id, left, top) {},
    // 分辨率变化
    changeResolution(code) {
      if (code === 1) {
        if (
          this.rightData["1"].length ||
          this.rightData["2"].length ||
          this.rightData["3"].length
        ) {
          this.addOrUpdateForm.resolution = 2;
          this.$confirm("此操作将丢失当前的配置部署, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.rightData = {
                1: [],
                2: [],
                3: [],
              };
              // console.log(this.$data.leftData);
              this.leftData = this.leftData.map((item) => {
                return {
                  ...item,
                  subdata: item.subdata.map((v) => ({ ...v, subShow: true })),
                };
              });
              this.active = 1;
              this.addOrUpdateForm.resolution = 1;
              this._getBgBoxItemList(this.addOrUpdateForm.resolution);
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消操作",
              });
            });
        } else {
          this._getBgBoxItemList(code);
        }
      } else {
        this._getBgBoxItemList(code);
        for (let key in this.rightData) {
          this.rightData[key].forEach((rightDataItem) => {
            rightDataItem.h = rightDataItem.h / code;
            rightDataItem.w = rightDataItem.w / code;
            rightDataItem.x = rightDataItem.x / code;
            rightDataItem.y = rightDataItem.y / code;
          });
        }
      }
      this.uuuuuuekey = new Date().getTime();
    },
    _getBgBoxItemList(code) {
      const minObj = {
        boxNum: 12,
        transverseBlocks: 4,
        longitudinalBlocks: 3,
      };
      const maxObj = {
        boxNum: 48,
        transverseBlocks: 8,
        longitudinalBlocks: 6,
      };
      const showObj = code == 1 ? minObj : maxObj;
      const boxArr = [];
      this.boxWidth = this.bigBoxWidth / showObj.transverseBlocks;
      this.boxHeight = this.bigBoxHeight / showObj.longitudinalBlocks;
      for (let i = 0; i < showObj.boxNum; i++) {
        // 列
        const horizontalNumber = i % showObj.transverseBlocks;
        // 行
        const verticalNumber = Math.floor(i / showObj.transverseBlocks);
        boxArr.push({
          id: i,
          horizontalNumber,
          verticalNumber,
          boxWidth: this.boxWidth,
          boxHeight: this.boxHeight,
          leftTopX: horizontalNumber * this.boxWidth,
          leftTopY: verticalNumber * this.boxHeight,
          rightBottomX: (horizontalNumber + 1) * this.boxWidth,
          rightBottomY: (verticalNumber + 1) * this.boxHeight,
        });
      }
      this.getBgBoxItemList = boxArr;
    },
    handleLeftIfShow() {
      for (let key in this.rightData) {
        this.rightData[key].forEach((rightDataItem) => {
          this.leftData.forEach((leftDataItem) => {
            leftDataItem.subdata = leftDataItem.subdata.map((subdataItem) => {
              if (subdataItem.id === rightDataItem.id) {
                return { ...subdataItem, subShow: false };
              } else {
                return subdataItem;
              }
            });
          });
        });
      }
    },
    // 标题
    handleTitleInput1(e) {
      if (e) {
        this.titlebox1 = e;
      } else {
        this.titlebox1 = "标题1";
      }
    },
    handleTitleInput2(e) {
      if (e) {
        this.titlebox2 = e;
      } else {
        this.titlebox2 = "标题2";
      }
    },
    handleTitleInput3(e) {
      if (e) {
        this.titlebox3 = e;
      } else {
        this.titlebox3 = "标题3";
      }
    },
    goScreenHome() {
      this.$router.push({ name: "screenHome" });
    },
    // 保存
    submit() {
      this.$refs.formRef.validate(async (pass) => {
        if (pass) {
          const modifiedRightData = {};
          if (this.addOrUpdateForm.resolution === 1) {
            // 修改每个对象的 w... 属性
            for (const key in this.rightData) {
              if (this.rightData.hasOwnProperty(key)) {
                modifiedRightData[key] = this.rightData[key].map((item) => ({
                  ...item,
                  w: (item.w * (1920 / this.bigBoxWidth)).toFixed(2),
                  h: (item.h * (990 / this.bigBoxHeight)).toFixed(2),
                  x: (item.x * (1920 / this.bigBoxWidth)).toFixed(2),
                  y: (item.y * (990 / this.bigBoxHeight)).toFixed(2),
                }));
              }
            }
          } else {
            for (const key in this.rightData) {
              if (this.rightData.hasOwnProperty(key)) {
                modifiedRightData[key] = this.rightData[key].map((item) => ({
                  ...item,
                  w: (item.w * (3840 / this.bigBoxWidth)).toFixed(2),
                  h: (item.h * (1980 / this.bigBoxHeight)).toFixed(2),
                  x: (item.x * (3840 / this.bigBoxWidth)).toFixed(2),
                  y: (item.y * (1980 / this.bigBoxHeight)).toFixed(2),
                }));
              }
            }
          }
          const screenHomeData = {
            ...this.addOrUpdateForm,
            rightData: modifiedRightData,
          };
          const screenData = {
            addOrUpdateForm: this.addOrUpdateForm,
            rightData: this.rightData,
          };
          localStorage.setItem(
            "screenHomeData",
            JSON.stringify(screenHomeData)
          );
          localStorage.setItem("screenData", JSON.stringify(screenData));
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.screen {
  width: 1620px;
  display: flex;
  align-items: flex-start;
}
.screen-left {
  width: 256px;
  height: 917px;
  box-shadow: 0px 0px 6px 0px rgba(153, 189, 243, 0.4);
  border-radius: 12px;
  padding: 10px;
  margin-right: 20px;
  overflow-y: scroll;
  .screen-left-tit {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: #8b9ac2;
    margin-bottom: 10px;
  }
  .screen-left-main {
    .screen-left-main-text {
      font-size: 16px;
      font-weight: 500;
      line-height: 34px;
      color: #333;
      cursor: pointer;
    }
    .screen-left-main-item {
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .screen-left-main-item-tit {
        display: inline-block;
        padding: 2px 12px;
        border-radius: 10px;
        background-color: #e7f3ff;
        font-size: 13px;
        font-weight: 500;
        line-height: 20px;
        color: #3a7dff;
      }
      .screen-left-main-item-img {
        width: 214px;
        img {
          width: 100%;
        }
      }
    }
  }
}
.screen-right {
  // flex: 1;
  width: 1344px;
  height: 917px;
  .screen-right-top {
    display: flex;
    margin-bottom: 20px;
    .screen-right-top-left {
      width: 1051px;
      height: 131px;
      box-shadow: 0px 0px 6px 0px rgba(153, 189, 243, 0.4);
      border-radius: 12px;
      margin-right: 20px;
      padding: 15px;
      .creen-right-top-form {
        display: flex;
      }
      .el-form-item {
        margin-bottom: 15px;
      }
    }
    .screen-right-top-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 291px;
      height: 131px;
      box-shadow: 0px 0px 6px 0px rgba(153, 189, 243, 0.4);
      border-radius: 12px;
      padding: 20px;
      .el-button + .el-button {
        margin-left: 0px !important;
      }
    }
  }
  .screen-right-main {
    width: 1344px;
    height: 765px;
    box-shadow: 0px 0px 6px 0px rgba(153, 189, 243, 0.4);
    border-radius: 12px;
    // padding: 10px;
    background-image: url(".././../assets/screen-bg.jpg");
    background-size: cover; /* 背景图片尺寸自适应 */
    background-repeat: no-repeat; /* 不重复显示背景图片 */
    .screen-right-main-title {
      padding-top: 15px;
      height: 50px;
      .screen-right-main-title-item {
        width: 135px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-size: cover; /* 背景图片尺寸自适应 */
        background-repeat: no-repeat; /* 不重复显示背景图片 */
        font-size: 10px;
        font-weight: 400;
        color: #b7c2f1;
      }
      .active {
        font-size: 11px;
        font-weight: 700;
        color: #fff;
      }
    }
    .screen-right-main-box {
      position: relative;
      // display: flex;
      // flex-wrap: wrap;
      // align-items: center;
      // justify-content: space-between;
      // background: linear-gradient(-90deg, red 1px, transparent 1px) 0% 0% /
      //     340px 226px,
      //   linear-gradient(red 1px, transparent 1px) 0% 0% / 340px 226px;
      width: 100%;
      height: 693px;
      margin-top: 17px;
      display: block;

      .screen-right-main-bigbox {
        display: flex;
        flex-wrap: wrap;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 693px;
        .screen-right-item-box {
          padding: 10px;
          .screen-right-item-box-1 {
            width: 100%;
            height: 100%;
            border-radius: 6px;
            background: rgba(4, 25, 99, 0.2);
          }
        }
      }
      .screen-item-box:hover {
        cursor: move;
      }
      .screen-right-item-img {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 10px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 6px;
        }
        &:hover {
          cursor: pointer;
          .delete-icon {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #09090999;
            text-align: center;
            line-height: 30px;
            color: #ff6d74;
            // visibility: visible;
            display: block;
          }
        }
        .delete-icon {
          display: none;
          // visibility: hidden;
        }
      }
    }
  }
}
.ghostClass {
  background-color: blue !important;
}
.chosenClass {
  background-color: red !important;
  opacity: 1 !important;
}
.dragClass {
  background-color: blueviolet !important;
  opacity: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}
.vdr {
  border: none;
}
</style>
