<template>
	<view class="property-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="editProperty">
					<uni-icons type="compose" size="22" color="#2563EB"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 内容区域 -->
		<scroll-view scroll-y class="detail-content" v-if="property.id">
			<!-- 房源图片 -->
			<view class="image-section">
				<view class="property-image">
					<image v-if="property.images && property.images.length" :src="property.images[0]" mode="aspectFill"></image>
					<view v-else class="image-placeholder">
						<uni-icons type="home-filled" size="80" color="#CBD5E1"></uni-icons>
					</view>
					<view class="property-status" :class="property.status">
						{{property.statusText}}
					</view>
				</view>
			</view>

			<!-- 基本信息 -->
			<view class="info-section">
				<view class="info-header">
					<text class="property-name">{{property.name}}</text>
					<view class="property-tag" v-if="property.tag">{{property.tag}}</view>
				</view>
				<view class="info-address" v-if="property.address">
					<uni-icons type="location" size="16" color="#94A3B8"></uni-icons>
					<text>{{property.address}}</text>
				</view>
			</view>

			<!-- 水电单价卡片 -->
			<view class="section-title">费用标准</view>
			<view class="utility-card">
				<view class="utility-item">
					<view class="utility-icon water">
						<uni-icons type="plus-filled" size="24" color="#FFFFFF"></uni-icons>
					</view>
					<view class="utility-info">
						<text class="utility-label">水费单价</text>
						<view class="utility-price">
							<text class="price-num">{{property.waterPrice || '5.00'}}</text>
							<text class="price-unit">元/吨</text>
						</view>
					</view>
				</view>
				<view class="utility-divider"></view>
				<view class="utility-item">
					<view class="utility-icon electricity">
						<uni-icons type="plus-filled" size="24" color="#FFFFFF"></uni-icons>
					</view>
					<view class="utility-info">
						<text class="utility-label">电费单价</text>
						<view class="utility-price">
							<text class="price-num">{{property.electricityPrice || '1.00'}}</text>
							<text class="price-unit">元/度</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 租金信息 -->
			<view class="section-title">租金信息</view>
			<view class="info-card">
				<view class="info-row">
					<text class="row-label">月租金</text>
					<text class="row-value rent">¥{{property.rent || '0'}}</text>
				</view>
				<view class="info-divider"></view>
				<view class="info-row">
					<text class="row-label">租客</text>
					<text class="row-value">{{property.tenant || '暂无租客'}}</text>
				</view>
				<view class="info-divider"></view>
				<view class="info-row">
					<text class="row-label">到期日</text>
					<text class="row-value">{{property.dueDate || '无到期日'}}</text>
				</view>
			</view>

			<!-- 房源描述 -->
			<view class="section-title" v-if="property.description">房源描述</view>
			<view class="info-card" v-if="property.description">
				<text class="description-text">{{property.description}}</text>
			</view>

			<!-- 操作按钮 -->
			<view class="action-section">
				<view class="action-btn primary" @click="editProperty">
					<uni-icons type="compose" size="20" color="#FFFFFF"></uni-icons>
					<text>编辑房源</text>
				</view>
				<view class="action-btn danger" @click="deleteProperty">
					<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="loading">
			<uni-load-more status="loading"></uni-load-more>
		</view>

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

