<template>
  <view class="house-container">
    <!-- 房屋列表 -->
    <view class="house-list">
      <view 
        class="house-item" 
        :class="{ active: selectedHouse.id === item.id }"
        @click="selectHouse(item)"
        v-for="item in houseList" 
        :key="item.id"
      >
	  <image src="https://wuye.ckdzkj.com/images/repair/house.png" style="width: 48rpx;height: 48rpx;"></image>
        <view class="house-name">
			{{ item.villageName }}
		<view class="house-detail">{{item.unitNo}}-{{item.floorNo}}-{{item.houseNo}}</view>
		</view>
        
        <uni-icons type="checkbox-filled" size="20" color="#007aff" v-if="selectedHouse.id === item.id"></uni-icons>
      </view>
	  <!-- 空状态 -->
	  <view v-if="houseList.length === 0" class="empty-state">
	  	<uni-icons type="info" size="30" color="#ccc"></uni-icons>
	  	<text class="empty-text">
	  		暂无房屋数据
	  	</text>
	  </view>
	  
    </view>

    <!-- 确认按钮（固定底部，不随内容滚动） -->
    <view class="confirm-bar">
      <button class="confirm-btn" @click="confirmSelect">确认</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getHouseList } from '../api/api.js'

// 房屋列表数据
const houseList = ref([])

// 选中的房屋
const selectedHouse = ref({})

// 分页参数
const pageNum = ref(1)
const pageSize = ref(10)

// 预传入的房屋ID（从表单页带过来）
const preSelectedHouseId = ref('')

// 获取房屋列表
const fetchHouseList = async () => {
  try {
    const res = await getHouseList({ pageNum: pageNum.value, pageSize: pageSize.value })
    if (res.code === 200) {
      const list = res.data || []
      houseList.value = list
      // 仅当从表单页带入了房屋ID时，自动选中对应房屋；否则不默认选择
      if (preSelectedHouseId.value) {
        const found = houseList.value.find(item => String(item.id) === String(preSelectedHouseId.value))
        if (found) {
          selectedHouse.value = found
        }
      }
    }
  } catch (e) {
    uni.showToast({ title: '获取房屋列表失败', icon: 'none' })
  }
}

onLoad((options) => {
  if (options.houseId) {
    preSelectedHouseId.value = options.houseId
  }
  fetchHouseList()
})

// 选择房屋
const selectHouse = (item) => {
  selectedHouse.value = item
}

// 确认选择并返回
const confirmSelect = () => {
  if (!selectedHouse.value.id) {
    uni.showToast({ title: '请选择房屋', icon: 'none' })
    return
  }
  
  // 把选中的房屋信息传给表单页（通过uni.$emit）
  uni.$emit('selectHouse', {
    id: selectedHouse.value.id,
    name: `${selectedHouse.value.villageName} ${selectedHouse.value.unitNo}-${selectedHouse.value.floorNo}-${selectedHouse.value.houseNo}`,
    residentId: selectedHouse.value.residentId
  })
  
  // 返回上一页
  uni.navigateBack({ delta: 1 })
}
</script>

<style scoped>
.house-container {
  padding: 15px;
  height: 100vh;
  box-sizing: border-box;
  background: #f9f9f9;
}
.house-list {
  height: 100%;
  overflow-y: auto;
  padding-bottom: 120rpx;
}
.house-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 15px 10px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 10px;
}
.house-item.active {
  border-color: #007aff;
  background: #f0f8ff;
  border: 1px solid #2F77FD;
}
.house-name {
  font-size: 16px;
  color: #333;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 30rpx;
  width: 80%;
}
.house-detail {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}
.confirm-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  background: #f9f9f9;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.confirm-btn {
  width: 100%;
  height: 44px;
  line-height: 44px;
  background: #007aff;
  color: #fff;
  border-radius: 8px;
  font-size: 28rpx;
}
/* 空状态 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
	color: #ccc;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
	margin-top: 20rpx;
	margin-bottom: 10rpx;
}
</style>