<template>
  <view class="properties-page">
    <!-- 自定义导航栏 -->
    <view class="custom-nav safe-area-top">
      <view class="nav-content">
        <text class="nav-title">房态管理</text>
        <view class="nav-actions">
          <view class="nav-btn" @click="showFilter">
            <uni-icons type="settings-filled" size="22" color="#1E293B"></uni-icons>
          </view>
          <view class="nav-btn primary" @click="addProperty">
            <uni-icons type="plus" size="22" color="#FFFFFF"></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <!-- 公寓选择器 -->
    <view class="apartment-tabs" v-if="apartments.length > 0">
      <scroll-view scroll-x class="tabs-scroll" show-scrollbar="false">
        <view 
          v-for="(apt, index) in apartments" 
          :key="index"
          class="tab-item"
          :class="{ active: selectedApartmentId === apt.id }"
          @click="selectApartment(apt.id)"
        >
          <text class="tab-name">{{apt.name}}</text>
          <text class="tab-count">{{apt.roomCount}}间</text>
          <view v-if="selectedApartmentId === apt.id" class="tab-indicator"></view>
        </view>
      </scroll-view>
    </view>

    <!-- 状态筛选 -->
    <view class="status-filter">
      <view 
        v-for="(filter, index) in statusFilters" 
        :key="index"
        class="filter-item"
        :class="{ active: currentFilter === filter.value }"
        @click="setFilter(filter.value)"
      >
        <view class="filter-dot" :style="{ background: filter.color }"></view>
        <text>{{filter.label}}</text>
        <text class="filter-count">({{getStatusCount(filter.value)}})</text>
      </view>
    </view>

    <!-- 房间网格 -->
    <scroll-view scroll-y class="room-grid" @scrolltolower="loadMore" refresher-enabled :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh">
      <view v-if="filteredRooms.length === 0 && !isLoading" class="empty-state">
        <view class="empty-icon">
          <uni-icons type="home-filled" size="80" color="#CBD5E1"></uni-icons>
        </view>
        <text class="empty-title">暂无房间</text>
        <text class="empty-desc">点击右上角添加房间</text>
        <button class="empty-btn" @click="addRoom">添加房间</button>
      </view>

      <view v-else class="grid-content">
        <view 
          v-for="(room, index) in filteredRooms" 
          :key="index"
          class="room-card"
          :class="room.status"
          @click="handleRoomClick(room)"
        >
          <view class="room-header">
            <text class="room-number">{{room.roomNumber}}</text>
            <view class="room-status-badge" :style="{ background: getStatusColor(room.status) }">
              {{getStatusText(room.status)}}
            </view>
          </view>
          
          <view class="room-info">
            <view class="info-row">
              <text class="info-label">面积</text>
              <text class="info-value">{{room.area || '--'}} m²</text>
            </view>
            <view class="info-row">
              <text class="info-label">租金</text>
              <text class="info-value price">¥{{room.rent || 0}}/月</text>
            </view>
          </view>

          <view class="room-footer" v-if="room.renterName">
            <view class="renter-info">
              <uni-icons type="person" size="14" color="#64748B"></uni-icons>
              <text class="renter-name">{{room.renterName}}</text>
            </view>
            <view class="expire-tag" v-if="room.isExpiringSoon">
              <uni-icons type="clock" size="12" color="#F56C6C"></uni-icons>
              <text>{{room.remainingDays}}天到期</text>
            </view>
          </view>

          <view class="room-actions" @click.stop>
            <view v-if="room.status === 'empty'" class="action-btn rent" @click="rentRoom(room)">
              <text>出租</text>
            </view>
            <view v-if="room.status === 'empty'" class="action-btn reserve" @click="reserveRoom(room)">
              <text>预订</text>
            </view>
            <view v-if="room.status === 'reserved'" class="action-btn confirm" @click="confirmRent(room)">
              <text>确认入住</text>
            </view>
            <view v-if="room.status === 'rented'" class="action-btn bill" @click="createBill(room)">
              <text>记账</text>
            </view>
          </view>
        </view>
      </view>

      <uni-load-more v-if="filteredRooms.length > 0" :status="loadStatus"></uni-load-more>
      <view class="safe-area-bottom" style="height: 40rpx;"></view>
    </scroll-view>

    <!-- 底部统计栏 -->
    <view class="bottom-stats">
      <view class="stat-item">
        <text class="stat-value">{{currentApartmentStats.total}}</text>
        <text class="stat-label">总房间</text>
      </view>
      <view class="stat-item">
        <text class="stat-value" style="color: #67C23A;">{{currentApartmentStats.rented}}</text>
        <text class="stat-label">在租</text>
      </view>
      <view class="stat-item">
        <text class="stat-value" style="color: #909399;">{{currentApartmentStats.empty}}</text>
        <text class="stat-label">空房</text>
      </view>
      <view class="stat-item">
        <text class="stat-value" style="color: #409EFF;">{{currentApartmentStats.occupancyRate}}%</text>
        <text class="stat-label">出租率</text>
      </view>
    </view>
  </view>
