<style lang="less">
.component-floor {
  border-radius: 16rpx;
  background: rgba(255, 255, 255, 0.9);
  .floor-wrapper{
    display: flex;
    flex-direction: column-reverse;
  }
  
}
.component-floor.fold .floor-item {
  background: none;
}

.component-floor .floor-item {
  width: 96rpx;
  height: 96rpx;

  font-weight: bold;
  font-size: 36rpx;
  line-height: 96rpx;
  color: rgba(13, 13, 61, 0.86);
  text-align: center;
}

.floor-item:first-child {
  border-radius: 16rpx 16rpx 0 0;
}
.floor-item.selected {
  background: #fbf0e0;
}
.floor-item:last-child {
  border-radius: 0 0 8px 8px;
}
.icon-arrow {
  width: 96rpx;
  height: 96rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.icon-arrow .icon {
  width: 20rpx;
  height: 24rpx;
}
</style>

<template>
  <div class="{{'component-floor '+status}}">
    <div class="floor-wrapper">
      <div
        class="floor-item"
        :class="{'selected' :selectedFloor == item.floorId}"
        v-for="(item) in floors"
        v-on:click.stop="changeFloor(item.floorId)"
        v-if="status=='expand' || (status=='fold' && selectedFloor == item.floorId)"
      >{{item.text}}</div>
    </div>
    <div class="icon-arrow" wx:if="{{status=='expand'}}">
    <image
      mode="scaleToFill"
      class="icon"
      src="{{h5StaticPath+ 'icon-floor-arrow.svg'}}"
      v-on:click.stop="flodFloor"
    />
  </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,
    status: 'fold',
    selectedFloor: String //选中的floor id
  },
  created() {},
  didUpdate() {},
  didUnmount() {},
  methods: {
    changeFloor(floorId) {
      if (floorId !== this.selectedFloor) {
        this.$emit('component-floor-change', floorId);
      }
      this.$emit('component-floor-click');
    },
    flodFloor() {
      this.$emit('component-floor-fold');
    }
  }
});
</script>