<template>
	<view class="gloabal-root-content-c" :style="'background-color:' + (typeName.indexOf('生肖') != -1 ? '#2F73F3' : '#201024')+ ' ;'">

	

		<image v-if="typeName.indexOf('生肖') != -1" style="width: 100vw; height: 412rpx;" src="../../static/bg3.jpg" mode="scaleToFill"></image>
		<image v-else style="width: 100vw; height: 412rpx;" src="../../static/bg2.jpg" mode="scaleToFill"></image>

		<view class="content">

			<LoadingView v-if="loading"></LoadingView>

			<view v-else>	


				<view class="cark_c">

					<view class="cark_c_title">
						{{"已为您生成 " + typeName + "幸运号码"}}
					</view>

					<view style="display: flex; justify-content: space-between; align-items: center;">
						<view class="line-c"></view>
						<text class="qihao-text">{{'双色球 第'+data_result.issue+'期'}}</text>
						<view class="line-c"></view>
					</view>

					<view v-for="(item, index) in codes"
						style="display: flex; margin-top: 18rpx; align-items: center; ">
						<text style="width: 90rpx; font-size: 28rpx;">{{"第" + (index + 1) + "组"}}</text>

						<NumberQiu :data_info="item" qiu_height="68rpx" :select_number="select_number"></NumberQiu>

					</view>

					<view class="btn-ll-c">

						<text class="number_c" @click="copyNumber">
							复制号码
						</text>

						<text class="select_code_c" @click="joinNumberBook">
							加入号码本
						</text>

					</view>
				</view>

				<view class="cark_c">

					<view style="display: flex; justify-content: center; flex-direction: column; align-items: center;">
						<text class="xinyun_c">{{data_result.xyh}}</text>
						<text style="font-size: 32rpx; color: #A74F4F;">今日幸运数字</text>
					</view>

					<view class="title_samlge_c"> 今日运势：</view>
					<view class="content-text-c">{{data_result.jrys}}</view>

					<view v-show="data_result.xgys && data_result.xgys.length > 0" class="title_samlge_c">
						{{typeName + "性格："}}
					</view>
					<view v-show="data_result.xgys && data_result.xgys.length > 0" class="content-text-c">
						{{data_result.xgys}}
					</view>

				</view>
			</view>
		</view>

		<view class="warn_text">
			幸运号码仅供娱乐参考，不保证中奖结果。今日运势仅供您娱乐，无实际指导意义。
		</view>

	</view>
</template>

<script>
	import NumberQiu from '../../components/NumberQiu.vue'

	import http from '../../utils/http.js'

	import LoadingView from '../../components/LoadingView.vue'

	import common from '../../utils/common.js'

	export default {
		components: {
			NumberQiu,
			LoadingView
		},
		data() {
			return {
				common,
				typeName: "",
				codes: [],
				numberArray: [],
				loading: false,
				data_result: "",
				select_number: "",
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
			}
		},
		onLoad(val) {
			let data = JSON.parse(decodeURIComponent(val.info))

			if (data.title) {
				this.typeName = data.title

				uni.setNavigationBarTitle({
					title: data.title + "幸运选号"
				})

				var result = data.title.replace("生肖", "")
				this.requestData(result)
			}

			console.log(this.codes)

		},
		methods: {
			onBack() {
				uni.navigateBack()
			},
			async requestData(name) {
				this.loading = true
				var devicesId = uni.getSystemInfoSync().deviceId
				let query_data = `query{
					tools_get_xyxh_info(name :"${name}",lottery:"双色球",device_number:"${devicesId}")
				}`;
				console.info(query_data);
				let result = await http.gql({
					query: query_data
				})
				console.info(result);
				//处理返回请求
				if (result && result.data && result.data.tools_get_xyxh_info &&
					!result.data.tools_get_xyxh_info.error) {
					var list = result.data.tools_get_xyxh_info.bet_list
					for (let i = 0; i < list.length; i++) {
						this.codes.push(this.genNumberStr(list[i]))
					}
					this.select_number = result.data.tools_get_xyxh_info.xyh


					this.data_result = result.data.tools_get_xyxh_info

				} else {
					uni.showToast({
						icon: "none",
						title: "请求异常",
					});
				}
				this.loading = false
			},
			genNumberStr(value) {
				var reds = [];
				for (let i = 0; i < value[0].length; i++) {
					var str = value[0][i] < 10 ? "0" + value[0][i] : value[0][i];
					reds.push(str)
				}
				const redBalls = reds.join(",");
				const blueBall = value[1][0] < 10 ? "0" + value[1][0] : value[1][0];
				var result = redBalls + "+" + blueBall;
				return result
			},
			joinNumberBook() {
				var temp_data = uni.getStorageSync("number_book")
				var list = []
				console.log(temp_data)
				if (temp_data.length > 0) {
					let temp_list = JSON.parse(temp_data)
					list.push(...temp_list)
				}

				var item = {
					typeName: this.typeName,
					qihao: this.data_result.issue,
					codes: this.codes
				}

				var param = list.some(function(value, index, list) {
					return JSON.stringify(value.codes) === JSON.stringify(item.codes)
				})
				if (!param) {
					list.push(item)
					let str = JSON.stringify(list)
					uni.setStorageSync("number_book", str)
					uni.showToast({
						title: "加入成功",
						icon: "none"
					});
				} else {
					uni.showToast({
						title: "已经加入过了",
						icon: "none"
					});
				}

			},
			copyNumber() {
				let value = JSON.stringify(this.codes)

				uni.setClipboardData({
					data: value,
					success: function() {
						uni.getClipboardData({
							success: function(res) {
								console.log(res.data);
								uni.showToast({
									title: "已复制到剪贴板",
									icon: "none"
								});
							},
						});
					},
				});

			}
		}
	}
