<template>
  <transition>
    <div class="building-container" v-show="show" ref="houseItem">
      <div class="building-floor">
        <div
          class="floor-number"
          v-for="(item, index) in info.floor"
          :key="item"
        >
          {{ info.floor - index }} 层
        </div>
      </div>
      <div
        ref="build"
        class="building-house-container"
        :class="queryParamsXiaoqu.xiaoquId == 215 ? 'minWidth-box' : ''"
        v-loading="loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        element-loading-text="加载中"
      >
        <div class="building-name">
          <div>{{ info.deptname }}{{ info.name }}</div>
        </div>
        <div class="house" v-for="(item, index) in groupedRooms" :key="index">
          <colorCell
            :active="currentIndex == house.id ? 'activeCell' : ''"
            :isClcik="true"
            :item="house"
            v-for="(house, houseIndex) in item"
            :key="houseIndex"
            @clickHouse="clickHouse(house)"
          ></colorCell>
        </div>
        <div class="unit-rows">
          <div v-for="item in info.unit" :key="item">{{ item }}单元</div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { mapGetters } from "vuex";
import { getNumNew } from "@/api/taicangpop/data";
import { getBuilding } from "@/api/taicangpop/building";
import colorCell from "./ColorCell/index.vue";
import { v4 as uuidv4 } from "uuid";
import { pxToVw } from "@/utils/myFuntion.js";
export default {
  data() {
    return {
      loading: true,
      show: false,
      info: {},
      list: [],
      currentIndex: 0,
    };
  },
  computed: {
    ...mapGetters([
      "queryParamsXiaoqu",
      "leftColor",
      "rightTopColor",
      "houseItem",
      "refreshBuild",
      "clickResult",
    ]),
    groupedRooms() {
      if (this.list.length == 0) return;

      if (this.info.deptname == "嘉华园") {
        // 对房间数据进行排序
        const sortedRooms = this.list.sort((a, b) => {
          a.keyId = uuidv4();
          b.keyId = uuidv4();
          a = this.handleColor(a);
          b = this.handleColor(b);
          // 提取房间号的后半部分进行比较
          let roomA = parseInt(a.name.split("-")[1]);
          let roomB = parseInt(b.name.split("-")[1]);
          return roomA - roomB;
        });
        return [sortedRooms];
      } else {
        // 初始化每层楼的数组
        let floors = Array.from({ length: this.info.floor }, () => []);
        // 遍历房间数据
        this.list.forEach((room) => {
          // 提取房间号前几位作为楼层号
          let floor = (parseInt(room.name) / 100) | 0;
          room.keyId = uuidv4();
          // 将房间加入对应楼层数组
          if (floor > 0 && floor <= this.info.floor) {
            floors[floor - 1].push(this.handleColor(room));
          }
        });

        // 对每层楼的房间进行排序
        floors.forEach((floorRooms) => {
          floorRooms.sort((a, b) => parseInt(a.name) - parseInt(b.name));
        });
        // console.log(floors);
        return floors.reverse();
      }
    },
  },
  components: {
    colorCell,
  },
  watch: {
    "queryParamsXiaoqu.buildingId"(newValue, oldValue) {
      if (newValue) {
        this.show = true;
        this.getBuildingInfo();
        this.getBuildingList();
      } else {
        this.reset();
        this.show = false;
        const list = document.getElementsByClassName("foldPane-bottom")[0];

        list.style.left = ``;
        list.style.width = ``;
        list.style.transform = ``;
      }
    },
    "houseItem.id"(newValue, oldValue) {
      if (!newValue) this.currentIndex = 0;
    },
    refreshBuild(newValue, oldValue) {
      if (newValue > 1) {
        this.getBuildingList();
      }
    },
    clickResult: {
      handler(newVal, oldVal) {
        if (newVal.id && this.loading == false) {
          this.handlerWindow();
          console.log("已经是本楼");
        }
      },
      deep: true,
      // immediate: true,
    },
  },
  created() {},
  methods: {
    reset() {
      // this.show = false;
      this.info = {};
      this.list = [];
      this.currentIndex = 0;
    },
    clickHouse(item) {
      this.$store.commit("SET_CLICK_RESULT", {});
      debugger;
      this.$store.commit("SET_BUILDING_WIDTH", {
        id: item.id,
        buildingId: item.building_id,
        deptId: item.dept_id,
        buildingWidth:
          this.houseItem.buildingWidth > 0
            ? this.houseItem.buildingWidth
            : window.innerWidth - this.$refs.houseItem.offsetWidth,
        name: item.name,
        keyId: item.id,
      });
      this.currentIndex = item.id;
    },
    async getBuildingInfo() {
      let info = await getBuilding(this.queryParamsXiaoqu.buildingId);
      this.info = info.data;
    },
    async getBuildingList() {
      this.loading = true;
      this.$refs.build.scrollIntoView({
        behavior: "smooth", // 平滑滚动
      });
      let res = await getNumNew({
        buildingId: this.queryParamsXiaoqu.buildingId,
      });
      this.currentIndex = this.houseItem.keyId;
      this.list = res.data;
      this.loading = false;
      this.$store.commit("SET_REFRESH", 1);

      this.handlerWindow();
      console.log("接口找");
    },

    handlerWindow() {
      this.$nextTick(() => {
        const list = document.getElementsByClassName("foldPane-bottom")[0];
        const build = document.getElementsByClassName("building-container")[0];
        if (this.queryParamsXiaoqu.buildingId) {
          list.style.left = pxToVw(390);
          list.style.width = `calc(100% - (${pxToVw(390)} + ${
            build.offsetWidth
          }px) )`;

          list.style.transform = `translateX(0)`;
        }
        if (this.clickResult.id) this.clickHouse(this.clickResult);
      });
    },
    // 颜色处理
    handleColor(item) {
      if (!item.color) {
        item.leftColor = "#7b75ff";
        item.rightTopColor = "#7b75ff";
      } else {
        for (let key in this.leftColor) {
          if (item.color == key) {
            item.leftColor = this.leftColor[key];
            item.rightTopColor = this.rightTopColor[key];
          }
        }
      }

      return item;
    },
  },
};
</script>

