<template>
  <div>
    <div
      class="screen-home"
      :style="`width:${bigBoxWidth}px;height:${screenBoxHeight}px`"
    >
      <!-- v-if="screenData" -->
      <div class="screen-right-main-title" :style="`height:${titleHeight}px`">
        <div v-if="screenData && screenData.cut" style="display: flex">
          <div
            class="screen-right-main-title-item"
            :class="{ active: active === 1 }"
            :style="{
              backgroundImage: `url(${
                active === 1 ? title_active : title_img
              })`,
              width: `${titleImgWidth}px`,
              height: `${titleImgHeight}px`,
              fontSize: `${titleFontsize}px`,
            }"
            @click="active = 1"
          >
            {{ screenData.titlename1 }}
          </div>
          <div
            class="screen-right-main-title-item"
            :class="{ active: active === 2 }"
            :style="{
              backgroundImage: `url(${
                active === 2 ? title_active : title_img
              })`,
              width: `${titleImgWidth}px`,
              height: `${titleImgHeight}px`,
              fontSize: `${titleFontsize}px`,
            }"
            @click="active = 2"
          >
            {{ screenData.titlename2 }}
          </div>
          <div
            v-if="screenData.titlename3"
            class="screen-right-main-title-item"
            :class="{ active: active === 3 }"
            :style="{
              backgroundImage: `url(${
                active === 3 ? title_active : title_img
              })`,
              width: `${titleImgWidth}px`,
              height: `${titleImgHeight}px`,
              fontSize: `${titleFontsize}px`,
            }"
            @click="active = 3"
          >
            {{ screenData.titlename3 }}
          </div>
        </div>
      </div>
      <div class="screen-right-main-box">
        <div
          class="screen-right-main-bigbox"
          :style="`height:${bigBoxHeight}px`"
        >
          <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 newData">
          <component
            :is="item.com"
            :key="item.id"
            :style="{
              width: `${item.w}px`,
              height: `${item.h}px`,
              top: `${item.y}px`,
              left: `${item.x}px`,
              position: 'absolute',
            }"
          />
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import demo11Vue from "./components/demo11.vue";
import demo12Vue from "./components/demo12.vue";
import demo13Vue from "./components/demo13.vue";
import demo14Vue from "./components/demo14.vue";
import demo15Vue from "./components/demo15.vue";
import demo21Vue from "./components/demo21.vue";
import demo23Vue from "./components/demo23.vue";
import demo24Vue from "./components/demo24.vue";
import demo25Vue from "./components/demo25.vue";
import demo26Vue from "./components/demo26.vue";
import demo27Vue from "./components/demo27.vue";
import demo28Vue from "./components/demo28.vue";
import demo31Vue from "./components/demo31.vue";
import demo32Vue from "./components/demo32.vue";
import demo33Vue from "./components/demo33.vue";
import demo34Vue from "./components/demo34.vue";
import demo35Vue from "./components/demo35.vue";
import demo36Vue from "./components/demo36.vue";
import demo37Vue from "./components/demo37.vue";
import demo38Vue from "./components/demo38.vue";
import demo39Vue from "./components/demo39.vue";
import demo310Vue from "./components/demo310.vue";
import demo311Vue from "./components/demo311.vue";
import demo312Vue from "./components/demo312.vue";
import demo313Vue from "./components/demo313.vue";
import demo41Vue from "./components/demo41.vue";
import demo42Vue from "./components/demo42.vue";
import demo43Vue from "./components/demo43.vue";
import demo45Vue from "./components/demo45.vue";
import demo46Vue from "./components/demo46.vue";
import demo51Vue from "./components/demo51.vue";

