<template>
  <view class="bills-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="addBill">
            <uni-icons type="plus" size="20" color="#2563EB"></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <scroll-view scroll-y class="page-content" @scrolltolower="loadMore">
      <!-- 筛选栏 -->
      <view class="filter-section">
        <view class="filter-tabs">
          <view v-for="(tab, index) in filterTabs" :key="index" class="filter-tab" :class="{ active: currentFilter === tab.value }" @click="switchFilter(tab.value)">
            <text>{{tab.label}}</text>
          </view>
        </view>
      </view>

      <!-- 统计概览 -->
      <view class="stats-section">
        <view class="stats-card">
          <view class="stat-item">
            <text class="stat-label">应收总额</text>
            <text class="stat-value">¥{{stats.totalReceivable}}</text>
          </view>
          <view class="stat-divider"></view>
          <view class="stat-item">
            <text class="stat-label">实收总额</text>
            <text class="stat-value received">¥{{stats.totalReceived}}</text>
          </view>
          <view class="stat-divider"></view>
          <view class="stat-item">
            <text class="stat-label">待收金额</text>
            <text class="stat-value pending">¥{{stats.totalPending}}</text>
          </view>
        </view>
      </view>

      <!-- 账单列表 -->
      <view class="bill-list">
        <view v-for="(item, index) in billList" :key="index" class="bill-card" @click="viewDetail(item)">
          <view class="bill-header">
            <view class="bill-info">
              <text class="bill-no">{{item.billNo || '-'}}</text>
              <text class="bill-date">{{item.billDate}}</text>
            </view>
            <view class="bill-status" :class="item.status">
              <text>{{getStatusText(item.status)}}</text>
            </view>
          </view>
          <view class="bill-content">
            <view class="bill-type">
              <view class="type-icon" :class="item.type">
                <uni-icons :type="item.type === 'income' ? 'wallet-filled' : 'cart-filled'" size="20" color="#FFFFFF"></uni-icons>
              </view>
              <view class="type-info">
                <text class="type-name">{{getCategoryText(item.category)}}</text>
                <text class="type-room">{{item.roomNumber || '-'}} · {{item.renterName || '-'}}</text>
              </view>
            </view>
            <view class="bill-amount">
              <text class="amount" :class="item.type">{{item.type === 'income' ? '+' : '-'}}¥{{item.receivableAmount}}</text>
              <text class="received" v-if="item.receivedAmount > 0">实收: ¥{{item.receivedAmount}}</text>
            </view>
          </view>
        </view>
      </view>

      <view v-if="billList.length === 0 && !isLoading" class="empty-state">
        <text class="empty-text">暂无账单数据</text>
        <button class="add-btn" @click="addBill">记一笔</button>
      </view>

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

<script>
  import { billApi } from '../../api/index.js'

  export default {
    data() {
      return {
        currentFilter: 'all',
        filterTabs: [
          { label: '全部', value: 'all' },
          { label: '收入', value: 'income' },
          { label: '支出', value: 'expense' },
          { label: '未收', value: 'unpaid' }
        ],
        billList: [],
        isLoading: false,
        page: 1,
        pageSize: 10,
        hasMore: true,
        stats: {
          totalReceivable: '0.00',
          totalReceived: '0.00',
          totalPending: '0.00'
        }
      }
    },
    onLoad() {
      this.loadData()
    },
    onShow() {
      this.loadData()
    },
    methods: {
      async loadData() {
        if (this.isLoading) return
        this.isLoading = true
        try {
          const params = { page: this.page, pageSize: this.pageSize }
          if (this.currentFilter !== 'all') {
            if (this.currentFilter === 'unpaid') {
              params.status = 'unpaid'
            } else {
              params.type = this.currentFilter
            }
          }
          const res = await billApi.list(params)
          const list = res.data || []
          if (this.page === 1) {
            this.billList = list
          } else {
            this.billList = [...this.billList, ...list]
          }
          this.hasMore = list.length >= this.pageSize
          this.updateStats()
        } catch (error) {
          uni.showToast({ title: '加载失败', icon: 'none' })
        } finally {
          this.isLoading = false
        }
      },
      updateStats() {
        let totalReceivable = 0, totalReceived = 0, totalPending = 0
        this.billList.forEach(item => {
          if (item.type === 'income') {
            totalReceivable += parseFloat(item.receivableAmount || 0)
            totalReceived += parseFloat(item.receivedAmount || 0)
            totalPending += parseFloat(item.receivableAmount || 0) - parseFloat(item.receivedAmount || 0)
          }
        })
        this.stats.totalReceivable = totalReceivable.toFixed(2)
        this.stats.totalReceived = totalReceived.toFixed(2)
        this.stats.totalPending = totalPending.toFixed(2)
      },
      loadMore() {
        if (this.hasMore && !this.isLoading) {
          this.page++
          this.loadData()
        }
      },
      switchFilter(value) {
        this.currentFilter = value
        this.page = 1
        this.loadData()
      },
      addBill() {
        uni.navigateTo({ url: '/pages/bill-add/bill-add' })
      },
      viewDetail(item) {
        uni.navigateTo({ url: `/pages/bill-detail/bill-detail?id=${item.id}` })
      },
      goBack() { uni.navigateBack() },
      getStatusText(status) {
        const texts = { 'paid': '已付清', 'partial': '部分付款', 'unpaid': '未付款' }
        return texts[status] || status
      },
      getCategoryText(category) {
        const texts = { 'rent': '租金', 'deposit': '押金', 'water': '水费', 'electricity': '电费', 'maintenance': '维修费', 'property': '物业费', 'other': '其他' }
        return texts[category] || category || '其他'
      }
    }
  }
