<template>
	<view>
		<uni-popup ref="popup" style="z-index: 9999;" type="center" :is-mask-click="false">
			<view style="width: 750rpx;">
				<view class="unlock-group">
					<view class="unlock-bck">
						<view class="unlock-content">
							<view class="unlock-logo">
								<image style="height: 130px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/松鼠ip.png" mode="heightFix"></image>
							</view>
							<view class="unlock-title">
								<view class="">
									解锁金币
								</view>
								<view class="">
									金币名称：{{coinInfo.name}}
								</view>
								<view class="">
									金币编号：{{coinInfo.id}}
								</view>
							</view>
							<view class="unlock-center">
								<view class="unlock-img">
									<image class="left-star1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/left-star1.png"
										mode="widthFix"></image>
									<image class="left-star2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/left-star2.png"
										mode="widthFix"></image>
								</view>
								<view class="unlock-img"
									style="display: flex;align-items: center;justify-content: center;flex: none;">
									<image class="center-bck" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/center-bck.png"
										mode="widthFix"></image>
									<image class="rectagle1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/rectagle1.png"
										mode="widthFix"></image>
									<image class="rectagle2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/rectagle2.png"
										mode="heightFix"></image>
									<image class="rectagle3" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/rectagle3.png"
										mode="heightFix"></image>
									<image class="center-star" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/center-star.png"
										mode="widthFix"></image>
									<image class="center-icon" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/unlockgold/centerimg.png"
										mode="widthFix"></image>
								</view>
								<view class="unlock-img">
									<image class="right-star1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/right-star1.png"
										mode="widthFix"></image>
									<image class="right-star2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/right-star2.png"
										mode="widthFix"></image>
								</view>
							</view>

							<view class="unlock-price">
								<view class="price-item">
									<view class="hint-bck">
										328橡果解锁一次
									</view>
								</view>
								<view class="price-item">
									<view class="hint-bck">
										新用户首次免费
									</view>
								</view>
								<view class="price-item">
									<view class="price-bck">
										<view class="logo-bck">
											<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/logo-balance.png" mode="widthFix">
											</image>
										</view>
										{{userInfo.amount}}
									</view>
								</view>
							</view>

							<view class="unlock-btn">
								<view class="btn-item" style="justify-content: flex-end;">
									<view @click="cancelUnlock" class="btn1">
										再想想
									</view>
								</view>
								<view class="btn-item">
									<view @click="doUnlock" class="btn2">
										<text>确认解锁</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	const app = getApp()
	import { ref, defineExpose, getCurrentInstance } from 'vue'
	const {proxy} = getCurrentInstance()
	const popup = ref() // ref组件
	
	const coinInfo = ref({}) // 硬币详情
	const userInfo = ref({}) // 用户详情
	
	// 执行解锁踪迹
	const doUnlock = () => {
		uni.showModal({
			title: '确认解锁此硬币吗？',
			success: function (res) {
				if (res.confirm) {
					uni.showLoading({
						title: '正在解锁'
					})
					uni.request({
						url: app.globalData.requestUrl + '/api/user/coin/gold/save',
						header: {
							'Authorization': 'Bearer ' + app.globalData.token
						},
						method: 'POST',
						success: (res) => {
							if (res.data.code === 200) {
								console.log(res.data)
								// 更改本地余额
								uni.request({
									url: app.globalData.requestUrl + '/api/user',
									header: {
										'Authorization': 'Bearer ' + app.globalData.token
									},
									success: (resuser) => {
										app.globalData.userinfo = resuser.data.data
										app.globalData.isReloadMarkers = true
										uni.hideLoading()
										uni.showToast({
											title: '消除金币成功',
											icon: 'none'
										})
										cancelUnlock()
									}
								})
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
							}
						}
					})
				}
			}
		})
	}

	const cancelUnlock = () => {
		proxy.$emit('close')
		popup.value.close()
	}
	const open = (coin) => {
		if (JSON.stringify(coinInfo.value) !== JSON.stringify(coin)) {
			userInfo.value = app.globalData.userinfo
			coinInfo.value = coin
		}
		
		popup.value.open()
	}
	defineExpose({
		open
	}) // 暴露方法
