<template>
	<view class="effect">
		<custom-navbar title="推广效果" backgroundColor="#FFFFFF"></custom-navbar>
		<view class="effect-selectTime">
			<selectActiveTime v-model="timeList" @change="timeChange" type="daterange" style="width: 100%;" />
		</view>

		<CommonList ref="groupRef" :apiUrl="apiObj.effect[identityIndex]"
			:listScrollHeight="`calc(100vh - ${statusBarHeight * 2 + 300}rpx)`">
			<template #listData="{ list }">
				<view class="order-container">
					<!-- 订单卡片列表 -->
					<view v-for="(item, index) in list" :key="index" class="order-card">
						<!-- 订单编号和复制按钮 -->
						<view class="order-number">
							<text class="label">订单编号：</text>
							<text class="number">{{ item.number }}</text>
							<text class="copy-btn" @click="copyOrderNo(item.number)">复制</text>
						</view>

						<!-- 服务信息 -->
						<view class="service-info">
							<image :src="item.order_photo[0]" class="service-img" mode="aspectFill"></image>
							<view class="service-detail">
								<text class="service-name">{{ item.server_title }}</text>
								<text class="order-time">下单时间：{{ item.pay_time }}</text>
								<text class="order-status">
									订单状态：<text style="color: #E8101E;">{{ getDescriptionByNumber(item.state) }}</text>
								</text>
							</view>
						</view>

						<!-- 金额信息 -->
						<view class="amount-info">
							<view class="amount-item">
								<text class="amount-label">实付金额</text>
								<text class="amount-value"><text style="font-size: 24rpx;">¥</text>{{ item.pay_money }}</text>
							</view>
							<view class="amount-item">
								<text class="amount-label">佣金比例</text>
								<text class="amount-value">{{ percentage(item.commission_rate)}}</text>
							</view>
							<view class="amount-item">
								<text class="amount-label">预估佣金</text>
								<text class="amount-value"><text style="font-size: 24rpx;">¥</text>{{ item.estimate_commission }}</text>
							</view>
						</view>
					</view>
				</view>
			</template>

			<!-- 空数据状态 -->
			<template #empty>
				<noData></noData>
			</template>
		</CommonList>

	</view>
</template>

<script>
	import request from "@/utils/request";
	import selectActiveTime from "components/select-active-time/select-active-time2.vue";
	import CommonList from "@/components/common/CommonList.vue";
	export default {
		name: "effect",
		data() {
			return {
				timeList: [],
				listQuery: {},
				apiObj: {
					effect:{
						2:"/sj/serversPromotion/promotionEffect",
						1:"/syr/serversPromotion/promotionEffect"
					},
				},
				identityIndex: 2,
				orders: [{
						orderNo: 'M233448656770000123456',
						imgUrl: 'https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/d1e9d7f08119492eb09a3d5c4c57501e.png~tplv-a9rns2rl98-24:720:720.jpeg?rcl=20251107141120721CF58B043A61780C8D&rk3s=8e244e95&rrcfp=d52e923b&x-expires=1763100680&x-signature=mZIqELwlIogxW0rc95Q0YbPqmvQ%3D',
						serviceName: '深沉清洁三部曲',
						createTime: '2025-08-09 12:12:00',
						status: '已付款',
						paidAmount: '¥100.99',
						commissionRate: '6.4%',
						estimatedCommission: '¥12.34'
					},
					{
						orderNo: 'M233448656770000123456',
						imgUrl: 'https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/d1e9d7f08119492eb09a3d5c4c57501e.png~tplv-a9rns2rl98-24:720:720.jpeg?rcl=20251107141120721CF58B043A61780C8D&rk3s=8e244e95&rrcfp=d52e923b&x-expires=1763100680&x-signature=mZIqELwlIogxW0rc95Q0YbPqmvQ%3D',
						serviceName: '产后盆底肌腹直肌修复',
						createTime: '2025-07-23 12:12:00',
						status: '已退款',
						paidAmount: '¥9100.99',
						commissionRate: '1.4%',
						estimatedCommission: '¥112.99'
					}
				]
			};
		},
		components: {
			selectActiveTime,
			CommonList
		},
		onLoad(options) {
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
			if (options.id && this.identityIndex) {
				this.listQuery.id = options.id
				this.$nextTick(() => {
					this.search();
				})
			}


		},
		methods: {
			timeChange(e){
				console.log(e)
				if(e[0]){
					this.listQuery.start_time = e[0]
				}
				if(e[1]){
					this.listQuery.end_time = e[1]
				}
				this.$nextTick(() => {
					this.search();
				})
			},
			copyOrderNo(orderNo) {
			      uni.setClipboardData({
			        data: orderNo,
			        success: () => {
			          uni.showToast({
			            title: '复制成功',
			            icon: 'none'
			          });
			        }
			      });
			    },
			percentage(decimalNum) {
				const keepDecimal = 1; // 保留 1 位小数
				const percentValue = (decimalNum * 100).toFixed(keepDecimal);
				return `${percentValue}%`;
			},
			search() {
				// 触发列表刷新
				this.$refs.groupRef.manualRefresh(this.listQuery);
			},
			getDescriptionByNumber(num) {
				// 创建数字与描述的映射关系
				const descriptionMap = {
					1: "已付款",
					2: "已付款",
					3: "已付款 ",
					4: "已付款",
					5: "已付款 ",
					6: "已付款",
					7: "已退款",
				};

				// 检查输入是否为有效数字且在映射范围内
				if (typeof num !== "number" || !descriptionMap.hasOwnProperty(num)) {
					return "未知类型";
				}

				return descriptionMap[num];
			},
		},
	};