<script>
	import apartmentApi from '@/api/apartment.js'
	
	export default {
		data() {
			return {
				propertyId: null,
				loading: false,
				property: {}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.propertyId = options.id
				this.loadPropertyDetail(options.id)
			}
		},
		methods: {
			async loadPropertyDetail(id) {
				this.loading = true
				try {
					const res = await apartmentApi.getDetail(id)
					if (res.data) {
						const data = res.data
						this.property = {
							...data,
							status: data.status || 'vacant',
							statusText: data.status === 'rented' ? '已出租' : '空置中',
							waterPrice: data.waterPrice || 5.00,
							electricityPrice: data.electricityPrice || 1.00
						}
					}
				} catch (error) {
					console.error('加载房源详情失败:', error)
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},
			editProperty() {
				if (this.propertyId) {
					uni.navigateTo({
						url: `/pages/property-add/property-add?id=${this.propertyId}&mode=edit`
					})
				}
			},
			deleteProperty() {
				uni.showModal({
					title: '确认删除',
					content: `确定要删除房源"${this.property.name}"吗？删除后不可恢复！`,
					confirmColor: '#EF4444',
					success: async (res) => {
						if (res.confirm) {
							try {
								await apartmentApi.delete(this.propertyId)
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 1500)
							} catch (error) {
								uni.showToast({
									title: '删除失败',
									icon: 'none'
								})
							}
						}
					}
				})
			},
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
	.property-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-btn:active {
		background: #F1F5F9;
	}

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

	/* 内容区域 */
	.detail-content {
		flex: 1;
		padding: 24rpx 32rpx;
	}

	/* 图片区域 */
	.image-section {
		margin-bottom: 24rpx;
	}

	.property-image {
		position: relative;
		height: 400rpx;
		background: #F1F5F9;
		border-radius: 24rpx;
		overflow: hidden;
	}

	.property-image image {
		width: 100%;
		height: 100%;
	}

	.image-placeholder {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.property-status {
		position: absolute;
		top: 24rpx;
		right: 24rpx;
		padding: 12rpx 24rpx;
		border-radius: 12rpx;
		font-size: 24rpx;
		font-weight: 500;
	}

	.property-status.rented {
		background: #DBEAFE;
		color: #2563EB;
	}

	.property-status.vacant {
		background: #D1FAE5;
		color: #059669;
	}

	/* 基本信息 */
	.info-section {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	}

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

	.property-name {
		font-size: 36rpx;
		font-weight: 700;
		color: #1E293B;
		flex: 1;
	}

	.property-tag {
		background: #EFF6FF;
		color: #2563EB;
		font-size: 22rpx;
		padding: 8rpx 20rpx;
		border-radius: 10rpx;
		margin-left: 16rpx;
	}

	.info-address {
		display: flex;
		align-items: center;
		gap: 12rpx;
		font-size: 26rpx;
		color: #64748B;
	}

	/* 标题 */
	.section-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #1E293B;
		margin-bottom: 16rpx;
		margin-top: 8rpx;
	}

	/* 水电单价卡片 */
	.utility-card {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	}

	.utility-item {
		display: flex;
		align-items: center;
		gap: 24rpx;
	}

	.utility-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.utility-icon.water {
		background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
	}

	.utility-icon.electricity {
		background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
	}

	.utility-info {
		flex: 1;
	}

	.utility-label {
		display: block;
		font-size: 26rpx;
		color: #64748B;
		margin-bottom: 8rpx;
	}

	.utility-price {
		display: flex;
		align-items: baseline;
		gap: 8rpx;
	}

	.price-num {
		font-size: 40rpx;
		font-weight: 700;
		color: #1E293B;
	}

	.price-unit {
		font-size: 24rpx;
		color: #94A3B8;
	}

	.utility-divider {
		height: 2rpx;
		background: #F1F5F9;
		margin: 24rpx 0;
	}

	/* 信息卡片 */
	.info-card {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 0 24rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	}

	.info-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 0;
	}

	.row-label {
		font-size: 28rpx;
		color: #64748B;
	}

	.row-value {
		font-size: 28rpx;
		color: #1E293B;
		font-weight: 500;
	}

	.row-value.rent {
		color: #EF4444;
		font-size: 32rpx;
		font-weight: 700;
	}

	.info-divider {
		height: 2rpx;
		background: #F1F5F9;
	}

	/* 描述文本 */
	.description-text {
		display: block;
		font-size: 28rpx;
		color: #374151;
		line-height: 1.6;
		padding: 24rpx 0;
	}

	/* 操作区域 */
	.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;
	}

	.action-btn:active {
		opacity: 0.9;
	}

	/* 加载状态 */
	.loading-state {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 空状态 */
	.empty-state {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 60rpx;
	}

	.empty-text {
		font-size: 30rpx;
		color: #64748B;
		margin-top: 24rpx;
		margin-bottom: 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;
		box-shadow: 0 8rpx 24rpx rgba(37, 99, 235, 0.3);
	}
</style>
