<template>
	<view class="tenants-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="showSearch">
						<uni-icons type="search" size="22" color="#1E293B"></uni-icons>
					</view>
					<view class="nav-btn" @click="addTenant">
						<uni-icons type="plus" size="22" color="#2563EB"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<view class="search-section" v-if="showSearchBar">
			<view class="search-bar">
				<uni-icons type="search" size="18" color="#94A3B8"></uni-icons>
				<input 
					class="search-input" 
					type="text" 
					placeholder="搜索租客姓名或电话"
					v-model="searchKeyword"
					@confirm="handleSearch"
				/>
				<uni-icons v-if="searchKeyword" type="clear" size="18" color="#94A3B8" @click="clearSearch"></uni-icons>
			</view>
		</view>

		<view class="stats-bar">
			<view class="stat-item">
				<text class="stat-num">{{totalCount}}</text>
				<text class="stat-label">全部租客</text>
			</view>
			<view class="stat-divider"></view>
			<view class="stat-item">
				<text class="stat-num success">{{activeCount}}</text>
				<text class="stat-label">在租中</text>
			</view>
			<view class="stat-divider"></view>
			<view class="stat-item">
				<text class="stat-num">{{inactiveCount}}</text>
				<text class="stat-label">已退租</text>
			</view>
		</view>

		<scroll-view scroll-y class="tenant-list" @scrolltolower="loadMore" refresher-enabled :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh">
			<view v-if="tenants.length === 0 && !isLoading" class="empty-state">
				<view class="empty-icon">
					<uni-icons type="personadd-filled" size="80" color="#CBD5E1"></uni-icons>
				</view>
				<text class="empty-title">暂无租客</text>
				<text class="empty-desc">点击右上角添加您的第一个租客</text>
				<button class="empty-btn" @click="addTenant">添加租客</button>
			</view>

			<view v-else class="tenant-list-content">
				<view 
					v-for="(item, index) in tenants" 
					:key="index"
					class="tenant-card"
					@click="viewTenantDetail(item)"
				>
					<view class="tenant-avatar">
						<text>{{item.name.charAt(0)}}</text>
					</view>
					<view class="tenant-info">
						<view class="info-header">
							<text class="tenant-name">{{item.name}}</text>
							<view class="status-badge" :class="item.status">{{item.statusText}}</view>
						</view>
						<text class="tenant-phone">{{item.phone}}</text>
						<view class="tenant-stats">
							<text>在租 {{item.activeRentals}} 间</text>
							<text class="divider">|</text>
							<text>历史 {{item.totalRentals}} 次</text>
						</view>
					</view>
					<view class="tenant-actions">
						<view class="action-btn call" @click.stop="callTenant(item)">
							<uni-icons type="phone-filled" size="18" color="#FFFFFF"></uni-icons>
						</view>
					</view>
				</view>
			</view>

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

