<template>
	<u-popup :show="show" @close="$emit('close')" round="20rpx" bgColor="#f3f5f9" zIndex="10076">
		<view class="winning-record-popup">
			<image class="winning-record-header-bg"
				src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/red_head.png"
				mode="widthFix" />
			<image class="winning-record-background"
				src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/red_bg.png" />
			<view class="winning-record-content">
				<view class="winning-record-title">我的中奖记录</view>
				<view class="winning-record-header">
					<view class="header-column time-column">时间</view>
					<view class="header-column status-column">状态</view>
					<view class="header-column prize-column">奖品</view>
				</view>
				<scroll-view v-if="records && records.length" enable-flex scroll-y class="winning-record-list">
					<view class="winning-record-item" v-for="(item, index) in records" :key="index">
						<view class="record-time">{{ item.createTime }}</view>
						<view class="record-status-button" v-if="item.orderStatus == '-9' || !item.orderStatus"
							@click="$emit('fill-address', item)">
							<text>填地址</text>
						</view>
						<view class="record-status" v-else>
							<text v-if="item.orderStatus == '1'">待支付</text>
							<text v-if="item.orderStatus == '2'">待发货</text>
							<text v-if="item.orderStatus == '3'">待收货</text>
							<text v-if="item.orderStatus == '4'">已完成</text>
							<text v-if="item.orderStatus == '-3'">已取消</text>
						</view>
						<view class="record-prize">
							{{ item.productName ? truncate(item.productName, 6) : '' }}
						</view>
					</view>
				</scroll-view>
				<view v-else class="no-winning-records">暂无中奖信息</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
export default {
	name: 'LiveWinningRecordPanel',
	props: {
		show: { type: Boolean, default: false },
		records: { type: Array, default: () => [] }
	},
	methods: {
		truncate(str, maxLength) {
			if (typeof str !== 'string' || str.length <= maxLength) return str
			return str.slice(0, maxLength) + '...'
		}
	}
}
</script>

<style scoped lang="scss">
.winning-record-popup {
	position: relative;
	height: 800rpx;

	.winning-record-header-bg {
		position: absolute;
		top: -125rpx;
		left: 50%;
		width: 311rpx;
		transform: translateX(-50%);
	}

	.winning-record-background {
		width: 100%;
		height: 100%;
	}

	.winning-record-content {
		position: absolute;
		top: 50rpx;
		color: #fff;
		width: 100%;
		padding: 0 36rpx;
		box-sizing: border-box;

		.winning-record-title {
			text-align: center;
			font-size: 40rpx;
			font-weight: 500;
			margin-bottom: 40rpx;
		}

		.winning-record-header {
			display: flex;
			justify-content: space-between;
			text-align: center;
			font-size: 34rpx;
			margin-bottom: 40rpx;

			.time-column { width: 45%; }
			.status-column { width: 20%; }
			.prize-column { width: 35%; }
		}

		.winning-record-list {
			height: 500rpx;

			.winning-record-item {
				display: flex;
				justify-content: space-between;
				text-align: center;
				font-size: 34rpx;
				margin-bottom: 20rpx;

				.record-time { width: 45%; font-size: 30rpx; }
				.record-status-button {
					width: 20%;
					background-color: #fff;
					border-radius: 20rpx;
					color: #f4410b;
				}
				.record-status { width: 20%; }
				.record-prize { width: 35%; }
			}
		}

		.no-winning-records {
			font-size: 36rpx;
			margin-top: 150rpx;
			text-align: center;
		}
	}
}
</style>