</template>

<script>
  import apartmentApi from '@/api/apartment.js'
  import roomApi from '@/api/room.js'
  
  export default {
    data() {
      return {
        isLoading: false,
        isRefreshing: false,
        apartments: [],
        selectedApartmentId: null,
        rooms: [],
        currentFilter: 'all',
        loadStatus: 'more',
        page: 1,
        pageSize: 20,
        statusFilters: [
          { label: '全部', value: 'all', color: '#409EFF' },
          { label: '空房', value: 'empty', color: '#909399' },
          { label: '已预订', value: 'reserved', color: '#E6A23C' },
          { label: '在租', value: 'rented', color: '#67C23A' },
          { label: '即将到期', value: 'soon_expire', color: '#F56C6C' },
          { label: '已到期', value: 'expired', color: '#F56C6C' }
        ]
      }
    },
    computed: {
      filteredRooms() {
        let list = this.rooms
        if (this.currentFilter !== 'all') {
          list = list.filter(room => room.status === this.currentFilter)
        }
        return list
      },
      currentApartmentStats() {
        const apt = this.apartments.find(a => a.id === this.selectedApartmentId)
        if (!apt) return { total: 0, rented: 0, empty: 0, occupancyRate: 0 }
        const total = this.rooms.length
        const rented = this.rooms.filter(r => r.status === 'rented').length
        const empty = this.rooms.filter(r => r.status === 'empty').length
        return {
          total,
          rented,
          empty,
          occupancyRate: total > 0 ? Math.round((rented / total) * 100) : 0
        }
      }
    },
    onLoad(options) {
      this.loadApartments()
    },
    onShow() {
      if (this.selectedApartmentId) {
        this.loadRooms()
      }
    },
    methods: {
      async loadApartments() {
        try {
          const res = await apartmentApi.getList({ pageSize: 999 })
          if (res.data) {
            this.apartments = res.data.map(apt => ({
              id: apt.id,
              name: apt.name,
              roomCount: apt.roomCount || 0
            }))
            if (this.apartments.length > 0 && !this.selectedApartmentId) {
              this.selectedApartmentId = this.apartments[0].id
              this.loadRooms()
            }
          }
        } catch (error) {
          console.error('加载公寓列表失败:', error)
        }
      },
      
      async loadRooms() {
        if (!this.selectedApartmentId) return
        this.isLoading = true
        try {
          const res = await roomApi.getList({
            apartmentId: this.selectedApartmentId,
            page: this.page,
            pageSize: this.pageSize
          })
          if (res.data) {
            const list = res.data.map(room => ({
              id: room.id,
              roomNumber: room.roomNumber,
              area: room.area,
              rent: room.rent,
              status: this.getRoomStatus(room),
              renterName: room.Renter?.name,
              renterPhone: room.Renter?.phone,
              rentalId: room.Rental?.id,
              endDate: room.Rental?.endDate,
              isExpiringSoon: this.isExpiringSoon(room.Rental?.endDate),
              remainingDays: this.getRemainingDays(room.Rental?.endDate)
            }))
            if (this.page === 1) {
              this.rooms = list
            } else {
              this.rooms = [...this.rooms, ...list]
            }
            this.loadStatus = this.rooms.length < (res.total || 0) ? 'more' : 'noMore'
          }
        } catch (error) {
          console.error('加载房间列表失败:', error)
        } finally {
          this.isLoading = false
          this.isRefreshing = false
        }
      },
      
      getRoomStatus(room) {
        if (!room.Rental) return 'empty'
        const status = room.Rental.status
        const endDate = new Date(room.Rental.endDate)
        const now = new Date()
        const daysUntilExpire = Math.ceil((endDate - now) / (1000 * 60 * 60 * 24))
        
        if (status === 'active') {
          if (daysUntilExpire < 0) return 'expired'
          if (daysUntilExpire <= 7) return 'soon_expire'
          return 'rented'
        }
        return status
      },
      
      isExpiringSoon(endDate) {
        if (!endDate) return false
        const days = this.getRemainingDays(endDate)
        return days >= 0 && days <= 7
      },
      
      getRemainingDays(endDate) {
        if (!endDate) return 0
        const end = new Date(endDate)
        const now = new Date()
        return Math.ceil((end - now) / (1000 * 60 * 60 * 24))
      },
      
      selectApartment(id) {
        this.selectedApartmentId = id
        this.page = 1
        this.loadRooms()
      },
      
      setFilter(value) {
        this.currentFilter = value
      },
      
      getStatusCount(status) {
        if (status === 'all') return this.rooms.length
        return this.rooms.filter(r => r.status === status).length
      },
      
      getStatusColor(status) {
        const colors = {
          empty: '#909399',
          reserved: '#E6A23C',
          rented: '#67C23A',
          soon_expire: '#F56C6C',
          expired: '#F56C6C'
        }
        return colors[status] || '#909399'
      },
      
      getStatusText(status) {
        const texts = {
          empty: '空房',
          reserved: '已预订',
          rented: '在租',
          soon_expire: '即将到期',
          expired: '已到期'
        }
        return texts[status] || status
      },
      
      handleRoomClick(room) {
        uni.navigateTo({
          url: `/pages/room-detail/room-detail?id=${room.id}`
        })
      },
      
      rentRoom(room) {
        uni.navigateTo({
          url: `/pages/rental-add/rental-add?roomId=${room.id}`
        })
      },
      
      reserveRoom(room) {
        uni.showModal({
          title: '预订房间',
          content: `确定要预订房间 ${room.roomNumber} 吗？`,
          success: (res) => {
            if (res.confirm) {
              uni.showToast({ title: '预订功能开发中', icon: 'none' })
            }
          }
        })
      },
      
      confirmRent(room) {
        uni.navigateTo({
          url: `/pages/rental-add/rental-add?roomId=${room.id}`
        })
      },
      
      createBill(room) {
        uni.navigateTo({
          url: `/pages/bill-add/bill-add?roomId=${room.id}&renterId=${room.renterId}`
        })
      },
      
      addProperty() {
        uni.showActionSheet({
          itemList: ['添加公寓', '添加房间'],
          success: (res) => {
            if (res.tapIndex === 0) {
              uni.navigateTo({ url: '/pages/property-add/property-add' })
            } else {
              this.addRoom()
            }
          }
        })
      },
      
      addRoom() {
        if (!this.selectedApartmentId) {
          uni.showToast({ title: '请先选择公寓', icon: 'none' })
          return
        }
        uni.navigateTo({
          url: `/pages/room-add/room-add?apartmentId=${this.selectedApartmentId}`
        })
      },
      
      onRefresh() {
        this.isRefreshing = true
        this.page = 1
        this.loadRooms()
      },
      
      loadMore() {
        if (this.loadStatus === 'noMore') return
        this.loadStatus = 'loading'
        this.page++
        this.loadRooms()
      },
      
      showFilter() {
        uni.showToast({ title: '筛选功能', icon: 'none' })
      }
    }
  }