export default {
  components: {
    demo11Vue,
    demo12Vue,
    demo13Vue,
    demo14Vue,
    demo15Vue,
    demo21Vue,
    demo23Vue,
    demo24Vue,
    demo25Vue,
    demo26Vue,
    demo27Vue,
    demo28Vue,
    demo31Vue,
    demo32Vue,
    demo33Vue,
    demo34Vue,
    demo35Vue,
    demo36Vue,
    demo37Vue,
    demo38Vue,
    demo39Vue,
    demo310Vue,
    demo311Vue,
    demo312Vue,
    demo313Vue,
    demo41Vue,
    demo42Vue,
    demo43Vue,
    demo45Vue,
    demo46Vue,
    demo51Vue,
  },
  data() {
    return {
      title_active: require("../../assets/title_active.png"), // 标题高亮图片
      title_img: require("../../assets/title_img.png"), // 标题默认图片
      active: 1,
      boxWidth: 1920 / 4,
      boxHeight: 990 / 3,
      bigBoxWidth: 1920, // 可拖动的盒子宽度
      bigBoxHeight: 990, // 可拖动的盒子高度
      screenBoxHeight: 1080, //整个屏幕的高度
      titleHeight: 50, //标题高度
      titleImgWidth: 192, //标题图片大小
      titleImgHeight: 57, //标题图片大小
      titleFontsize: 14, //标题字体大小
      getBgBoxItemList: [], // 拖拽格子列表
      code: 1,
      data: [
        { id: 11, com: demo11Vue, x: 480, y: 0, w: 0, h: 0 },
        { id: 12, com: demo12Vue, x: 680, y: 0, w: 0, h: 0 },
        { id: 13, com: demo13Vue, x: 340, y: 226, w: 0, h: 0 },
        { id: 14, com: demo14Vue, x: 680, y: 452, w: 0, h: 0 },
        { id: 15, com: demo15Vue, x: 680, y: 452, w: 0, h: 0 },
        { id: 21, com: demo21Vue, x: 680, y: 452, w: 0, h: 0 },
        { id: 23, com: demo23Vue, x: 680, y: 452, w: 0, h: 0 },
        { id: 24, com: demo24Vue, x: 680, y: 452, w: 0, h: 0 },
        { id: 25, com: demo25Vue, x: 680, y: 452, w: 0, h: 0 },
        { id: 26, com: demo26Vue, x: 680, y: 452, w: 0, h: 0 },
        { id: 27, com: demo27Vue, x: 680, y: 452, w: 0, h: 0 },
        { id: 28, com: demo28Vue, x: 680, y: 452, w: 0, h: 0 },
        { id: 31, com: demo31Vue, x: 680, y: 452, w: 0, h: 0 },
        { id: 32, com: demo32Vue, x: 680, y: 452, w: 0, h: 0 },
        { id: 33, com: demo33Vue, x: 680, y: 452, w: 0, h: 0 },
        { id: 34, com: demo34Vue, x: 680, y: 452, w: 0, h: 0 },
        { id: 35, com: demo35Vue, x: 680, y: 452, w: 0, h: 0 },
        { id: 36, com: demo36Vue, x: 680, y: 452, w: 0, h: 0 },
        { id: 37, com: demo37Vue, x: 680, y: 452, w: 0, h: 0 },
        { id: 38, com: demo38Vue, x: 680, y: 452, w: 0, h: 0 },
        { id: 39, com: demo39Vue, x: 680, y: 452, w: 0, h: 0 },
        { id: 310, com: demo310Vue, x: 680, y: 452, w: 0, h: 0 },
        { id: 311, com: demo311Vue, x: 680, y: 452, w: 0, h: 0 },
        { id: 312, com: demo312Vue, x: 680, y: 452, w: 0, h: 0 },
        { id: 313, com: demo313Vue, x: 680, y: 452, w: 0, h: 0 },
        { id: 41, com: demo41Vue, x: 680, y: 452, w: 0, h: 0 },
        { id: 42, com: demo42Vue, x: 680, y: 452, w: 0, h: 0 },
        { id: 43, com: demo43Vue, x: 680, y: 452, w: 0, h: 0 },
        { id: 45, com: demo45Vue, x: 680, y: 452, w: 0, h: 0 },
        { id: 46, com: demo46Vue, x: 680, y: 452, w: 0, h: 0 },
        { id: 51, com: demo51Vue, x: 680, y: 452, w: 0, h: 0 },
      ],
      screenData: {},
      //  newData: [],
    };
  },
  computed: {
    newData() {
      const screenData = JSON.parse(localStorage.getItem("screenHomeData"));
      if (screenData) {
        return screenData.rightData[this.active + ""].map((item) => {
          const obj = this.data.find((v) => v.id === item.id);
          return {
            ...item,
            com: obj.com,
          };
        });
      }
    },
  },
  created() {
    this.screenData = JSON.parse(localStorage.getItem("screenHomeData"));
    if (this.screenData?.resolution == 2) {
      this.code = 2;
      this.bigBoxWidth = 3840;
      this.bigBoxHeight = 1980;
      this.screenBoxHeight = 2160;
      this.titleHeight = 142;
      this.titleImgWidth = 384;
      this.titleImgHeight = 114;
      this.titleFontsize = 28;
    }
    this.getBgBoxList();
  },
  methods: {
    // 总体动态盒子
    getBgBoxList() {
      const minObj = {
        boxNum: 12,
        transverseBlocks: 4,
        longitudinalBlocks: 3,
      };
      const maxObj = {
        boxNum: 48,
        transverseBlocks: 8,
        longitudinalBlocks: 6,
      };
      const showObj = this.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;
    },
  },
};
</script>

<style lang="scss" scoped>
.screen-home {
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: url("../../assets/screen-bg.jpg") 100% 100% no-repeat;
  background-size: cover; /* 背景图片尺寸自适应 */
  background-repeat: no-repeat; /* 不重复显示背景图片 */
  .screen-right-main-title {
    padding-top: 15px;
    height: 70px;
    .screen-right-main-title-item {
      width: 192px;
      height: 57px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-size: cover; /* 背景图片尺寸自适应 */
      background-repeat: no-repeat; /* 不重复显示背景图片 */
      font-size: 14px;
      font-weight: 400;
      color: #b7c2f1;
    }
    .active {
      font-size: 11px;
      font-weight: 700;
      color: #fff;
    }
  }
  .screen-right-main-box {
    position: relative;
    width: 100%;
    // height: 678px;
    margin-top: 25px;
    display: block;

    .screen-right-main-bigbox {
      display: flex;
      flex-wrap: wrap;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 990px;
      .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);
        }
      }
    }
  }
}
</style>
