<template>
	<view class="content">

		<image :src="bg" style="width: 100%; height: 100%; background-color: bisque; position: absolute;" mode="">
		</image>
		<uniNoticeBar showIcon single scrollable text="赠品仅限线下购买设备的用户领取，需人工审核，预计3个工作日内完成！"
			style="width: 100%;position:fixed;top:10%" background-color="transparent" color="#000" />
			<view style="height:230rpx;"></view>
		<view class="auto-scroll-container" catchtouchmove="return false" v-if="imageList.length>0">
			<!-- 滚动容器 -->
			<scroll-view class="scroll-view" scroll-x :scroll-with-animation="false" ref="scrollView"
				@scroll="onScroll">
				<!-- 图片列表容器 (复制一份实现无缝滚动) -->
				<view class="scroll-content" :style="{ transform: `translateX(${translateX}px)` }"
					catchtouchmove="return false">
					<view class="image-list" ref="imageList">
						<view class="image-item" v-for="(item, index) in imageList" :key="index">
							<image :src="item.accessUrl" mode="aspectFill" class="item-image" :alt="item.realName">
							</image>
						</view>
					</view>

					<!-- 复制一份列表用于无缝衔接 -->
					<view class="image-list copy-list" catchtouchmove="return false">
						<view class="image-item" v-for="(item, index) in imageList" :key="'copy-' + index">
							<image :src="item.accessUrl" mode="aspectFill" class="item-image" :alt="item.realName">
							</image>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>


		<view class="center" @click="openReceivePop"
			style="width: 386rpx; height: 102rpx; background-color: #0877FF; border-radius: 16rpx; position: absolute; bottom: 200rpx;">
			<text style="font-size: 35rpx; color: white;">设备专属权益兑换</text>
		</view>

		<view class="center" @click="openRecordPop"
			style="width: 386rpx; height: 80rpx; border-radius: 16rpx; position: absolute; bottom: 100rpx;">
			<text style="font-size: 30rpx; color: black;">领取记录</text>
		</view>


		<!-- 领奖弹窗 -->
		<uni-popup ref="receivePop" type="center" :is-mask-click="false">
			<view class="column"
				style="width: 600rpx; height: 1250rpx; background-color: #F5F5F5; border-radius: 16rpx; align-items: center; font-size: 25rpx;">

				<text style="font-size: 35rpx; font-weight: 600; color: black; margin-top: 40rpx;">恭喜您获得赠礼</text>

				<text style="font-size: 25rpx; color: black; margin-top: 10rpx;">填写地址和产品信息，送货上门</text>

				<view class="column"
					style="width: 550rpx; background-color: white; align-items: center;margin-top: 20rpx;border-radius: 16rpx; padding-bottom: 20rpx;">

					<text style="font-size: 25rpx; color: black; margin-top: 10rpx;">收货地址填写</text>

					<view class="row line">
						<text style="width: 110rpx;">姓名</text>
						<input v-model="name" type="text" style="margin-left: 50rpx; width: 350rpx;" />
					</view>

					<view class="row line">
						<text style="width: 110rpx;">联系方式</text>
						<input v-model="phone" type="text" style=" margin-left: 50rpx; width: 350rpx;" />
					</view>

					<view class="row line">
						<text style="width: 110rpx;">工作单位</text>
						<input v-model="workUnit" type="text" style="margin-left: 50rpx; width: 350rpx;" />
					</view>

					<view class="row line">
						<text style="margin-top: 20rpx; width: 110rpx;">收货地址</text>
						<textarea v-model="address" placeholder="" :auto-height="false" :maxlength="-1"
							style="height: 50px; width: 350rpx;margin-left: 50rpx;" />
					</view>
				</view>

				<view class="column"
					style="width: 550rpx; background-color: white; align-items: center;margin-top: 20rpx;border-radius: 16rpx; padding-bottom: 20rpx;">

					<text style="font-size: 25rpx; color: black; margin-top: 40rpx;">产品信息填写</text>

					<view class="row line">
						<text style="width: 110rpx;">型号</text>
						<input v-model="model" type="text" style="margin-left: 50rpx; width: 350rpx;" />
					</view>

					<view class="row line">
						<text style="width: 110rpx;">出品编号</text>
						<input v-model="number" type="text" style="margin-left: 50rpx; width: 350rpx;" />
					</view>

					<view class="row line">
						<text style="width: 110rpx;">出品年月</text>
						<input v-model="createTime" type="text" style="margin-left: 50rpx; width: 350rpx;" />
					</view>

					<view class="row" style="width: 100%; margin-top: 40rpx; align-items: flex-start; flex-wrap: wrap;">
						<view class="center" @click="seleImg"
							style="width: 150rpx; height:150rpx; background-color: gainsboro; margin-left: 30rpx; margin-right: 20rpx; position: relative;">
							<text style="position: absolute;">+</text>
						</view>
						<image style="width: 150rpx; height:150rpx; margin-right: 20rpx;" v-if="imagePath"
							:src="imagePath" mode="aspectFit" @click="previewImage">
						</image>
					</view>

					<text style="font-size: 22rpx; margin-top: 20rpx;width: 90%;">拍摄并上传清晰的产品铭牌信息用于辅助审核，通过后立即发货</text>
				</view>

				<view class="row" style="width: 550rpx; justify-content: space-between; margin-top: 40rpx;">
					<view class="center" @click="closeReceivePop"
						style="width: 150rpx; height: 80rpx; background-color: #CCCCCC; border-radius: 16rpx;">
						<text style="font-size: 28rpx; color: #333;">关闭</text>
					</view>
					<view class="center" @click="submitForm"
						style="width: 350rpx; height: 80rpx; background-color: #0877FF; border-radius: 16rpx;position: relative;">
						<text style="font-size: 28rpx; color: white;">提交</text>
					</view>
				</view>
			</view>
		</uni-popup>


		<!-- 领取记录 -->
		<uni-popup ref="recordPop" type="center">

			<view class="column"
				style="width: 604rpx; height: 598rpx; background-color: #F5F5F5; border-radius: 16rpx; align-items: center;">

				<view class="row"
					style="width: 90%; justify-content: space-between; align-items: center; margin-top: 30rpx;">
					<view class="" style="width: 30rpx;">

					</view>

					<text style="font-size: 35rpx; font-weight: 600; color: black;">领取记录</text>

					<image src="/static/ic_close.png" @click="closeRecordPop()" style="width: 30rpx; height: 30rpx;"
						mode=""></image>
				</view>

				<view class="column"
					style="width: 100%; height: 460rpx;  margin-top: 30rpx; overflow-y: auto; font-size: 25rpx; align-items: center;">


					<view class="column" v-for="item in recordList" :key="item.phone + item.time"
						style="width: 90%; height: 180rpx;  margin-bottom: 10rpx; position: relative; background-color: white; padding: 10rpx; border-radius: 16rpx;">

						<view class="row" style="justify-content: space-between; margin-top: 20rpx;">
							<view class="row">
								<text>{{ item.name }}</text>
								<text style="margin-left: 20rpx;">{{ item.phone }}</text>
							</view>
							<text>{{ item.time }}</text>
						</view>
						<text style="margin-top: 20rpx;">{{ item.address }}</text>
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import uniNoticeBar from '@/uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.vue'
	import {
		processImage
	} from '@/common/utils'
	export default {
		components: {
			uniNoticeBar
		},
		onLoad() {
			this.getConfig();
			var userId = uni.getStorageSync("user_id");
			if (!userId || userId == 0) {
				this.login();
			}
			this.getBannerList();
			this.userId = userId;
		},
		data() {
			return {
				bg: "",
				userId: 0,
				imagePath: '',
				name: "",
				phone: "",
				base64: "",
				workUnit: "",
				address: "",
				createTime: "",
				number: "",
				model: "",
				recordList: [],
				// 图片数据
				imageList: [],
				scrollTimer: null, // 滚动定时器
				scrollSpeed: 1, // 滚动速度 (px/帧)
				translateX: 0, // 位移量
				listWidth: 0, // 列表宽度
				isScrolling: false // 是否正在滚动
			}
		},

		onReady() {

		},

		onUnload() {
			// 页面卸载时清除定时器
			this.stopAutoScroll();
		},

		methods: {
			request(url, method, data) {
				return new Promise((resolve, reject) => {
					const header = {

					};
					if (method == "post") {
						header['content-type'] = 'application/json';
					}
					uni.request({
						url: "https://gift.zpc-xy.com/" + url,
						method: method,
						data: data,
						header: header,
						timeout: 10000,
						success: (res) => {
							console.log('API响应:', res);
							if (res.statusCode === 200) {
								resolve(res.data);
							} else {
								reject(new Error(`请求失败，状态码: ${res.statusCode}`));
							}
						},
						fail: (err) => {
							console.error('API请求失败:', err);
							reject(err);
						}
					});
				})
			},
			async getConfig() {
				const res = await this.request("config", "get", {});
				console.log(res);
				if (res.home != "") {
					this.bg = res.home;
				}
			},
			wxLogin() {
				return new Promise((resolve, reject) => {
					uni.login({
						provider: 'weixin', //使用微信登录
						onlyAuthorize: true,
						success: async function(res) {
							// if()
							resolve(res.code);
						},
						fail: function(err) {
							reject(err);
						}
					})
				})

			},
			async login() {
				try {
					const wxCode = await this.wxLogin();
					if (wxCode) {
						const res = await this.request("userLogin?code=" + wxCode, "post", {});
						if (res.code == 200) {
							uni.setStorageSync("user_id", res.data.user_id);
							this.userId = res.data.user_id;
							console.log('登录成功, userId:', this.userId);
						} else {
							console.error('登录失败:', res.message);
						}
					}
				} catch (error) {
					console.error('登录过程出错:', error);
				}
			},
			openReceivePop() {
				this.$refs.receivePop.open();
			},

			closeReceivePop() {
				this.$refs.receivePop.close();
			},
			getUserId() {

				if (this.userId == 0) {

					var userId = uni.getStorageSync("user_id");
					if (!userId || userId == 0) {
						this.login();
					} else {
						this.userId = userId;
					}
				}
				return this.userId;

			},
			async openRecordPop() {
				await this.loadRecordList();
				this.$refs.recordPop.open();
			},

			async loadRecordList() {
				try {
					uni.showLoading({
						title: '加载中...'
					});
					// 这里可以调用API获取实际的领取记录
					const result = await this.request('getRecord?userId=' + this.getUserId(), 'GET', {});
					console.log(result);
					if (result.data.length > 0) {
						let isShow = true;
						let record = [];
						for (var index = 0; index < result.data.length; index++) {
							var element = result.data[index];
							if (element.status == 1) {
								record.push(element)
							}
						}
						this.recordList = record;
					}
					// 目前使用模拟数据
					console.log('加载领取记录...');
				} catch (error) {
					console.error('加载领取记录失败:', error);
				}
				uni.hideLoading();
			},

			closeRecordPop() {
				this.$refs.recordPop.close();
			},

			async seleImg() {
				try {
					uni.showLoading({
						title: '处理中...'
					});

					const {
						base64,
						path
					} = await processImage();
					console.log('最终Base64长度:', base64.length, path);
					this.imagePath = path;
					this.base64 = base64;
					uni.showToast({
						title: '上传成功'
					});
				} catch (err) {
					console.error('处理失败', err);
					uni.showToast({
						title: '处理失败',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}

			},

			validateForm() {
				if (!this.name.trim()) {
					uni.showToast({
						title: '请填写姓名',
						icon: 'none'
					});
					return false;
				}
				if (!this.phone.trim()) {
					uni.showToast({
						title: '请填写联系方式',
						icon: 'none'
					});
					return false;
				}
				if (!this.workUnit.trim()) {
					uni.showToast({
						title: '请填写工作单位',
						icon: 'none'
					});
					return false;
				}
				if (!this.address.trim()) {
					uni.showToast({
						title: '请填写收货地址',
						icon: 'none'
					});
					return false;
				}
				if (!this.model.trim()) {
					uni.showToast({
						title: '请填写设备型号',
						icon: 'none'
					});
					return false;
				}
				if (!this.number.trim()) {
					uni.showToast({
						title: '请填写出品编号',
						icon: 'none'
					});
					return false;
				}
				if (!this.createTime.trim()) {
					uni.showToast({
						title: '请填写出品年月',
						icon: 'none'
					});
					return false;
				}
				if (!this.imagePath) {
					uni.showToast({
						title: '请上传产品铭牌照片',
						icon: 'none'
					});
					return false;
				}
				return true;
			},

			async submitForm() {
				if (!this.validateForm()) {
					return;
				}

				uni.showLoading({
					title: '提交中...'
				});

				try {
					const formData = {
						UserId: this.userId,
						Name: this.name,
						Phone: this.phone,
						Company: this.workUnit,
						Address: this.address,
						ProductModel: this.model,
						ProductSerialNumber: this.number,
						ProductDate: this.createTime,
						ProductImage: this.base64
					};

					// 这里可以调用API提交数据
					const result = await this.request('addRecord', 'POST', formData);
					console.log(result);
					uni.hideLoading();
					if (result.code == 200) {
						uni.showToast({
							title: '提交成功，请等待审核',
							icon: 'success'
						});
						this.closeReceivePop();
						this.clearForm();
					} else {
						uni.showToast({
							title: '提交失败，请重试',
							icon: 'none'
						});

					}


				} catch (error) {
					uni.hideLoading();
					uni.showToast({
						title: '提交失败，请重试',
						icon: 'none'
					});
					console.error('提交失败:', error);
				}
			},

			clearForm() {
				this.name = '';
				this.phone = '';
				this.workUnit = '';
				this.address = '';
				this.model = '';
				this.number = '';
				this.createTime = '';
				this.imagePath = '';
				this.base64 = '';
			},

			previewImage() {
				if (this.imagePath) {
					uni.previewImage({
						current: this.imagePath,
						urls: [this.imagePath],
						success: function(res) {
							console.log('预览图片成功');
						},
						fail: function(err) {
							console.error('预览图片失败:', err);
							uni.showToast({
								title: '预览失败',
								icon: 'none'
							});
						}
					});
				}
			},
			async getBannerList() {
				const res = await this.request("getBannerList", "GET", {});
				console.log(res);
				if (res.data.length > 0) {
					this.imageList = res.data;
					console.log(this.imageList, this.imageList.length);
					// 获取列表宽度
					this.$nextTick(() => {
						const query = uni.createSelectorQuery().in(this);
						query.select('.image-list').boundingClientRect(data => {
							this.listWidth = data.width;
							// 开始自动滚动
							this.startAutoScroll();
						}).exec();
					});
				}
			},

			// 开始自动滚动
			startAutoScroll() {
				this.stopAutoScroll(); // 先清除已有定时器

				// 每16ms滚动一次 (约60帧/秒)
				this.scrollTimer = setInterval(() => {
					this.translateX -= this.scrollSpeed;

					// 当滚动距离达到一个列表宽度时，重置位置实现无缝滚动
					if (Math.abs(this.translateX) >= this.listWidth) {
						this.translateX = 0;
					}

					this.isScrolling = true;
				}, 16);
			},

			// 停止自动滚动
			stopAutoScroll() {
				if (this.scrollTimer) {
					clearInterval(this.scrollTimer);
					this.scrollTimer = null;
					this.isScrolling = false;
				}
			},

			// 监听滚动事件 (用于鼠标悬停暂停)
			onScroll() {
				// 可以在这里处理手动滚动后的逻辑
			}


		}
	}
</script>

<style scoped>
	.content {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* justify-content: center; */
		position: relative;
	}

	.line {
		width: 90%;
		justify-content: center;
		margin-top: 20rpx;
		border-bottom: 0.86px solid #e3e3e3;

	}

	.auto-scroll-container {

		width: 100%;
		overflow: hidden;
		/* 隐藏滚动条 */
		padding: 20rpx 0;
	}

	.scroll-view {
		width: 100%;
		white-space: nowrap;
		/* 防止换行 */
	}

	.scroll-content {
		display: flex;
	}

	.image-list {
		display: flex;
		flex-direction: row;
	}

	.image-item {
		width: 240rpx;
		height: 200rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.item-image {
		width: 100%;
		height: 100%;
		display: block;
	}
</style>