<style lang="less">
.component-floor {
  border-radius: 16rpx;
  background: rgba(255, 255, 255, 0.9);
  .component-wrapper {
    display: flex;
    max-height: 552rpx;
    padding: 16rpx 0;
    overflow-y: scroll;
    justify-content: space-between;
    .building-wrapper {
      padding-right: 16rpx;
      padding-left: 16rpx;
      border-right: 1px solid #c4c9cf4d;
      .building-item {
        display: flex;
        box-sizing: border-box;
        min-width: 120rpx;
        max-width: 240rpx;
        // width: 240rpx;
        padding: 14rpx;
        line-height: 44rpx;
        font-size: 32rpx;
        font-weight: 400;
        flex-wrap: wrap;
        color: #626c78;
        text-align: left;
      }
    }

    .floor-wrapper {
      // display: flex;
      box-sizing: border-box;
      padding-left: 16rpx;
      padding-right: 16rpx;
      // flex-direction: column-reverse;
      .floor-item {
        min-width: 120rpx;
        box-sizing: border-box;
        padding: 14rpx;
        line-height: 44rpx;
        font-size: 32rpx;
        font-weight: 400;
        color: #626c78;
        text-align: center;
      }
    }
  }
}

.floor-item.selected,
.building-item.selected {
  background: #D4FAF4;
}
</style>

<template>
  <!-- && selectedFloor == item.id -->
  <!-- :class="{'selected' :selectedBuilding == item.id}" -->
  <div class="component-floor">
    <div class="component-wrapper">
      <div class="building-wrapper" 
        v-if="buildings && buildings.length>1">
        <div class="building-item" 
        v-on:click.stop="changeBuilding(item.id)"
        :class="{'selected' :selectedBuilding == item.id}"
        :key="index+'building-map'"
        v-for="(item,index) in buildings">
        {{item.localName}}
        </div>
     </div>

     <!-- :class="{'selected' :selectedFloor == item.id}" -->
      <div class="floor-wrapper">
        <div
          class="floor-item"
          :key="index+'map'"
          :class="{'selected' :selectedFloor == item.id}"
          v-for="(item,index) in floors"
          v-on:click.stop="changeFloor(item.id)">
        {{item.localName}}
       </div>
      </div>
    </div>
  </div>
</template>

<script>
import wepy from '@wepy/core';
import config from '@/config';

let h5StaticPath = config.h5StaticPath + '/page-intelligent-control/';

wepy.component({
  data: {
    h5StaticPath
  },
  props: {
    floors: Array,
    buildings: Array,
    status: 'fold',
    selectedBuilding: String, //选中的building id
    selectedFloor: String //选中的floor id
  },
  created() {},
  ready() {},
  didUpdate() {},
  didUnmount() {},
  methods: {
    // 切换建筑
    changeBuilding(id){
      if(id!=this.selectedBuilding){
        this.$emit('component-building-change', id);
        
      }
    },
    // 切换楼层
    changeFloor(id) {
      if (id !== this.selectedFloor) {
        this.$emit('component-floor-change', id);
      }
     
    }
  }
});
</script>