<template>
  <view class="room-detail-page">
    <view class="custom-nav safe-area-top">
      <view class="nav-content">
        <view class="nav-btn" @click="goBack">
          <uni-icons type="left" size="22" color="#1E293B"></uni-icons>
        </view>
        <text class="nav-title">房间详情</text>
        <view class="nav-btn" @click="editRoom">
          <uni-icons type="compose" size="22" color="#2563EB"></uni-icons>
        </view>
      </view>
    </view>

    <scroll-view scroll-y class="detail-content" v-if="room.id">
      <view class="room-header">
        <text class="room-number">{{room.roomNumber}}</text>
        <view class="room-status" :class="room.status">{{room.statusText}}</view>
      </view>

      <view class="info-section">
        <view class="section-title">基本信息</view>
        <view class="info-card">
          <view class="info-item">
            <text class="label">所属公寓</text>
            <text class="value">{{room.apartmentName}}</text>
          </view>
          <view class="info-divider"></view>
          <view class="info-item">
            <text class="label">房间面积</text>
            <text class="value">{{room.area || '--'}} m²</text>
          </view>
          <view class="info-divider"></view>
          <view class="info-item">
            <text class="label">房间朝向</text>
            <text class="value">{{room.orientation || '--'}}</text>
          </view>
          <view class="info-divider"></view>
          <view class="info-item">
            <text class="label">月租金</text>
            <text class="value price">¥{{room.rent || 0}}</text>
          </view>
        </view>
      </view>

      <view class="info-section" v-if="room.status === 'rented' && room.rental">
        <view class="section-title">当前租赁</view>
        <view class="rental-card" @click="viewRentalDetail">
          <view class="rental-header">
            <text class="renter-name">{{room.rental.renterName}}</text>
            <view class="rental-status" :class="room.rental.status">{{room.rental.statusText}}</view>
          </view>
          <view class="rental-period">{{room.rental.startDate}} ~ {{room.rental.endDate}}</view>
          <view class="rental-price">¥{{room.rental.rent}}/月</view>
        </view>
      </view>

      <view class="action-section">
        <view class="action-btn primary" v-if="room.status === 'vacant'" @click="addRental">
          <uni-icons type="plus" size="20" color="#FFFFFF"></uni-icons>
          <text>办理入住</text>
        </view>
        <view class="action-btn danger" @click="deleteRoom">
          <uni-icons type="trash" size="20" color="#FFFFFF"></uni-icons>
          <text>删除房间</text>
        </view>
      </view>

      <view class="safe-area-bottom" style="height: 40rpx;"></view>
    </scroll-view>

    <view class="loading-state" v-else-if="isLoading">
      <uni-load-more status="loading"></uni-load-more>
    </view>

    <view class="empty-state" v-else>
      <uni-icons type="home-filled" size="80" color="#CBD5E1"></uni-icons>
      <text class="empty-text">房间不存在</text>
      <button class="back-btn" @click="goBack">返回</button>
    </view>
  </view>
</template>

<script>
  import roomApi from '@/api/room.js'
  
  export default {
    data() {
      return {
        roomId: null,
        isLoading: false,
        room: {}
      }
    },
    onLoad(options) {
      if (options.id) {
        this.roomId = options.id
        this.loadRoomDetail(options.id)
      }
    },
    methods: {
      async loadRoomDetail(id) {
        this.isLoading = true
        try {
          const res = await roomApi.getDetail(id)
          if (res.data) {
            const data = res.data
            this.room = {
              id: data.id,
              roomNumber: data.roomNumber,
              area: data.area,
              orientation: data.orientation,
              rent: data.rent,
              status: data.status || 'vacant',
              statusText: data.status === 'rented' ? '已出租' : '空置中',
              apartmentName: data.Apartment?.name || '--',
              rental: data.Rental ? {
                id: data.Rental.id,
                renterName: data.Rental.Renter?.name,
                startDate: data.Rental.startDate,
                endDate: data.Rental.endDate,
                rent: data.Rental.rent,
                status: data.Rental.status,
                statusText: this.getStatusText(data.Rental.status)
              } : null
            }
          }
        } catch (error) {
          console.error('加载房间详情失败:', error)
          uni.showToast({ title: '加载失败', icon: 'none' })
        } finally {
          this.isLoading = false
        }
      },
      editRoom() {
        uni.navigateTo({ url: `/pages/room-add/room-add?id=${this.roomId}&mode=edit` })
      },
      addRental() {
        uni.navigateTo({ url: `/pages/rental-add/rental-add?roomId=${this.roomId}` })
      },
      viewRentalDetail() {
        if (this.room.rental) {
          uni.navigateTo({ url: `/pages/rental-detail/rental-detail?id=${this.room.rental.id}` })
        }
      },
      deleteRoom() {
        uni.showModal({
          title: '确认删除',
          content: `确定要删除房间"${this.room.roomNumber}"吗？`,
          confirmColor: '#EF4444',
          success: async (res) => {
            if (res.confirm) {
              try {
                await roomApi.delete(this.roomId)
                uni.showToast({ title: '删除成功', icon: 'success' })
                setTimeout(() => uni.navigateBack(), 1500)
              } catch (error) {
                uni.showToast({ title: '删除失败', icon: 'none' })
              }
            }
          }
        })
      },
      goBack() {
        uni.navigateBack()
      },
      getStatusText(status) {
        const map = { active: '在租', expired: '已到期', terminated: '已终止' }
        return map[status] || status
      }
    }
  }
