<template>
  <view class="apartment-detail-page">
    <!-- 自定义导航栏 -->
    <view class="custom-nav safe-area-top">
      <view class="nav-content">
        <view class="nav-back" @click="goBack">
          <uni-icons type="left" size="20" color="#1E293B"></uni-icons>
        </view>
        <text class="nav-title">公寓详情</text>
        <view class="nav-actions">
          <view class="nav-btn" @click="editApartment">
            <uni-icons type="compose" size="20" color="#2563EB"></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <scroll-view scroll-y class="page-content" v-if="apartment">
      <!-- 公寓信息卡片 -->
      <view class="info-card">
        <view class="apartment-header">
          <text class="apartment-name">{{apartment.name}}</text>
          <view class="apartment-status" :class="apartment.status">
            <text>{{getStatusText(apartment.status)}}</text>
          </view>
        </view>
        <view class="apartment-address" v-if="apartment.address">
          <uni-icons type="location" size="16" color="#64748B"></uni-icons>
          <text>{{apartment.address}}</text>
        </view>
        <view class="apartment-contact" v-if="apartment.manager || apartment.phone">
          <view class="contact-item" v-if="apartment.manager">
            <uni-icons type="person" size="16" color="#64748B"></uni-icons>
            <text>负责人: {{apartment.manager}}</text>
          </view>
          <view class="contact-item" v-if="apartment.phone">
            <uni-icons type="phone" size="16" color="#64748B"></uni-icons>
            <text>{{apartment.phone}}</text>
          </view>
        </view>
      </view>

      <!-- 统计概览 -->
      <view class="stats-section">
        <view class="section-title">房间统计</view>
        <view class="stats-grid">
          <view class="stat-card">
            <text class="stat-num">{{stats.total}}</text>
            <text class="stat-label">总房间</text>
          </view>
          <view class="stat-card">
            <text class="stat-num empty">{{stats.empty}}</text>
            <text class="stat-label">空房</text>
          </view>
          <view class="stat-card">
            <text class="stat-num rented">{{stats.rented}}</text>
            <text class="stat-label">在租</text>
          </view>
          <view class="stat-card">
            <text class="stat-num reserved">{{stats.reserved}}</text>
            <text class="stat-label">已预订</text>
          </view>
        </view>
      </view>

      <!-- 快捷操作 -->
      <view class="quick-actions">
        <view class="section-title">快捷操作</view>
        <view class="action-grid">
          <view class="action-item" @click="viewRooms">
            <view class="action-icon rooms">
              <uni-icons type="home-filled" size="28" color="#FFFFFF"></uni-icons>
            </view>
            <text class="action-text">查看房源</text>
          </view>
          <view class="action-item" @click="addRoom">
            <view class="action-icon add">
              <uni-icons type="plus-filled" size="28" color="#FFFFFF"></uni-icons>
            </view>
            <text class="action-text">添加房间</text>
          </view>
          <view class="action-item" @click="viewStats">
            <view class="action-icon stats">
              <uni-icons type="chart-filled" size="28" color="#FFFFFF"></uni-icons>
            </view>
            <text class="action-text">收益统计</text>
          </view>
        </view>
      </view>

      <!-- 备注信息 -->
      <view class="remark-section" v-if="apartment.remark">
        <view class="section-title">备注信息</view>
        <view class="remark-card">
          <text class="remark-text">{{apartment.remark}}</text>
        </view>
      </view>

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