</script>

<style>

	.title_bg {
		background-color: transparent;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 24rpx;
		padding-right: 24rpx;
		padding-bottom: 20rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}

	.cark_c {
		z-index: 2;
		border-radius: 10px;
		background-color: rgba(255, 246, 246, 1);
		text-align: center;
		padding: 30rpx;
		margin: 30rpx;
	}

	.cark_c_title {
		width: 100%;
		line-height: 20px;
		background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 197, 197, 0.56), rgba(255, 255, 255, 1));
		text-align: center;
		font-family: -apple-system;
		color: rgba(167, 79, 79, 1);
		font-size: 16px;
		margin-bottom: 30rpx;
		padding-top: 16rpx;
		padding-bottom: 16rpx;
		text-align: center;
	}

	.line-c {
		flex: 1;
		height: 2rpx;
		background-color: rgba(242, 191, 191, 1);
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.qihao-text {
		color: rgba(16, 16, 16, 1);
		font-size: 18px;
		text-align: left;
	}

	.number_c {
		flex: 1;
		height: 100rpx;
		margin-left: 32rpx;
		margin-right: 15rpx;
		border-radius: 100px;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(255, 51, 51, 1);
		font-size: 16px;
		text-align: center;
		line-height: 100rpx;
		font-family: -apple-system;
		border: 1px solid rgba(255, 155, 155, 1);
	}

	.select_code_c {
		flex: 1;
		margin-left: 15rpx;
		margin-right: 32rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 100px;
		align-items: center;
		background: linear-gradient(180deg, rgba(255, 233, 150, 1) 0%, rgba(255, 185, 14, 1) 100%);
		color: rgba(194, 33, 33, 1);
		font-size: 16px;
		text-align: center;
	}

	.btn-ll-c {
		margin-top: 40rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: center;
	}

	.xinyun_c {
		color: rgba(255, 51, 51, 1);
		font-size: 36px;
		text-align: center;
	}

	.title_samlge_c {
		color: #000000;
		font-size: 16px;
		text-align: left;
	}

	.content-text-c {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		left: 36px;
		color: #4D4040;
		font-size: 16px;
		text-align: justify;
	}

	.head-iv {
		flex-direction: column;
		background-image: url('../../static/bg2.jpg');
		background-size: 50% 100%;
		width: 100vh;
		height: 15vh;
		display: flex;
		background-color: transparent;
		background-repeat: no-repeat;
	}

	.warn_text {
		font-size: 24rpx;
		font-weight: 400;
		color: white;
		margin: 30rpx;
		padding-bottom: 200rpx;
	}
</style>