<template>
  <transition>
    <div class="building-container" v-show="show">
      <div class="building-floor">
        <div
          class="floor-number"
          v-for="(item, index) in info.floor"
          :key="item"
        >
          {{ info.floor - index }} 层
        </div>
      </div>
      <div class="building-house-container">
        <div class="building-name">{{ info.deptname }}{{ info.name }}</div>
        <div class="house" v-for="(item, index) in list" :key="index">
          <colorCell
            :item="house"
            v-for="house in item"
            :key="house.holder_id"
          ></colorCell>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { mapGetters } from "vuex";
import { getNum } from "@/api/taicangpop/data";
import { getBuilding } from "@/api/taicangpop/building";
import colorCell from "./ColorCell/index.vue";
export default {
  data() {
    return {
      show: true,
      info: {},
      list: [],
    };
  },
  computed: {
    ...mapGetters(["queryParamsXiaoqu", "leftColor", "rightTopColor"]),
  },
  components: {
    colorCell,
  },
  watch: {
    "queryParamsXiaoqu.buildingId"(newValue, oldValue) {
      if (newValue) {
        this.getBuildingInfo();
        this.getBuildingList();
      } else {
        this.show = false;
      }
    },
  },
  created() {},
  methods: {
    async getBuildingInfo() {
      let info = await getBuilding(this.queryParamsXiaoqu.buildingId);
      this.info = info.data;
      this.show = true;
    },
    async getBuildingList() {
      let res = await getNum({
        buildingId: this.queryParamsXiaoqu.buildingId,
      });

      this.list = this.filterFloor(res.data);

      console.log(this.list);
    },
    // 颜色处理
    handleColor(item) {
      if (!item.color) {
        item.leftColor = "#7b75ff";
        item.rightTopColor = "#7b75ff";
        return;
      }
      for (let key in this.leftColor) {
        if (item.color == key) {
          item.leftColor = this.leftColor[key];
          item.rightTopColor = this.rightTopColor[key];
        }
      }

      return item;
    },
    filterFloor(list) {
      const categorizedRooms = {};
      list.forEach((room) => {
        room.name = room.name.replace("室", "");
        const floor = (parseInt(room.name, 10) / 100) | 0;
        if (!categorizedRooms[floor]) {
          categorizedRooms[floor] = [];
        }
        categorizedRooms[floor].push(this.handleColor(room));
      });

      // 确定最大楼层
      const maxFloor = Math.max(...Object.keys(categorizedRooms).map(Number));
      // 对每层房间号进行从小到大排序
      const sortedRoomsByFloor = [];
      for (let floor = 0; floor <= maxFloor; floor++) {
        const roomsForFloor = categorizedRooms[floor] || [];
        sortedRoomsByFloor.push(
          roomsForFloor.sort(
            (a, b) => parseInt(a.name, 10) - parseInt(b.name, 10)
          )
        );
      }

      return sortedRoomsByFloor.reverse();
    },
  },
};
</script>

<style lang="scss" scoped>
.building-container {
  position: absolute;
  z-index: 100;
  top: 80px;
  right: 0;
  height: calc(100% - 80px);
  display: flex;
  overflow-y: auto;
  background: rgba(3, 22, 48, 1);
  .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)
    );
    padding-top: 85px;
    .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;

    height: 100%;
    background: url("~@/assets/images/ui/img_home@2x.png");
    background-repeat: no-repeat;
    background-size: auto 100%;
    .building-name {
      position: absolute;
      left: 130px;
      top: 25px;
      min-width: 135px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      font-size: 18px;
      color: #f0fffc;
      font-family: "BY";
      background: url("~@/assets/images/ui/img_number_bg@2x.png");
      background-size: 100% 100%;
      padding: 0 10px;
    }
    .house {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      margin-bottom: 6px;

      .floor-item {
        cursor: pointer;
        margin-right: 6px;
        height: 23px;
        width: 50px;
        text-align: center;
        line-height: 23px;
        color: #fff;
        font-size: 14px;
      }
      & > .floor-item:first-child {
        margin-left: 8px;
      }
    }
  }
  .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;
}
</style>