</script>

<style scoped>
  .room-detail-page {
    min-height: 100vh;
    background: #F8FAFC;
    display: flex;
    flex-direction: column;
  }
  .custom-nav {
    background: #FFFFFF;
    border-bottom: 2rpx solid #F1F5F9;
  }
  .nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 32rpx;
  }
  .nav-btn {
    width: 72rpx;
    height: 72rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }
  .nav-title {
    font-size: 34rpx;
    font-weight: 600;
    color: #1E293B;
  }
  .detail-content {
    flex: 1;
    padding: 24rpx 32rpx;
  }
  .room-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 32rpx;
    margin-bottom: 24rpx;
  }
  .room-number {
    font-size: 48rpx;
    font-weight: 700;
    color: #1E293B;
  }
  .room-status {
    padding: 8rpx 20rpx;
    border-radius: 8rpx;
    font-size: 24rpx;
    font-weight: 500;
  }
  .room-status.vacant {
    background: #D1FAE5;
    color: #059669;
  }
  .room-status.rented {
    background: #DBEAFE;
    color: #2563EB;
  }
  .info-section {
    margin-bottom: 24rpx;
  }
  .section-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 16rpx;
  }
  .info-card {
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 0 24rpx;
  }
  .info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx 0;
  }
  .label {
    font-size: 28rpx;
    color: #64748B;
  }
  .value {
    font-size: 28rpx;
    color: #1E293B;
    font-weight: 500;
  }
  .value.price {
    color: #EF4444;
    font-weight: 700;
  }
  .info-divider {
    height: 2rpx;
    background: #F1F5F9;
  }
  .rental-card {
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 24rpx;
  }
  .rental-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12rpx;
  }
  .renter-name {
    font-size: 30rpx;
    font-weight: 600;
    color: #1E293B;
  }
  .rental-status {
    padding: 4rpx 12rpx;
    border-radius: 6rpx;
    font-size: 20rpx;
  }
  .rental-status.active {
    background: #D1FAE5;
    color: #059669;
  }
  .rental-period {
    font-size: 24rpx;
    color: #64748B;
    margin-bottom: 8rpx;
  }
  .rental-price {
    font-size: 28rpx;
    color: #EF4444;
    font-weight: 600;
  }
  .action-section {
    display: flex;
    gap: 24rpx;
    margin-top: 32rpx;
  }
  .action-btn {
    flex: 1;
    height: 88rpx;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12rpx;
  }
  .action-btn.primary {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    box-shadow: 0 8rpx 24rpx rgba(37, 99, 235, 0.3);
  }
  .action-btn.danger {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    box-shadow: 0 8rpx 24rpx rgba(239, 68, 68, 0.3);
  }
  .action-btn text {
    font-size: 30rpx;
    font-weight: 600;
    color: #FFFFFF;
  }
  .loading-state, .empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 120rpx;
  }
  .empty-text {
    font-size: 30rpx;
    color: #64748B;
    margin: 24rpx 0 40rpx;
  }
  .back-btn {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: #FFFFFF;
    font-size: 30rpx;
    font-weight: 600;
    padding: 24rpx 80rpx;
    border-radius: 16rpx;
    border: none;
  }
</style>