<style lang="scss" scoped>
.building-container {
  position: absolute;
  z-index: 100;
  top: 75px;
  right: 0;
  height: calc(100% - 75px);
  display: flex;
  overflow-y: auto;
  background: #113666;
  border: 1px solid #2d6cad;
  .building-floor {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 85px;
    background: linear-gradient(
      rgba(149, 18, 58, 0.1),
      #95123a,
      rgba(149, 18, 58, 0.1)
    );

    .floor-number {
      height: 23px;
      width: 50px;
      text-align: center;
      line-height: 23px;
      margin-bottom: 6px;
      font-size: 14px;
      color: #fff;
      font-family: "DIN-Regular-2.otf";
    }
  }
  .building-house-container {
    padding-top: 85px;
    position: relative;
    min-width: 200px;
    // max-width: 700px;
    // overflow-x: auto;
    // overflow-y: hidden;
    height: 100%;
    background: url("~@/assets/images/ui/img_home@2x.png");
    background-repeat: no-repeat;
    background-size: cover;
    .building-name {
      position: absolute;
      left: 0;
      top: 30px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      & > div {
        font-size: 17px;
        color: #f0fffc;
        font-family: "BY";
        background: url("~@/assets/images/ui/img_number_bg@2x.png");
        background-size: 100% 100%;
        padding: 6px 25px;
      }
    }
    .house {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      margin-bottom: 6px;
      height: 23px;
      .floor-item {
        cursor: pointer;
        margin-right: 6px;
        height: 100%;
        width: 60px;
        text-align: center;
        line-height: 23px;
        color: #fff;
        font-size: 14px;
      }
      & > .floor-item:first-child {
        margin-left: 8px;
      }
    }
    .house:hover {
      background: #ffb82f;
      // padding: 2px 0;
    }
  }
  .minWidth-box {
    min-width: 250px !important;
  }
  .building-house-container .house:last-child {
    margin-bottom: 0;
  }
}

/* 下面我们会解释这些 class 是做什么的 */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.unit-rows {
  display: flex;
  align-items: center;
  & > div {
    flex: 1;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    padding: 6px 0;
  }
  & > div:nth-child(odd) {
    background: RGBA(2, 74, 95, 0.4);
  }
}
</style>