</script>

<style scoped>
  .bills-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; }
  .filter-section { margin-bottom: 24rpx; }
  .filter-tabs { display: flex; gap: 16rpx; }
  .filter-tab { padding: 16rpx 32rpx; background: #FFFFFF; border-radius: 12rpx; font-size: 28rpx; color: #64748B; }
  .filter-tab.active { background: #2563EB; color: #FFFFFF; }
  .stats-section { margin-bottom: 24rpx; }
  .stats-card { background: #FFFFFF; border-radius: 24rpx; padding: 32rpx; display: flex; align-items: center; justify-content: space-around; box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04); }
  .stat-item { display: flex; flex-direction: column; align-items: center; gap: 8rpx; }
  .stat-label { font-size: 24rpx; color: #64748B; }
  .stat-value { font-size: 32rpx; font-weight: 700; color: #1E293B; }
  .stat-value.received { color: #10B981; }
  .stat-value.pending { color: #EF4444; }
  .stat-divider { width: 2rpx; height: 60rpx; background: #E2E8F0; }
  .bill-list { display: flex; flex-direction: column; gap: 24rpx; }
  .bill-card { background: #FFFFFF; border-radius: 24rpx; padding: 32rpx; box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04); }
  .bill-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24rpx; }
  .bill-info { display: flex; flex-direction: column; gap: 8rpx; }
  .bill-no { font-size: 28rpx; font-weight: 600; color: #1E293B; }
  .bill-date { font-size: 24rpx; color: #94A3B8; }
  .bill-status { padding: 6rpx 16rpx; border-radius: 8rpx; font-size: 22rpx; }
  .bill-status.paid { background: #DCFCE7; color: #16A34A; }
  .bill-status.partial { background: #FEF3C7; color: #D97706; }
  .bill-status.unpaid { background: #FEE2E2; color: #DC2626; }
  .bill-content { display: flex; justify-content: space-between; align-items: center; }
  .bill-type { display: flex; align-items: center; gap: 20rpx; }
  .type-icon { width: 72rpx; height: 72rpx; border-radius: 18rpx; display: flex; align-items: center; justify-content: center; }
  .type-icon.income { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
  .type-icon.expense { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
  .type-info { display: flex; flex-direction: column; gap: 8rpx; }
  .type-name { font-size: 30rpx; font-weight: 600; color: #1E293B; }
  .type-room { font-size: 24rpx; color: #64748B; }
  .bill-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 8rpx; }
  .amount { font-size: 36rpx; font-weight: 700; }
  .amount.income { color: #667eea; }
  .amount.expense { color: #f5576c; }
  .received { font-size: 24rpx; color: #94A3B8; }
  .empty-state { display: flex; flex-direction: column; align-items: center; padding: 120rpx 0; }
  .empty-text { font-size: 28rpx; color: #94A3B8; margin-bottom: 32rpx; }
  .add-btn { background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%); color: #FFFFFF; font-size: 28rpx; padding: 24rpx 64rpx; border-radius: 16rpx; border: none; }
</style>