</script>

<style lang="less">
	.effect {
		.effect-selectTime {
			padding: 20rpx 30rpx;
			background: #fff;
			box-sizing: border-box;
		}

		.order-container {
			padding-top: 20rpx;
			background-color: transparent;

			.order-card {
				background-color: #fff;
				border-radius: 20rpx;
				padding: 20rpx;

				.order-number {
					display: flex;
					align-items: center;
					margin-bottom: 22rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #333333;
					line-height: 37rpx;
					text-align: left;
					font-style: normal;

					.label {
						
					}

					.number {
						margin-right: 6rpx;
						color: #333333;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.copy-btn {
						color: #439EF0 ;
					}
				}

				.service-info {
					display: flex;
					margin-bottom: 20rpx;

					.service-img {
						width: 150rpx;
						height: 150rpx;
						border-radius: 10rpx;
						object-fit: cover;
					}

					.service-detail {
						margin-left: 20rpx;
						flex: 1;

						.service-name {
							display: block;
							font-weight: 500;
							font-size: 30rpx;
							color: #333333;
							line-height: 42rpx;
							text-align: left;
							font-style: normal;
							margin-bottom: 24rpx;
						}

						.order-time {
							display: block;
							font-size: 26rpx;
							color: #999999;
							line-height: 37rpx;
							text-align: left;
							font-style: normal;
							margin-bottom: 10rpx;
						}

						.order-status {
							font-weight: 400;
							font-size: 26rpx;
							color: #999999;
							line-height: 37rpx;
							text-align: left;
							font-style: normal;
						}
					}
				}

				.amount-info {
					display: flex;
					justify-content: space-between;
					border-top: 1rpx solid #edeeee;
					padding-top: 20rpx;

					.amount-item {
						flex: 1;
						text-align: center;

						.amount-label {
							display: block;
							font-weight: 400;
							font-size: 26rpx;
							color: #999999;
							line-height: 37rpx;
							text-align: center;
							font-style: normal;
							margin-bottom: 10rpx;
						}

						.amount-value {
							font-family: DINPro, DINPro;
							font-weight: 500;
							font-size: 32rpx;
							color: #333333;
							line-height: 41rpx;
							text-align: center;
							font-style: normal;
						}
					}
				}
			}
		}
	}
	
	.common-list {
		background-color: #fafafa!important;
		padding: 0;
		::v-deep .list-scroll{
			margin-top: 0;
		}
		::v-deep .list-container {
			padding: 0 20rpx;
		}
	}
</style>