<template>
	<view>
		<uni-popup ref="popup" style="z-index: 9999;" type="center">
			<view style="width: 750rpx;">
				<view class="unlock-group">
					<view class="unlock-bck">
						<view class="unlock-content">
							<view class="unlock-close">
								<image @click="close" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/close.png" mode="widthFix">
								</image>
							</view>
							<view style="font-weight: bold;text-align: center;">抖音转发内容并截图</view>
							<view style="font-size: 14px;color: #515151;text-align: center;padding-top: 10px;">
								后台审核完毕可获得橡果
							</view>
							<view v-if="imgUrl" class="img-show">
								<image :src="imgUrl" mode="aspectFill"></image>
							</view>
							<view style="padding-top: 15px;">
								<block v-if="isDone">
									<view style="text-align: center;font-size: 13px;color: #717171;padding: 5px 0 0 0;">
										已上传，审核完毕将自动获得橡果
									</view>
								</block>
								<block v-else>
									<button v-if="!imgUrl" @click="checkImage" class="btn-done">上传截图</button>
									<block v-else>
										<button @click="save" class="btn-done">确认上传</button>
										<view @click="checkImage" style="text-align: center;font-size: 13px;color: #717171;padding: 5px 0 0 0;">
											重新选择
										</view>
									</block>
								</block>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	const app = getApp()
	import { ref, defineExpose, getCurrentInstance } from 'vue'
	import touchPopup from '@/components/touch-popup/touch-popup'
	const popup = ref() // ref组件
	const { proxy } = getCurrentInstance()
	
	const taskid = ref(-1)
	
	const imgUrl = ref('')
	const isDone = ref(false)
	
	const save = () => {
		uni.request({
			url: app.globalData.requestUrl + '/api/user/task/save',
			data: {
				id: taskid.value,
				content: imgUrl.value
			},
			method: 'POST',
			header: {
				'Authorization': 'Bearer ' + app.globalData.token
			},
			success(res) {
				console.log(res.data)
				if (res.data.code === 200) {
					isDone.value = true
				}
			}
		})
	}
	const checkImage = () => {
		uni.chooseImage({
			count: 1,
			success(res) {
				console.log(res)
				uni.uploadFile({
					url: app.globalData.requestUrl + '/api/file/upload',
					filePath: res.tempFilePaths[0],
					file: res.tempFiles[0],
					name: 'file',
					success(res2) {
						let data = JSON.parse(res2.data)
						if (data.code === 200) {
							imgUrl.value = data.data[0]
						}
					},
					fail(err) {
						console.log('err', err)
					}
				})
			},
			fail(err) {
				console.log(err)
			}
		})
	}
	// 关闭解锁踪迹弹窗
	const close = () => {
		proxy.$emit('close', {})
		popup.value.close()
	}
	const open = (id) => {
		taskid.value = id
		popup.value.open()
	}
	
	defineExpose({
		open
	}) // 暴露方法
</script>

<style scoped>
	.unlock-close image {
		width: 20px;
	}
	
	.unlock-close {
		display: flex;
		float: right;
		right: 0;
	}
	.img-show image {
		width: 120px;
		height: 120px;
		border-radius: 5px;
	}
	.img-show {
		padding: 10px;
		display: flex;
		justify-content: center;
		border-radius: 5px;
	}
	.btn-done {
		background-color: #000;
		font-size: 14px;
		border-radius: 20px;
		color: #01F0FD;
		font-weight: bold;
		width: 200px;
	}
	.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%);
	}
</style>