<template>
  <div class="dashboard">
    <el-card class="welcome-card">
      <h2>欢迎使用租房管理系统</h2>
      <p>本系统提供区域管理、房源管理、租客管理、合同管理和统计分析等功能</p>
    </el-card>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="stat-card">
          <div class="stat-item">
            <el-icon class="el-icon-location"></el-icon>
            <div class="stat-info">
              <div class="stat-value">{{ regionCount }}</div>
              <div class="stat-label">区域数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="stat-card">
          <div class="stat-item">
            <el-icon class="el-icon-building"></el-icon>
            <div class="stat-info">
              <div class="stat-value">{{ apartmentCount }}</div>
              <div class="stat-label">公寓数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="stat-card">
          <div class="stat-item">
            <el-icon class="el-icon-home"></el-icon>
            <div class="stat-info">
              <div class="stat-value">{{ roomCount }}</div>
              <div class="stat-label">房间数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="stat-card">
          <div class="stat-item">
            <el-icon class="el-icon-user"></el-icon>
            <div class="stat-info">
              <div class="stat-value">{{ tenantCount }}</div>
              <div class="stat-label">租客数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="stat-card">
          <div class="stat-item">
            <el-icon class="el-icon-document"></el-icon>
            <div class="stat-info">
              <div class="stat-value">{{ contractCount }}</div>
              <div class="stat-label">合同数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="stat-card">
          <div class="stat-item">
            <el-icon class="el-icon-s-finance"></el-icon>
            <div class="stat-info">
              <div class="stat-value">{{ emptyRoomCount }}</div>
              <div class="stat-label">空房数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="stat-card">
          <div class="stat-item">
            <el-icon class="el-icon-s-finance"></el-icon>
            <div class="stat-info">
              <div class="stat-value">{{ rentedRoomCount }}</div>
              <div class="stat-label">在租数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="stat-card">
          <div class="stat-item">
            <el-icon class="el-icon-s-finance"></el-icon>
            <div class="stat-info">
              <div class="stat-value">¥{{ collectedRentAmount }}</div>
              <div class="stat-label">已收租金</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8">
        <el-card class="stat-card">
          <div class="stat-item">
            <el-icon class="el-icon-s-finance"></el-icon>
            <div class="stat-info">
              <div class="stat-value">¥{{ collectedWaterAmount }}</div>
              <div class="stat-label">已收水费</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-card style="margin-top: 20px;">
      <template slot="header">
        <div class="card-header">
          <span>区域公寓房间状态分布</span>
        </div>
      </template>
      <el-table :data="regionApartmentHouseStats" style="width: 100%">
        <el-table-column prop="region" label="区域" width="180"></el-table-column>
        <el-table-column prop="apartment" label="公寓" width="180"></el-table-column>
        <el-table-column prop="empty" label="空房" width="80"></el-table-column>
        <el-table-column prop="rented" label="在租" width="80"></el-table-column>
        <el-table-column prop="soon_expire" label="即将到期" width="100"></el-table-column>
        <el-table-column prop="expired" label="已到期" width="80"></el-table-column>
        <el-table-column prop="cleaning" label="打扫中" width="80"></el-table-column>
        <el-table-column prop="maintenance" label="维修中" width="80"></el-table-column>
        <el-table-column prop="total" label="总数" width="80"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { regionApi, apartmentApi, roomApi, tenantApi, contractApi, statisticsApi } from '../api/api'

export default {
  name: 'Dashboard',
  data() {
    return {
      regionCount: 0,
      apartmentCount: 0,
      roomCount: 0,
      tenantCount: 0,
      contractCount: 0,
      emptyRoomCount: 0,
      rentedRoomCount: 0,
      collectedRentAmount: 0,
      collectedWaterAmount: 0,
      regionApartmentHouseStats: []
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    async loadData() {
      try {
        // 并行加载所有数据
        const [dashboardStatsResponse, regionApartmentHouseStatsResponse] = await Promise.all([
          statisticsApi.getDashboardStats(),
          statisticsApi.getRegionApartmentHouseStats()
        ])
        
        // 处理响应数据
        const dashboardStats = dashboardStatsResponse.data || dashboardStatsResponse
        
        // 更新统计数据
        this.regionCount = dashboardStats.regionCount
        this.apartmentCount = dashboardStats.apartmentCount
        this.roomCount = dashboardStats.roomCount
        this.tenantCount = dashboardStats.tenantCount
        this.contractCount = dashboardStats.contractCount
        this.emptyRoomCount = dashboardStats.emptyRoomCount
        this.rentedRoomCount = dashboardStats.rentedRoomCount
        this.collectedRentAmount = dashboardStats.collectedRentAmount
        this.collectedWaterAmount = dashboardStats.collectedWaterAmount
        this.regionApartmentHouseStats = regionApartmentHouseStatsResponse
      } catch (error) {
        this.$message.error('加载数据失败')
      }
    }
  }
}
</script>

<style scoped>
.dashboard {
  padding: 20px 0;
}

.welcome-card {
  text-align: center;
  padding: 40px 0;
}

.stat-card {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 20px;
}

.stat-item .el-icon {
  font-size: 36px;
  color: #409EFF;
  margin-right: 20px;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>