<template>
	<view class="rentals-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="showFilter">
						<uni-icons type="settings-filled" size="22" color="#1E293B"></uni-icons>
					</view>
					<view class="nav-btn" @click="addRental">
						<uni-icons type="plus" size="22" color="#2563EB"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<!-- 搜索栏 -->
		<view class="search-section">
			<view class="search-bar">
				<uni-icons type="search" size="18" color="#94A3B8"></uni-icons>
				<input 
					class="search-input" 
					type="text" 
					placeholder="搜索租客姓名..."
					placeholder-class="search-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">{{activeCount}}</text>
				<text class="stat-label">在租</text>
			</view>
			<view class="stat-divider"></view>
			<view class="stat-item">
				<text class="stat-num warning">{{expiringCount}}</text>
				<text class="stat-label">即将到期</text>
			</view>
			<view class="stat-divider"></view>
			<view class="stat-item">
				<text class="stat-num">{{expiredCount}}</text>
				<text class="stat-label">已到期</text>
			</view>
		</view>

		<!-- 筛选标签 -->
		<scroll-view scroll-x class="filter-tabs" show-scrollbar="false">
			<view 
				v-for="(tab, index) in filterTabs" 
				:key="index"
				class="filter-tab"
				:class="{ active: currentTab === tab.value }"
				@click="switchTab(tab.value)"
			>
				<text>{{tab.label}}</text>
				<view v-if="currentTab === tab.value" class="tab-indicator"></view>
			</view>
		</scroll-view>

		<!-- 公寓筛选 -->
		<view class="apartment-filter" v-if="apartments.length > 0">
			<picker mode="selector" :range="apartmentOptions" :value="selectedApartmentIndex" @change="onApartmentChange">
				<view class="picker-value">
					<text>{{selectedApartmentLabel}}</text>
					<uni-icons type="arrowdown" size="14" color="#64748B"></uni-icons>
				</view>
			</picker>
		</view>

		<!-- 租赁列表 -->
		<scroll-view scroll-y class="rental-list" @scrolltolower="loadMore" refresher-enabled :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh">
			<view v-if="filteredRentals.length === 0 && !isLoading" class="empty-state">
				<view class="empty-icon">
					<uni-icons type="folder-add-filled" size="80" color="#CBD5E1"></uni-icons>
				</view>
				<text class="empty-title">暂无租赁记录</text>
				<text class="empty-desc">点击右上角添加您的第一条租赁记录</text>
				<button class="empty-btn" @click="addRental">添加租赁</button>
			</view>

			<view v-else class="rental-list-content">
				<view 
					v-for="(item, index) in filteredRentals" 
					:key="index"
					class="rental-card"
					@click="viewRentalDetail(item)"
					:style="{ animationDelay: index * 50 + 'ms' }"
				>
					<view class="card-header">
						<view class="room-info">
							<text class="apartment-name">{{item.apartmentName}}</text>
							<text class="room-number">{{item.roomNumber}}</text>
						</view>
						<view class="status-tag" :class="item.status">
							{{item.statusText}}
						</view>
					</view>
					
					<view class="renter-info">
						<view class="renter-avatar">
							<text>{{item.renterName.charAt(0)}}</text>
						</view>
						<view class="renter-detail">
							<text class="renter-name">{{item.renterName}}</text>
							<text class="renter-phone">{{item.renterPhone}}</text>
						</view>
					</view>

					<view class="rental-info">
						<view class="info-row">
							<view class="info-item">
								<text class="label">租期</text>
								<text class="value">{{item.startDate}} ~ {{item.endDate}}</text>
							</view>
						</view>
						<view class="info-row">
							<view class="info-item">
								<text class="label">付租方式</text>
								<view class="payment-tag" :class="item.paymentType">{{item.paymentTypeText}}</view>
							</view>
							<view class="info-item">
								<text class="label">月租金</text>
								<text class="value price">¥{{item.rent}}</text>
							</view>
						</view>
					</view>

					<view v-if="item.isExpiringSoon" class="expiring-warning">
						<uni-icons type="info-filled" size="14" color="#EF4444"></uni-icons>
						<text>即将到期（剩余{{item.remainingDays}}天）</text>
					</view>

					<view class="card-actions" v-if="item.status === 'active'">
						<view class="action-btn renew" @click.stop="handleRenew(item)">
							<text>续租</text>
						</view>
						<view class="action-btn terminate" @click.stop="handleTerminate(item)">
							<text>退租</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 加载更多 -->
			<uni-load-more v-if="filteredRentals.length > 0" :status="loadStatus"></uni-load-more>
			
			<view class="safe-area-bottom" style="height: 40rpx;"></view>
		</scroll-view>

		<!-- 退租弹窗 -->
		<uni-popup ref="terminatePopup" type="center">
			<view class="popup-content">
				<view class="popup-header">
					<text class="popup-title">办理退租</text>
					<uni-icons type="close" size="20" color="#94A3B8" @click="closeTerminatePopup"></uni-icons>
				</view>
				<view class="popup-body">
					<view class="form-item">
						<text class="form-label">租客</text>
						<text class="form-static">{{selectedRental?.renterName}}</text>
					</view>
					<view class="form-item">
						<text class="form-label">押金金额</text>
						<text class="form-static price">¥{{selectedRental?.deposit || 0}}</text>
					</view>
					<view class="form-item">
						<text class="form-label">水表最终读数</text>
						<input 
							type="digit" 
							v-model="terminateForm.waterMeterEnd" 
							placeholder="请输入水表读数"
							class="form-input"
						/>
					</view>
					<view class="form-item">
						<text class="form-label">电表最终读数</text>
						<input 
							type="digit" 
							v-model="terminateForm.electricityMeterEnd" 
							placeholder="请输入电表读数"
							class="form-input"
						/>
					</view>
					<view class="form-item">
						<text class="form-label">退还押金</text>
						<input 
							type="digit" 
							v-model="terminateForm.refundDeposit" 
							placeholder="请输入退还金额"
							class="form-input"
						/>
					</view>
					<view class="form-item">
						<text class="form-label">退租备注</text>
						<textarea 
							v-model="terminateForm.remark" 
							placeholder="请输入退租备注（选填）"
							class="form-textarea"
						/>
					</view>
				</view>
				<view class="popup-footer">
					<button class="btn-cancel" @click="closeTerminatePopup">取消</button>
					<button class="btn-confirm" :loading="submitLoading" @click="confirmTerminate">确认退租</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import rentalApi from '@/api/rental.js'
	import apartmentApi from '@/api/apartment.js'
	
	export default {
		data() {
			return {
				searchKeyword: '',
				currentTab: 'all',
				isLoading: false,
				isRefreshing: false,
				submitLoading: false,
				filterTabs: [
					{ label: '全部', value: 'all' },
					{ label: '在租', value: 'active' },
					{ label: '已到期', value: 'expired' },
					{ label: '已终止', value: 'terminated' }
				],
				rentals: [],
				apartments: [],
				selectedApartmentId: '',
				loadStatus: 'more',
				page: 1,
				pageSize: 10,
				total: 0,
				selectedRental: null,
				terminateForm: {
					waterMeterEnd: '',
					electricityMeterEnd: '',
					refundDeposit: '',
					remark: ''
				}
			}
		},
		computed: {
			activeCount() {
				return this.rentals.filter(r => r.status === 'active').length
			},
			expiringCount() {
				return this.rentals.filter(r => r.status === 'active' && this.isExpiringSoon(r.endDate)).length
			},
			expiredCount() {
				return this.rentals.filter(r => r.status === 'expired').length
			},
			filteredRentals() {
				let list = this.rentals
				
				// 根据状态筛选
				if (this.currentTab !== 'all') {
					list = list.filter(r => r.status === this.currentTab)
				}
				
				// 根据公寓筛选
				if (this.selectedApartmentId) {
					list = list.filter(r => r.apartmentId === this.selectedApartmentId)
				}
				
				return list
			},
			apartmentOptions() {
				return ['全部公寓', ...this.apartments.map(a => a.name)]
			},
			selectedApartmentIndex() {
				if (!this.selectedApartmentId) return 0
				const index = this.apartments.findIndex(a => a.id === this.selectedApartmentId)
				return index + 1
			},
			selectedApartmentLabel() {
				if (!this.selectedApartmentId) return '全部公寓'
				const apartment = this.apartments.find(a => a.id === this.selectedApartmentId)
				return apartment ? apartment.name : '全部公寓'
			}
		},
		onLoad() {
			this.loadApartments()
			this.loadRentals()
		},
		onShow() {
			this.loadRentals()
		},
		methods: {
			async loadApartments() {
				try {
					const res = await apartmentApi.getList({ pageSize: 999 })
					if (res.data) {
						this.apartments = res.data
					}
				} catch (error) {
					console.error('加载公寓列表失败:', error)
				}
			},
			
			async loadRentals() {
				this.isLoading = true
				try {
					const params = {
						page: this.page,
						pageSize: this.pageSize,
						renterName: this.searchKeyword
					}
					
					const res = await rentalApi.getList(params)
					if (res.data) {
						const list = res.data.map(item => ({
							id: item.id,
							apartmentId: item.Room?.Apartment?.id,
							apartmentName: item.Room?.Apartment?.name || '--',
							roomId: item.roomId,
							roomNumber: item.Room?.roomNumber || '--',
							renterId: item.renterId,
							renterName: item.Renter?.name || '--',
							renterPhone: item.Renter?.phone || '--',
							startDate: item.startDate,
							endDate: item.endDate,
							paymentType: item.paymentType,
							paymentTypeText: this.getPaymentTypeText(item.paymentType),
							rent: item.rent,
							deposit: item.deposit || 0,
							status: item.status,
							statusText: this.getStatusText(item.status),
							isExpiringSoon: this.isExpiringSoon(item.endDate) && item.status === 'active',
							remainingDays: this.getRemainingDays(item.endDate)
						}))
						
						if (this.page === 1) {
							this.rentals = list
						} else {
							this.rentals = [...this.rentals, ...list]
						}
						
						this.total = res.total || 0
						this.loadStatus = this.rentals.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.loadRentals()
			},
			
			switchTab(value) {
				this.currentTab = value
			},
			
			onApartmentChange(e) {
				const index = e.detail.value
				if (index === 0) {
					this.selectedApartmentId = ''
				} else {
					this.selectedApartmentId = this.apartments[index - 1].id
				}
			},
			
			handleSearch() {
				this.page = 1
				this.loadRentals()
			},
			
			clearSearch() {
				this.searchKeyword = ''
				this.page = 1
				this.loadRentals()
			},
			
			addRental() {
				uni.navigateTo({
					url: '/pages/rental-add/rental-add'
				})
			},
			
			viewRentalDetail(item) {
				uni.navigateTo({
					url: `/pages/rental-detail/rental-detail?id=${item.id}`
				})
			},
			
			handleRenew(item) {
				uni.navigateTo({
					url: `/pages/rental-renew/rental-renew?id=${item.id}`
				})
			},
			
			handleTerminate(item) {
				this.selectedRental = item
				this.terminateForm = {
					waterMeterEnd: '',
					electricityMeterEnd: '',
					refundDeposit: item.deposit || '',
					remark: ''
				}
				this.$refs.terminatePopup.open()
			},
			
			closeTerminatePopup() {
				this.$refs.terminatePopup.close()
			},
			
			async confirmTerminate() {
				if (!this.selectedRental) return
				
				// 表单验证
				if (!this.terminateForm.waterMeterEnd) {
					uni.showToast({ title: '请输入水表读数', icon: 'none' })
					return
				}
				if (!this.terminateForm.electricityMeterEnd) {
					uni.showToast({ title: '请输入电表读数', icon: 'none' })
					return
				}
				
				this.submitLoading = true
				try {
					await rentalApi.terminate(this.selectedRental.id, {
						waterMeterEnd: parseFloat(this.terminateForm.waterMeterEnd),
						electricityMeterEnd: parseFloat(this.terminateForm.electricityMeterEnd),
						refundDeposit: parseFloat(this.terminateForm.refundDeposit) || 0,
						remark: this.terminateForm.remark
					})
					
					uni.showToast({
						title: '退租办理成功',
						icon: 'success'
					})
					
					this.closeTerminatePopup()
					this.loadRentals()
				} catch (error) {
					console.error('退租失败:', error)
					uni.showToast({
						title: '退租办理失败',
						icon: 'none'
					})
				} finally {
					this.submitLoading = false
				}
			},
			
			showFilter() {
				uni.showToast({
					title: '筛选功能',
					icon: 'none'
				})
			},
			
			loadMore() {
				if (this.loadStatus === 'noMore') return
				this.loadStatus = 'loading'
				this.page++
				this.loadRentals()
			},
			
			getPaymentTypeText(type) {
				const map = {
					monthly: '月租',
					quarterly: '季租',
					half_year: '半年租',
					yearly: '年租'
				}
				return map[type] || type
			},
			
			getStatusText(status) {
				const map = {
					active: '在租',
					expired: '已到期',
					terminated: '已终止'
				}
				return map[status] || status
			},
			
			isExpiringSoon(endDate) {
				if (!endDate) return false
				const end = new Date(endDate)
				const now = new Date()
				const diffDays = Math.ceil((end - now) / (1000 * 60 * 60 * 24))
				return diffDays <= 7 && diffDays >= 0
			},
			
			getRemainingDays(endDate) {
				if (!endDate) return 0
				const end = new Date(endDate)
				const now = new Date()
				return Math.ceil((end - now) / (1000 * 60 * 60 * 24))
			}
		}
	}
</script>

<style scoped>
	.rentals-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;
	}

	.nav-btn:active {
		background: #F1F5F9;
	}

	/* 搜索栏 */
	.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;
	}

	.search-placeholder {
		color: #94A3B8;
	}

	/* 统计栏 */
	.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.warning {
		color: #F59E0B;
	}

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

	.stat-divider {
		width: 2rpx;
		height: 60rpx;
		background: #E2E8F0;
	}

	/* 筛选标签 */
	.filter-tabs {
		background: #FFFFFF;
		padding: 0 32rpx;
		white-space: nowrap;
	}

	.filter-tab {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		padding: 24rpx 32rpx;
		font-size: 28rpx;
		color: #64748B;
		position: relative;
	}

	.filter-tab.active {
		color: #2563EB;
		font-weight: 600;
	}

	.tab-indicator {
		position: absolute;
		bottom: 0;
		width: 40rpx;
		height: 4rpx;
		background: #2563EB;
		border-radius: 2rpx;
	}

	/* 公寓筛选 */
	.apartment-filter {
		background: #FFFFFF;
		padding: 16rpx 32rpx;
		border-bottom: 2rpx solid #F1F5F9;
	}

	.picker-value {
		display: flex;
		align-items: center;
		gap: 8rpx;
		font-size: 28rpx;
		color: #1E293B;
		font-weight: 500;
	}

	/* 租赁列表 */
	.rental-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;
		box-shadow: 0 8rpx 24rpx rgba(37, 99, 235, 0.3);
	}

	/* 租赁卡片 */
	.rental-card {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
		animation: fadeInUp 0.4s ease-out both;
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(20rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

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

	.room-info {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.apartment-name {
		font-size: 28rpx;
		font-weight: 600;
		color: #1E293B;
	}

	.room-number {
		font-size: 24rpx;
		color: #64748B;
		background: #F1F5F9;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
	}

	.status-tag {
		padding: 8rpx 20rpx;
		border-radius: 8rpx;
		font-size: 22rpx;
		font-weight: 500;
	}

	.status-tag.active {
		background: #D1FAE5;
		color: #059669;
	}

	.status-tag.expired {
		background: #F3F4F6;
		color: #6B7280;
	}

	.status-tag.terminated {
		background: #FEE2E2;
		color: #DC2626;
	}

	/* 租客信息 */
	.renter-info {
		display: flex;
		align-items: center;
		gap: 16rpx;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #F1F5F9;
	}

	.renter-avatar {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.renter-avatar text {
		font-size: 28rpx;
		font-weight: 600;
		color: #FFFFFF;
	}

	.renter-detail {
		display: flex;
		flex-direction: column;
	}

	.renter-name {
		font-size: 30rpx;
		font-weight: 600;
		color: #1E293B;
	}

	.renter-phone {
		font-size: 24rpx;
		color: #64748B;
	}

	/* 租赁信息 */
	.rental-info {
		margin-bottom: 16rpx;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 12rpx;
	}

	.info-item {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}

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

	.value {
		font-size: 26rpx;
		color: #1E293B;
	}

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

	.payment-tag {
		padding: 4rpx 12rpx;
		border-radius: 6rpx;
		font-size: 22rpx;
	}

	.payment-tag.monthly {
		background: #DBEAFE;
		color: #2563EB;
	}

	.payment-tag.quarterly {
		background: #FEF3C7;
		color: #D97706;
	}

	.payment-tag.half_year {
		background: #F3F4F6;
		color: #4B5563;
	}

	.payment-tag.yearly {
		background: #D1FAE5;
		color: #059669;
	}

	/* 到期警告 */
	.expiring-warning {
		display: flex;
		align-items: center;
		gap: 8rpx;
		background: #FEF2F2;
		padding: 12rpx 16rpx;
		border-radius: 12rpx;
		margin-bottom: 16rpx;
	}

	.expiring-warning text {
		font-size: 24rpx;
		color: #DC2626;
	}

	/* 操作按钮 */
	.card-actions {
		display: flex;
		gap: 16rpx;
		padding-top: 16rpx;
		border-top: 2rpx solid #F1F5F9;
	}

	.action-btn {
		flex: 1;
		height: 72rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.action-btn text {
		font-size: 28rpx;
		font-weight: 600;
	}

	.action-btn.renew {
		background: #DBEAFE;
	}

	.action-btn.renew text {
		color: #2563EB;
	}

	.action-btn.terminate {
		background: #FEE2E2;
	}

	.action-btn.terminate text {
		color: #DC2626;
	}

	/* 弹窗样式 */
	.popup-content {
		background: #FFFFFF;
		border-radius: 24rpx;
		width: 600rpx;
		max-height: 800rpx;
	}

	.popup-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx;
		border-bottom: 2rpx solid #F1F5F9;
	}

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

	.popup-body {
		padding: 32rpx;
		max-height: 560rpx;
		overflow-y: auto;
	}

	.form-item {
		margin-bottom: 24rpx;
	}

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

	.form-static {
		font-size: 30rpx;
		color: #1E293B;
		font-weight: 500;
	}

	.form-static.price {
		color: #EF4444;
		font-weight: 700;
	}

	.form-input {
		width: 100%;
		height: 80rpx;
		background: #F8FAFC;
		border-radius: 12rpx;
		padding: 0 24rpx;
		font-size: 28rpx;
		color: #1E293B;
	}

	.form-textarea {
		width: 100%;
		height: 160rpx;
		background: #F8FAFC;
		border-radius: 12rpx;
		padding: 20rpx 24rpx;
		font-size: 28rpx;
		color: #1E293B;
	}

	.popup-footer {
		display: flex;
		gap: 20rpx;
		padding: 24rpx 32rpx;
		border-top: 2rpx solid #F1F5F9;
	}

	.btn-cancel {
		flex: 1;
		height: 80rpx;
		background: #F3F4F6;
		border-radius: 12rpx;
		font-size: 28rpx;
		color: #64748B;
		border: none;
	}

	.btn-confirm {
		flex: 1;
		height: 80rpx;
		background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
		border-radius: 12rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		font-weight: 600;
		border: none;
	}
</style>