<script>
  import { apartmentApi, roomApi } from '../../api/index.js'

  export default {
    data() {
      return {
        apartmentId: null,
        apartment: null,
        stats: {
          total: 0,
          empty: 0,
          rented: 0,
          reserved: 0
        }
      }
    },
    onLoad(options) {
      if (options.id) {
        this.apartmentId = options.id
        this.loadData()
      }
    },
    onShow() {
      if (this.apartmentId) {
        this.loadData()
      }
    },
    methods: {
      async loadData() {
        try {
          uni.showLoading({ title: '加载中...' })
          
          // 加载公寓详情
          const aptRes = await apartmentApi.getDetail(this.apartmentId)
          this.apartment = aptRes.data || {}
          
          // 加载房间统计
          const roomRes = await roomApi.list({ apartmentId: this.apartmentId })
          const rooms = roomRes.data || []
          
          this.stats = {
            total: rooms.length,
            empty: rooms.filter(r => r.status === 'empty').length,
            rented: rooms.filter(r => r.status === 'rented').length,
            reserved: rooms.filter(r => r.status === 'reserved').length
          }
        } catch (error) {
          uni.showToast({ title: '加载失败', icon: 'none' })
        } finally {
          uni.hideLoading()
        }
      },

      editApartment() {
        uni.navigateTo({
          url: `/pages/apartment-add/apartment-add?id=${this.apartmentId}&mode=edit`
        })
      },

      viewRooms() {
        uni.navigateTo({
          url: `/pages/rooms/rooms?apartmentId=${this.apartmentId}&apartmentName=${encodeURIComponent(this.apartment.name)}`
        })
      },

      addRoom() {
        uni.navigateTo({
          url: `/pages/room-add/room-add?apartmentId=${this.apartmentId}`
        })
      },

      viewStats() {
        uni.navigateTo({
          url: `/pages/stats/stats?apartmentId=${this.apartmentId}`
        })
      },

      goBack() {
        uni.navigateBack()
      },

      getStatusText(status) {
        const texts = {
          'active': '运营中',
          'inactive': '已停用',
          'renovating': '装修中'
        }
        return texts[status] || '未知'
      }
    }
  }
</script>

<style scoped>
  .apartment-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-back {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

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

  .nav-actions {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 页面内容 */
  .page-content {
    flex: 1;
    padding: 24rpx 32rpx;
  }

  /* 信息卡片 */
  .info-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 24rpx;
    padding: 40rpx 32rpx;
    margin-bottom: 32rpx;
    color: #FFFFFF;
  }

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

  .apartment-name {
    font-size: 40rpx;
    font-weight: 700;
  }

  .apartment-status {
    padding: 8rpx 20rpx;
    border-radius: 8rpx;
    font-size: 24rpx;
    background: rgba(255, 255, 255, 0.2);
  }

  .apartment-address {
    display: flex;
    align-items: center;
    gap: 12rpx;
    font-size: 28rpx;
    opacity: 0.9;
    margin-bottom: 20rpx;
  }

  .apartment-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 24rpx;
  }

  .contact-item {
    display: flex;
    align-items: center;
    gap: 12rpx;
    font-size: 26rpx;
    opacity: 0.9;
  }

  /* 区域标题 */
  .section-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #94A3B8;
    margin-bottom: 16rpx;
    padding-left: 16rpx;
  }

  /* 统计区域 */
  .stats-section {
    margin-bottom: 32rpx;
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16rpx;
  }

  .stat-card {
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 28rpx 16rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
  }

  .stat-num {
    font-size: 40rpx;
    font-weight: 700;
    color: #2563EB;
    margin-bottom: 8rpx;
  }

  .stat-num.empty {
    color: #94A3B8;
  }

  .stat-num.rented {
    color: #10B981;
  }

  .stat-num.reserved {
    color: #F59E0B;
  }

  .stat-label {
    font-size: 24rpx;
    color: #64748B;
  }

  /* 快捷操作 */
  .quick-actions {
    margin-bottom: 32rpx;
  }

  .action-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24rpx;
    background: #FFFFFF;
    border-radius: 24rpx;
    padding: 32rpx 24rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
  }

  .action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16rpx;
  }

  .action-icon {
    width: 96rpx;
    height: 96rpx;
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .action-icon.rooms {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }

  .action-icon.add {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  }

  .action-icon.stats {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  }

  .action-text {
    font-size: 26rpx;
    color: #1E293B;
    font-weight: 500;
  }

  /* 备注区域 */
  .remark-section {
    margin-bottom: 32rpx;
  }

  .remark-card {
    background: #FFFFFF;
    border-radius: 24rpx;
    padding: 32rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
  }

  .remark-text {
    font-size: 28rpx;
    color: #1E293B;
    line-height: 1.6;
  }
</style>