</script>

<style scoped>
  .properties-page {
    min-height: 100vh;
    background: #F8FAFC;
    display: flex;
    flex-direction: column;
    padding-bottom: 120rpx;
  }

  /* 导航栏 */
  .custom-nav {
    background: #FFFFFF;
    border-bottom: 2rpx solid #F1F5F9;
  }

  .nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 32rpx;
  }

  .nav-title {
    font-size: 36rpx;
    font-weight: 700;
    color: #1E293B;
  }

  .nav-actions {
    display: flex;
    gap: 16rpx;
  }

  .nav-btn {
    width: 72rpx;
    height: 72rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #F8FAFC;
  }

  .nav-btn.primary {
    background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
  }

  /* 公寓标签 */
  .apartment-tabs {
    background: #FFFFFF;
    padding: 20rpx 0;
    border-bottom: 2rpx solid #F1F5F9;
  }

  .tabs-scroll {
    white-space: nowrap;
    padding: 0 32rpx;
  }

  .tab-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 16rpx 32rpx;
    margin-right: 16rpx;
    border-radius: 16rpx;
    background: #F8FAFC;
    position: relative;
  }

  .tab-item.active {
    background: #EFF6FF;
  }

  .tab-name {
    font-size: 28rpx;
    font-weight: 600;
    color: #1E293B;
  }

  .tab-count {
    font-size: 22rpx;
    color: #64748B;
    margin-top: 4rpx;
  }

  .tab-indicator {
    position: absolute;
    bottom: -20rpx;
    width: 40rpx;
    height: 4rpx;
    background: #409EFF;
    border-radius: 2rpx;
  }

  /* 状态筛选 */
  .status-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
    padding: 24rpx 32rpx;
    background: #FFFFFF;
  }

  .filter-item {
    display: flex;
    align-items: center;
    gap: 8rpx;
    padding: 12rpx 20rpx;
    background: #F8FAFC;
    border-radius: 8rpx;
    font-size: 24rpx;
    color: #64748B;
  }

  .filter-item.active {
    background: #EFF6FF;
    color: #409EFF;
  }

  .filter-dot {
    width: 12rpx;
    height: 12rpx;
    border-radius: 50%;
  }

  .filter-count {
    font-size: 22rpx;
    color: #94A3B8;
  }

  /* 房间网格 */
  .room-grid {
    flex: 1;
    padding: 24rpx 32rpx;
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 120rpx 60rpx;
  }

  .empty-icon {
    margin-bottom: 32rpx;
  }

  .empty-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 12rpx;
  }

  .empty-desc {
    font-size: 26rpx;
    color: #94A3B8;
    margin-bottom: 40rpx;
  }

  .empty-btn {
    background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
    color: #FFFFFF;
    font-size: 30rpx;
    font-weight: 600;
    padding: 24rpx 60rpx;
    border-radius: 16rpx;
    border: none;
  }

  .grid-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
  }

  .room-card {
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 24rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
    border: 2rpx solid transparent;
  }

  .room-card.empty {
    border-color: #E4E7ED;
  }

  .room-card.reserved {
    border-color: #FDF6EC;
    background: #FDF6EC;
  }

  .room-card.rented {
    border-color: #F0F9EB;
    background: #F0F9EB;
  }

  .room-card.soon_expire,
  .room-card.expired {
    border-color: #FEF0F0;
    background: #FEF0F0;
  }

  .room-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16rpx;
  }

  .room-number {
    font-size: 36rpx;
    font-weight: 700;
    color: #1E293B;
  }

  .room-status-badge {
    padding: 6rpx 16rpx;
    border-radius: 8rpx;
    font-size: 20rpx;
    color: #FFFFFF;
    font-weight: 500;
  }

  .room-info {
    margin-bottom: 16rpx;
  }

  .info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8rpx;
  }

  .info-label {
    font-size: 24rpx;
    color: #909399;
  }

  .info-value {
    font-size: 24rpx;
    color: #1E293B;
  }

  .info-value.price {
    color: #F56C6C;
    font-weight: 600;
  }

  .room-footer {
    padding-top: 16rpx;
    border-top: 2rpx solid #F1F5F9;
    margin-bottom: 16rpx;
  }

  .renter-info {
    display: flex;
    align-items: center;
    gap: 8rpx;
    margin-bottom: 8rpx;
  }

  .renter-name {
    font-size: 26rpx;
    color: #1E293B;
  }

  .expire-tag {
    display: flex;
    align-items: center;
    gap: 4rpx;
    font-size: 22rpx;
    color: #F56C6C;
  }

  .room-actions {
    display: flex;
    gap: 12rpx;
  }

  .action-btn {
    flex: 1;
    height: 56rpx;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .action-btn text {
    font-size: 24rpx;
    font-weight: 500;
  }

  .action-btn.rent {
    background: #409EFF;
  }

  .action-btn.rent text {
    color: #FFFFFF;
  }

  .action-btn.reserve {
    background: #E6A23C;
  }

  .action-btn.reserve text {
    color: #FFFFFF;
  }

  .action-btn.confirm {
    background: #67C23A;
  }

  .action-btn.confirm text {
    color: #FFFFFF;
  }

  .action-btn.bill {
    background: #909399;
  }

  .action-btn.bill text {
    color: #FFFFFF;
  }

  /* 底部统计 */
  .bottom-stats {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    background: #FFFFFF;
    padding: 20rpx 32rpx;
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
    border-top: 2rpx solid #F1F5F9;
    box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
  }

  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .stat-value {
    font-size: 32rpx;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 4rpx;
  }

  .stat-label {
    font-size: 22rpx;
    color: #909399;
  }
</style>
