<template>
  <view class="select-room-page">
    <u-sticky bgColor="white">
      <u-tabs :list="tabList" @click="changeTab" :scrollable="false" :current="tabIndex"/>
      <!-- 搜索框 -->
      <view class="search-container">
        <view class="search-box">
          <text class="search-icon">🔍</text>
          <input
            class="search-input"
            v-model="searchKeyword"
            :placeholder="`搜索${tabIndex === 0 ? '楼栋' : (tabIndex === 1 ? '单元' : '房屋')}信息`"
            @input="onSearchInput"
          />
        </view>
      </view>
      <view class="flex justify-start items-center text-25 p-20" v-if="building">
        <text class="mr-15" v-if="building">{{ building.name }}</text>
        <template v-if="unit">
          <u-icon name="arrow-right" size="20rpx"/>
          <text class="mx-15">{{ unit.name }}</text>
        </template>
        <template v-if="room">
          <u-icon name="arrow-right" size="20rpx"/>
          <text class="mx-15" v-if="room">{{ room.roomNumber }}</text>
        </template>
      </view>
    </u-sticky>
    <view class="room-list">
      <template v-if="tabIndex === 0">
        <view
          class="room-item"
          v-for="(item, index) in buildingListFilter"
          :key="index"
          @click="selectBuilding(item)"
        >
          <view class="room-info">
            <view class="room-name" :style="{color: building.buildCode === item.buildCode ? '#98C147' : ''}">{{
                item.name
              }}
            </view>
          </view>
          <view class="room-arrow">›</view>
        </view>
      </template>
      <template v-else-if="tabIndex === 1">
        <view
          class="room-item"
          v-for="(item, index) in unitListFilter"
          :key="index"
          @click="selectUnit(item)"
        >
          <view class="room-info">
            <view class="room-name" :style="{color: unit.unitCode === item.unitCode ? '#98C147' : ''}">{{
                item.name
              }}
            </view>
          </view>
          <view class="room-arrow">›</view>
        </view>
      </template>
      <template v-else-if="tabIndex === 2">
        <view
          class="room-item" :style="{color: room.roomCode === item.roomCode ? '#98C147' : ''}"
          v-for="(item, index) in roomListFilter"
          :key="index"
          @click="selectRoom(item)"
        >
          <view class="room-info">
            <view class="room-name">{{
                item.roomNumber
              }}
            </view>
          </view>
          <view class="room-arrow">›</view>
        </view>
      </template>
    </view>


    <!-- 房屋列表 -->
    <!--    <view class="room-list" :style="{paddingTop: '120rpx'}">-->
    <!--      <view-->
    <!--        class="room-item"-->
    <!--        v-for="(item, index) in filteredRoomList"-->
    <!--        :key="index"-->
    <!--        @click="selectRoom(item)"-->
    <!--      >-->
    <!--        <view class="room-info">-->
    <!--          <view class="room-name">{{ item.title }}</view>-->
    <!--        </view>-->
    <!--        <view class="room-arrow">›</view>-->
    <!--      </view>-->
    <!--    </view>-->

    <!--    &lt;!&ndash; 加载状态 &ndash;&gt;-->
    <!--    <view class="loading-container" v-if="loading">-->
    <!--      <text class="loading-text">加载中...</text>-->
    <!--    </view>-->

    <!--    &lt;!&ndash; 空状态 &ndash;&gt;-->
    <!--    <view class="empty-container" v-if="!loading && filteredRoomList.length === 0">-->
    <!--      <text class="empty-text">暂无房屋数据</text>-->
    <!--    </view>-->
  </view>
</template>

<script>
import {miniRoomListReq, roomListReq} from '@/api/common.js'
import {listBuildingReq, listUnitReq} from "@/api/room";