</script>

<style scoped>
	.unlock-group {
		padding: 25px;
	}

	.unlock-bck {
		padding: 3px;
		border-radius: 15px;
		background: rgba(232, 232, 232, 0.5);
		border: 2px solid rgba(169, 169, 169, 0.5);
	}

	.unlock-content {
		border-radius: 15px;
		padding: 25px;
		background: linear-gradient(180deg, #C2FF8F 0%, #08FFB9 100%);
	}

	.unlock-logo {
		display: flex;
		position: absolute;
		top: -101px;
		left: 0;
		width: 100%;
		justify-content: center;
	}
	
	.unlock-title view:first-child {
			text-decoration: underline;
			font-size: 18px;
			padding-bottom: 5px;
		}
	.unlock-title view:last-child {
			font-size: 10px;
			font-weight: 400;
		}
	.unlock-title {
		padding: 0 15px 10px 15px;
		display: flex;
		font-size: 12px;
		font-weight: 700;
		flex-direction: column;
		align-items: center;
	}
	
	.left-star1 {
		width: 22px;
		float: right;
		right: 0;
		top: -10px;
	}
		
	.left-star2 {
		float: right;
		width: 10px;
		top: 70px;
	}
		
	.center-bck {
		width: 100px;
		z-index: 2;
	}
		
	.rectagle1 {
		width: 47px;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}
		
	.rectagle2 {
		height: 50px;
		position: absolute;
		left: 49px;
		top: 0;
		z-index: 1;
	}
		
	.rectagle3 {
		height: 30px;
		position: absolute;
		top: 20px;
		right: 0;
		z-index: 1;
	}
		
	.center-star {
		width: 125px;
		position: absolute;
		z-index: 2;
		background: url(https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/unlockgold/cenger-right-img.png) no-repeat;
		background-size: 28px;
		background-position: right 20px bottom 20px;
	}
		
	.center-icon {
		width: 80px;
		height: auto;
		position: absolute;
		z-index: 3;
	}
		
	.right-star1 {
		width: 36px;
		position: absolute;
		left: 0px;
		top: -18px;
	}
		
	.right-star2 {
		width: 12px;
		left: 30px;
		top: 35px;
	}
	.unlock-img {
		flex: 1;
		position: relative;
	}
	.unlock-center {
		display: flex;
		padding: 0 15px 5px 15px;
	}
	.hint-bck {
		background: rgba(255, 255, 255, .8);
		border-radius: 15px;
		padding: 4px 15px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		font-weight: 400;
	}
	.price-bck image {
			width: 18px;
		}
	.logo-bck {
		height: 26px;
		width: 26px;
		background: #FFCC18;
		border-radius: 13px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 8px;
	}
	.price-bck {
		height: 26px;
		background: rgba(255, 255, 255, .8);
		border-radius: 13px;
		display: flex;
		align-items: center;
		padding-right: 12px;
		font-size: 12px;
		font-weight: 700;
	}
	.price-item {
		flex: 1;
		display: flex;
		padding-top: 5px;
		justify-content: center;
	}
	.unlock-price {
		display: flex;
		flex-direction: column;
		padding: 5px 25px;
	}
	.btn-item view {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10px 0;
			border-radius: 30px;
			width: 100px;
		}
	.btn1 {
		background: rgba(255, 255, 255, .8);
	}
	.btn2 text {
			background: linear-gradient(90deg, #BFFF90 0%, #26FFB3 100%);
			color: transparent;
			-webkit-background-clip: text;
		}
	.btn2 {
		background: #000000;
	}
	.btn-item {
		display: flex;
		align-items: center;
		font-size: 14px;
		font-weight: bold;
		flex: 1;
		padding: 10px 10px 0 10px;
	}
	.unlock-btn {
		display: flex;
	}
</style>