<template>
	<view class="page">
		<image class="bg" :src="'/static/img/DM_20240409173533_003.jpg'"></image>
		<view class="rule" @click="goRule">
			<text>规则</text>
		</view>
		<view class="flex-col content">
			<view class="flex-row justify-end">
				<view class="flex-row justify-end record"  @click="goRecord">
					<text class="record-left">中奖记录</text>
					<u-icon name="/static/img/DM_20240409173533_004.png" size="45rpx"></u-icon>
				</view>
			</view>

			<view>
				<LuckyWheel ref="myLucky" width="550rpx" height="550rpx"
							:blocks="blocks" :prizes="prizes" :buttons="buttons"
							@start="startCallBack" @end="endCallBack"/>
			</view>

			<view class="count">
				<text>您有0次抽奖机会</text>
			</view>
			<view id="rollId" class="roll">
				<wfScroll :scrollHeight="scrollHeight" :scrollTimer="true">
					<view class="flex-row justify-between rollItem" v-for="(item,index) in 10">
						<view>
							<text class="text1">17365000014</text>
							<text class="text2">2021年3月29日09:22</text>
						</view>
						<view>
							<text class="text3">一等奖</text>
							<text class="text2">扫地机器人</text>
						</view>
					</view>
				</wfScroll>
			</view>
		</view>
	</view>
</template>

<script>
	import wfScroll from "../../components/WF-scroll/WF-scroll";
	import LuckyWheel from "../../components/@lucky-canvas/uni/lucky-wheel";
	export default {
		components: {LuckyWheel,wfScroll},
		data() {
			return {
				scrollHeight:0,

				blocks: [
						{ padding: '55rpx'},
					{imgs:[{src:'static/img/zpbg.png',width:'550rpx',height:'550rpx',top:'-55rpx',rotate:true}]}
				],
				prizes: [
					{ fonts: [{ text: '一等奖', top: '10%',fontSize:'25rpx' }],imgs:[{src:'static/img/DM_20240409173533_004.png',top:'40%'}], background: '#fff9d9' },
					{ fonts: [{ text: '小米手机', top: '10%',fontSize:'25rpx' }], background: '#f6ecb4' },
					{ fonts: [{ text: '大彩电', top: '10%',fontSize:'25rpx' }], background: '#fff9d9' },
					{ fonts: [{ text: '小踩点', top: '10%',fontSize:'25rpx' }], background: '#f6ecb4' },
					{ fonts: [{ text: '耳机', top: '10%',fontSize:'25rpx' }], background: '#fff9d9' },
					{ fonts: [{ text: '收音机', top: '10%',fontSize:'25rpx' }], background: '#f6ecb4' },
				],
				buttons: [
					{ radius: '90rpx', background: '#fddc6a'},
					// {
					// 	radius: '40px', background: '#fddc6a',
					// 	pointer: true,
					// 	fonts: [{ text: '开始\n抽奖', top: '-30px',fontColor:'#fa4445',fontWeight:'700',fontSize:'40rpx',lineHeight:'50rpx' }]
					// },

					{
						imgs: [{src:'static/img/DM_20240409173533_001.png',width:'200rpx',height:'240rpx',top:'-140rpx'}],
					},
				],
			}
		},

		mounted(){
			this.getScrollHeight();
		},
		methods: {

			goRecord(){
				uni.navigateTo({
					url:'/pages/lotteryRecord/lotteryRecord'
				})
			},
			goRule(){
				uni.navigateTo({
					url:'/pages/lotteryRule/lotteryRule'
				})
			},

			getScrollHeight(){
				const query = uni.createSelectorQuery().in(this);
				query.select('#rollId').boundingClientRect(data => {
					let sysinfo = uni.getSystemInfoSync()
					this.scrollHeight = (sysinfo.screenWidth/750) * data.height
					console.log('元素的高度：', this.scrollHeight);
				}).exec();
			},

			// 点击抽奖按钮触发回调
			startCallBack () {
				// 先开始旋转
				this.$refs.myLucky.play()
				// 使用定时器来模拟请求接口
				setTimeout(() => {
					// 假设后端返回的中奖索引是0
					const index = 3
					// 调用stop停止旋转并传递中奖索引
					this.$refs.myLucky.stop(index)
				}, 3000)
			},
			// 抽奖结束触发回调
			endCallBack (prize) {
				// 奖品详情
				console.log(prize)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.rpx.scss';
</style>