<script>
	import renterApi from '@/api/renter.js'
	
	export default {
		data() {
			return {
				showSearchBar: false,
				searchKeyword: '',
				isLoading: false,
				isRefreshing: false,
				tenants: [],
				loadStatus: 'more',
				page: 1,
				pageSize: 10,
				total: 0
			}
		},
		computed: {
			totalCount() {
				return this.total
			},
			activeCount() {
				return this.tenants.filter(t => t.status === 'active').length
			},
			inactiveCount() {
				return this.tenants.filter(t => t.status !== 'active').length
			}
		},
		onLoad() {
			this.loadTenants()
		},
		onShow() {
			this.loadTenants()
		},
		methods: {
			async loadTenants() {
				this.isLoading = true
				try {
					const params = {
						page: this.page,
						pageSize: this.pageSize,
						keyword: this.searchKeyword
					}
					const res = await renterApi.getList(params)
					if (res.data) {
						const list = res.data.map(item => ({
							id: item.id,
							name: item.name,
							phone: item.phone,
							idCard: item.idCard,
							status: item.status || 'active',
							statusText: item.status === 'active' ? '在租中' : '已退租',
							activeRentals: item.activeRentals || 0,
							totalRentals: item.totalRentals || 0
						}))
						if (this.page === 1) {
							this.tenants = list
						} else {
							this.tenants = [...this.tenants, ...list]
						}
						this.total = res.total || 0
						this.loadStatus = this.tenants.length < this.total ? 'more' : 'noMore'
					}
				} catch (error) {
					console.error('加载租客列表失败:', error)
					uni.showToast({ title: '加载失败', icon: 'none' })
				} finally {
					this.isLoading = false
					this.isRefreshing = false
				}
			},
			onRefresh() {
				this.isRefreshing = true
				this.page = 1
				this.loadTenants()
			},
			showSearch() {
				this.showSearchBar = !this.showSearchBar
			},
			handleSearch() {
				this.page = 1
				this.loadTenants()
			},
			clearSearch() {
				this.searchKeyword = ''
				this.page = 1
				this.loadTenants()
			},
			addTenant() {
				uni.navigateTo({ url: '/pages/tenant-add/tenant-add' })
			},
			viewTenantDetail(item) {
				uni.navigateTo({ url: `/pages/tenant-detail/tenant-detail?id=${item.id}` })
			},
			callTenant(item) {
				if (item.phone) {
					uni.makePhoneCall({ phoneNumber: item.phone })
				}
			},
			loadMore() {
				if (this.loadStatus === 'noMore') return
				this.loadStatus = 'loading'
				this.page++
				this.loadTenants()
			}
		}
	}
</script>

<style scoped>
	.tenants-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-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;
	}
	.search-section {
		padding: 24rpx 32rpx;
		background: #FFFFFF;
	}
	.search-bar {
		display: flex;
		align-items: center;
		background: #F1F5F9;
		border-radius: 16rpx;
		padding: 16rpx 24rpx;
		gap: 16rpx;
	}
	.search-input {
		flex: 1;
		font-size: 28rpx;
		color: #1E293B;
	}
	.stats-bar {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 24rpx 32rpx;
		background: #FFFFFF;
		margin-bottom: 2rpx;
	}
	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.stat-num {
		font-size: 40rpx;
		font-weight: 700;
		color: #2563EB;
		margin-bottom: 8rpx;
	}
	.stat-num.success {
		color: #10B981;
	}
	.stat-label {
		font-size: 24rpx;
		color: #64748B;
	}
	.stat-divider {
		width: 2rpx;
		height: 60rpx;
		background: #E2E8F0;
	}
	.tenant-list {
		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, #2563EB 0%, #1D4ED8 100%);
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: 600;
		padding: 24rpx 60rpx;
		border-radius: 16rpx;
		border: none;
	}
	.tenant-card {
		display: flex;
		align-items: center;
		gap: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	}
	.tenant-avatar {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}
	.tenant-avatar text {
		font-size: 36rpx;
		font-weight: 600;
		color: #FFFFFF;
	}
	.tenant-info {
		flex: 1;
		min-width: 0;
	}
	.info-header {
		display: flex;
		align-items: center;
		gap: 12rpx;
		margin-bottom: 8rpx;
	}
	.tenant-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #1E293B;
	}
	.status-badge {
		padding: 4rpx 12rpx;
		border-radius: 6rpx;
		font-size: 20rpx;
	}
	.status-badge.active {
		background: #D1FAE5;
		color: #059669;
	}
	.status-badge.inactive {
		background: #F3F4F6;
		color: #6B7280;
	}
	.tenant-phone {
		font-size: 26rpx;
		color: #64748B;
		display: block;
		margin-bottom: 8rpx;
	}
	.tenant-stats {
		display: flex;
		align-items: center;
		gap: 16rpx;
		font-size: 24rpx;
		color: #94A3B8;
	}
	.tenant-stats .divider {
		color: #E2E8F0;
	}
	.tenant-actions {
		display: flex;
		gap: 12rpx;
	}
	.action-btn {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.action-btn.call {
		background: linear-gradient(135deg, #10B981 0%, #059669 100%);
	}
</style>
