<template>
	<view class="page">
		<u-navbar title="推广列表" :border-bottom="false" :background="bgc" back-icon-color="#111827" title-color='#111827'
			title-size='34' title-bold height='44'>
		</u-navbar>
		
		<!-- 列表区域 -->
		<view class="list-container">
			<view hover-class="app-tap-hover" class="promotion-card" v-for="item in list" :key="item.id" @click="btnitem(item.id)">
				<!-- 卡片头部 -->
				<view class="card-header">
					<view class="user-info">
						<view class="avatar-box">
							<u-icon name="account" size="40" color="#4297F3"></u-icon>
						</view>
						<view class="info-text">
							<text class="phone">备注：{{ item.remark || '未设置' }}</text>
							<text class="create-time">{{ item.createTime }}</text>
						</view>
					</view>
					<view class="status-tag" 
						:class="[item.status == '1' ? 'status-active' : (item.status == '2' ? 'status-disabled' : 'status-default')]">
						{{ item.status == '1' ? '启用中' : (item.status == '2' ? '已禁用' : '未知') }}
					</view>
				</view>
				
				<!-- 卡片内容 -->
				<view class="card-content">
					<view class="info-row">
						<view class="info-item">
							<text class="label">分成比例</text>
							<text class="value highlight">{{ (item.pointInt === 0 || item.pointInt) ? (item.pointInt + '%') : '未设置' }}</text>
						</view>
						<view class="info-item">
							<text class="label">关联卡券</text>
							<text class="value">{{ item.couponList ? item.couponList.length : 0 }}张</text>
						</view>
					</view>
					<view class="remark-row" v-if="item.remark">
						<text class="label">手机号：</text>
						<text class="remark-text">{{ item.userPhone || '未设置手机号' }}</text>
					</view>
				</view>
				
				<!-- 卡片底部 -->
				<view hover-class="app-tap-hover" class="card-footer" @click.stop="toQrcode(item.id || item.promotionId)">
					<view class="action-hint">
						<text>点击查看二维码</text>
						<!-- <u-icon name="arrow-right" size="24" color="#999"></u-icon> -->
						<image src="https://api.ccttiot.com/smartmeter/img/static/uAu2rVRD5EzHqo7TDpYM" style="width: 32rpx;height: 32rpx;" mode=""></image>
					</view>
				</view>
			</view>
			
			<!-- 空状态 -->
			<u-empty v-if="list.length === 0 && !loading" mode="data" text="暂无推广数据" margin-top="200"></u-empty>
			
			<!-- 加载更多 -->
			<view class="load-more" v-if="list.length > 0">
				<text v-if="loading">加载中...</text>
				<text v-else-if="finished">没有更多了</text>
				<text hover-class="app-tap-hover" v-else @click="loadMore">加载更多</text>
			</view>
		</view>
		
		<!-- 底部占位 -->
		<view class="footer-placeholder"></view>
		
		<!-- 新增按钮 -->
		<view class="footer-container">
			<view hover-class="app-tap-hover" class="add-btn-wrap" @click="toAdd">
				<view class="btn-shadow"></view>
				<view class="btn-content">
					<u-icon name="plus" color="#ffffff" size="36" style="margin-right: 12rpx;"></u-icon>
					<text>新增推广</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			bgc: {
				backgroundColor: "#F7F8FA",
			},
			areaId: '',
			list: [],
			pageNum: 1,
			pageSize: 10,
			loading: false,
			finished: false
		}
	},
	onLoad(option) {
		this.areaId = option.areaId || ''
	},
	onShow() {
		this.refreshList()
	},
	onReachBottom() {
		this.loadMore()
	},
	onPullDownRefresh() {
		this.refreshList()
		uni.stopPullDownRefresh()
	},
	methods: {
		// 点击跳转到详情
		btnitem(id){
			uni.navigateTo({
				url:'/page_shanghu/guanli/tuiguang_detail?id=' + id + '&areaId=' + this.areaId
			})
		},
		// 刷新列表
		refreshList() {
			this.pageNum = 1
			this.finished = false
			this.list = []
			this.getList()
		},
		// 获取列表
		getList() {
			if (this.loading || this.finished) return
			this.loading = true
			
			this.$u.get('/bst/areaPromotion/list', {
				areaId: this.areaId,
				pageNum: this.pageNum,
				pageSize: this.pageSize
			}).then(res => {
				this.loading = false
				if (res.code === 200) {
					const rows = res.rows || []
					const mappedRows = rows.map(item => {
						// 分成比例展示为整数百分比
						if (item.point === 0 || item.point) {
							item.pointInt = Math.round(item.point * 100)
						} else {
							item.pointInt = null
						}
						return item
					})
					if (this.pageNum === 1) {
						this.list = mappedRows
					} else {
						this.list = this.list.concat(mappedRows)
					}
					
					// 判断是否还有更多数据
					if (rows.length < this.pageSize) {
						this.finished = true
					}
				} else {
					uni.showToast({
						title: res.msg || '获取列表失败',
						icon: 'none'
					})
				}
			}).catch(() => {
				this.loading = false
				uni.showToast({
					title: '网络错误',
					icon: 'none'
				})
			})
		},
		// 加载更多
		loadMore() {
			if (this.loading || this.finished) return
			this.pageNum++
			this.getList()
		},
		// 跳转二维码页
		toQrcode(id) {
			if (!id) {
				uni.showToast({
					title: '缺少推广ID',
					icon: 'none'
				})
				return
			}
			uni.navigateTo({
				url: '/page_shanghu/guanli/tuiguang_qrcode?id=' + id + '&areaId=' + this.areaId
			})
		},
		// 跳转新增
		toAdd() {
			uni.navigateTo({
				url: '/page_shanghu/guanli/tuiguang_detail?areaId=' + this.areaId
			})
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #F7F8FA;
	min-height: 100vh;
}

.page {
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

.list-container {
	padding: 24rpx 32rpx;
}

.promotion-card {
	background: #FFFFFF;
	border-radius: 24rpx;
	margin-bottom: 24rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx 32rpx 24rpx;
		border-bottom: 1rpx solid #F5F5F5;
		
		.user-info {
			display: flex;
			align-items: center;
			
			.avatar-box {
				width: 80rpx;
				height: 80rpx;
				background: linear-gradient(135deg, #E8F4FD 0%, #D4ECFD 100%);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;
			}
			
			.info-text {
				display: flex;
				flex-direction: column;
				
				.phone {
					font-size: 32rpx;
					font-weight: 600;
					color: #333;
					margin-bottom: 6rpx;
				}
				
				.create-time {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
		
		.status-tag {
			padding: 8rpx 20rpx;
			border-radius: 20rpx;
			font-size: 24rpx;
			font-weight: 500;
		}
		
		.status-active {
			background: linear-gradient(135deg, #E8F8EE 0%, #D4F4E2 100%);
			color: #52C41A;
		}
		
		.status-disabled {
			background: #F5F5F5;
			color: #999;
		}
		
		.status-default {
			background: #FFF7E6;
			color: #FA8C16;
		}
	}
	
	.card-content {
		padding: 24rpx 32rpx;
		
		.info-row {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			
			.info-item {
				display: flex;
				flex-direction: column;
				
				.label {
					font-size: 24rpx;
					color: #999;
					margin-bottom: 8rpx;
				}
				
				.value {
					font-size: 30rpx;
					color: #333;
					font-weight: 500;
				}
				
				.highlight {
					color: #4297F3;
					font-size: 36rpx;
					font-weight: 600;
				}
			}
		}
		
		.remark-row {
			display: flex;
			align-items: flex-start;
			background: #F9FAFB;
			padding: 16rpx 20rpx;
			border-radius: 12rpx;
			
			.label {
				font-size: 24rpx;
				color: #999;
				flex-shrink: 0;
			}
			
			.remark-text {
				font-size: 24rpx;
				color: #666;
				flex: 1;
				word-break: break-all;
			}
		}
	}
	
	.card-footer {
		padding: 20rpx 32rpx;
		background: #FAFBFC;
		
		.action-hint {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			
			text {
				font-size: 24rpx;
				color: #999;
				margin-right: 8rpx;
			}
		}
	}
}

.load-more {
	text-align: center;
	padding: 40rpx 0;
	
	text {
		font-size: 26rpx;
		color: #999;
	}
}

.footer-placeholder {
	height: 180rpx;
}

.footer-container {
	position: fixed;
	bottom: 60rpx;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	z-index: 100;
	pointer-events: none;
	
	.add-btn-wrap {
		pointer-events: auto;
		position: relative;
		width: 600rpx;
		height: 100rpx;
		
		.btn-content {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(135deg, #4297F3 0%, #2B76E5 100%);
			border-radius: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: bold;
			z-index: 2;
			box-shadow: 0 10rpx 20rpx rgba(66, 151, 243, 0.3);
		}
		
		.btn-shadow {
			position: absolute;
			top: 20rpx;
			left: 10%;
			width: 80%;
			height: 100%;
			background: #4297F3;
			filter: blur(20rpx);
			opacity: 0.4;
			border-radius: 100rpx;
			z-index: 1;
		}
	}
}
</style>