export default {
  data() {
    return {
      statusBarHeight: 0,
      searchKeyword: '',
      buildingList: [],
      buildingListFilter: [],
      unitList: [],
      unitListFilter: [],
      roomList: [],
      roomListFilter: [],
      filteredRoomList: [],
      loading: true,
      villageCode: '',
      buildingCode: '',
      unitCode: '',
      tabList: [
        {
          name: '楼栋',
          disabled: false
        },
        {
          name: '单元',
          disabled: true
        },
        {
          name: '房号',
          disabled: true
        },
      ],
      tabIndex: 0,
      building: null,
      unit: null,
      room: null,
    }
  },
  onLoad(options) {
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight

    // 获取传入的小区代码
    if (options.villageCode) {
      this.villageCode = options.villageCode
    }

    // 加载房屋列表
    // this.loadRoomList()
    this.getBuildingList()
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('roomData', async data => {
      console.log(data)
      if (data) {
        this.tabList[1].disabled = false
        this.tabList[2].disabled = false
        this.buildingCode = data.baseBuildingBuildCode
        this.unitCode = data.baseUnitUnitCode
        await this.getBuildingList()
        this.building = this.buildingList.find(item => item.buildCode === data.baseBuildingBuildCode)
        await this.getUnitList()
        this.unit = this.unitList.find(item => item.unitCode === data.baseUnitUnitCode)
        await this.getRoomList()
        this.room = data
      }
    })
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    changeTab({index}) {
      this.tabIndex = index
    },
    async getBuildingList() {
      const {data} = await listBuildingReq({
        baseVillageVillageCode: this.villageCode
      })
      const list = data.filter(item => item.isDeleted === 0)
      this.buildingList = JSON.parse(JSON.stringify(list))
      this.buildingListFilter = list
    },
    onSearchInput() {
      console.log(this.searchKeyword)
      if (this.tabIndex === 0) {
        if (!this.searchKeyword) this.buildingListFilter = this.buildingList
        else this.buildingListFilter = this.buildingList.filter(item => item.name.includes(this.searchKeyword))
      } else if (this.tabIndex === 1) {
        if (!this.searchKeyword) this.unitListFilter = this.unitList
        else this.unitListFilter = this.unitList.filter(item => item.name.includes(this.searchKeyword))
      } else if (this.tabIndex === 2) {
        if (!this.searchKeyword) this.roomListFilter = this.roomList
        else this.roomListFilter = this.roomList.filter(item => item.roomNumber.includes(this.searchKeyword))
      }
      this.$forceUpdate()
      console.log(this.buildingListFilter)
    },
    selectBuilding(building) {
      this.building = building
      this.buildingCode = building.buildCode
      this.tabList[1].disabled = false
      this.tabIndex = 1
      this.searchKeyword = ''
      uni.pageScrollTo( {scrollTop: 0})
      this.getUnitList()
    },
    async getUnitList() {
      const {data} = await listUnitReq({
        baseBuildingBuildCode: this.buildingCode
      })
      this.unitList = JSON.parse(JSON.stringify(data))
      this.unitListFilter = data
    },
    selectUnit(unit) {
      this.unit = unit
      this.unitCode = unit.unitCode
      this.tabList[2].disabled = false
      this.tabIndex = 2
      this.searchKeyword = ''
      uni.pageScrollTo( {scrollTop: 0})
      this.getRoomList()
    },
    async getRoomList() {
      const {data} = await miniRoomListReq({
        baseUnitUnitCode: this.unitCode
      })
      const list = data.map(item => {
        item.title = ''
        if (item.building) item.title = item.building
        if (item.unit) item.title += item.unit
        item.title += item.roomNumber
        return item
      }).filter(item => !item.owner )
      this.roomList = JSON.parse(JSON.stringify(list))
      this.roomListFilter = list
    },
    selectRoom(room) {
      this.room = room
      const eventChannel = this.getOpenerEventChannel();
      eventChannel.emit('select', room);
      uni.navigateBack()
    }
  }
}
</script>

<style scoped lang="scss">
.select-room-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.search-container {
  padding: 24rpx 32rpx;
  background: #fff;
  border-bottom: 1rpx solid #eee;
}

.search-box {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 48rpx;
  padding: 0 32rpx;
  height: 80rpx;
}

.search-icon {
  font-size: 32rpx;
  color: #999;
  margin-right: 16rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.room-list {
  background: #fff;
  margin-top: 16rpx;
  min-height: calc(100vh - 200rpx);
}

.room-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
  border-bottom: 1rpx solid #f5f5f5;

  &:last-child {
    border-bottom: none;
  }

  &:active {
    background: #f8f8f8;
  }
}

.room-info {
  flex: 1;
}

.room-name {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.room-detail {
  font-size: 26rpx;
  color: #999;
}

.room-arrow {
  font-size: 36rpx;
  color: #ccc;
  font-weight: 300;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80rpx 0;
}

.loading-text {
  font-size: 28rpx;
  color: #999;
}

.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 120rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>
