<template>
	<view>
		<touch-popup @close="close" ref="popup" background="transparent">
			<view class="tabbar">
				<view class="top-icon">
					<view class="icon-item">
						<image v-if="curIndex === 1" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/touch-close-white.png" mode="heightFix"></image>
					</view>
					<view class="icon-item">
						<image v-if="curIndex === 2" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/touch-close-white.png" mode="heightFix"></image>
					</view>
				</view>
				<view :class="leftClassBck">
					<view :class="leftClassObject" @click="switchTab(1)">
						<image :src="tabbarIcon1" mode="widthFix"></image>
						<text :class="{ colorWhite: curIndex == 2 }">悬赏</text>
					</view>
				</view>
				<view :class="rightClassBck">
					<view :class="rightClassObject" @click="switchTab(2)">
						<image :src="tabbarIcon2" mode="widthFix"></image>
						<text :class="{ colorWhite: curIndex == 1 }">赏金任务</text>
					</view>
				</view>
			</view>
			<scroll-view class="list" :style="listClassObject" scroll-y>
				<view v-if="curIndex == 1" v-for="(item, index) in task1List" key="taskTask1" class="item-group">
					<view class="item itemA">
						<view style="display: flex;">
							<view class="item-left">
								<image :src="'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/tmp/star.png'" mode="widthFix"></image>
							</view>
							<view class="item-center">
								<view class="">
									{{item.content}}
								</view>
								<view class="">
									任务奖励：{{item.award_number}}
								</view>
							</view>
							<view class="item-right">
								<view v-if="item.user_number < item.number">
									<text>{{item.user_number}}</text>/{{item.number}}
								</view>
								<view v-else>
									<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/tmp/done.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
						<view v-if="item.action === 1 && item.user_number < item.number" style="padding-top: 20px;display: flex;">
							<!-- #ifdef H5 -->
							<button @click="goAction(item.action, item.id)" class="btn-done"><text>去完成</text></button>
							<!-- #endif -->
							<!-- #ifdef MP-WEIXIN -->
							<button @click="goAction(item.action, item.id)" open-type="share" class="btn-done"><text>去完成</text></button>
							<!-- #endif -->
						</view>
						<view v-if="item.action === 2 && item.user_task_status !== 1" style="padding-top: 20px;display: flex;flex-direction: column;">
							<button v-if="item.user_task_status === 0 && item.user_number < item.number" @click="goAction(item.action, item.id)" class="btn-done">
								<text>去完成</text>
							</button>
							<block v-else>
								<button v-if="item.user_task_status === 0" class="btn-done"><text>正在审核</text></button>
								<button v-else-if="item.user_task_status === 2" @click="goAction(item.action, item.id)" class="btn-done"><text>重新上传</text></button>
								<view style="text-align: center;font-size: 12px;color: #717171;padding-top: 5px;">
									{{item.user_task_status === 0 ? '审核通过将自动获得橡果' : '很抱歉，审核未通过，请重新上传转发证明'}}
								</view>
							</block>
						</view>
						<view v-if="item.action === 3 && item.user_number < item.number" style="padding-top: 20px;display: flex;flex-direction: column;">
							<!-- #ifdef H5 -->
							<view v-if="proxy.$wx && app.isWechat()" class="opentag" v-html="wxOpenTags"></view>
							<view v-else style="font-size: 12px;text-align: center;">
								微信搜索“宝藏猎人QuXun”，打开小程序观看视频广告
							</view>
							<!-- #endif -->
							<!-- #ifdef MP-WEIXIN -->
							<button @click="createVideoAd" class="btn-done"><text>观看视频</text></button>
							<!-- #endif -->
						</view>
					</view>
				</view>
				<view v-else v-for="(item, index) in task2List" key="taskTask2" class="item-group">
					<view class="item itemB">
						<view style="display: flex;">
							<view style="flex: 1;">
								<view class="item-top">
									{{item.name}}：
								</view>
								<view class="item-bottom">
									<view class="item-center">
										<view class="">
											{{item.content}}
										</view>
										<view class="">
											任务奖励：{{item.award_number}}
										</view>
									</view>
								</view>
							</view>
							<view style="display: flex;">
								<view class="item-right">
									<image v-if="item.user_number >= item.number" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/tmp/done.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
						<view v-if="item.user_number < item.number" style="padding-top: 20px;display: flex;">
							<button @click="goTask2(item)" class="btn-done"><text>去完成</text></button>
						</view>
					</view>
				</view>
			</scroll-view>
				
		</touch-popup>
		<!-- #ifdef MP-WEIXIN -->
		<uni-popup ref="poster">
			<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
				<image :src="curPosterUrl" show-menu-by-longpress style="width: 600rpx;border-radius: 10px;" mode="widthFix"></image>
				<image @click="posterClose" style="width: 24px;padding-top: 15px;" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/trace/close.png" mode="widthFix"></image>
			</view>
		</uni-popup>
		<!-- #endif -->
		<popup-uptaskimg ref="pUptaskimg" @close="uptaskimgClose"></popup-uptaskimg>
	</view>
</template>

<script setup>
	const app = getApp()
	import { ref, defineExpose, computed, onMounted, getCurrentInstance } from 'vue'
	import touchPopup from '@/components/touch-popup/touch-popup'
	const popup = ref() // ref组件
	const pUptaskimg = ref() // ref组件
	const {proxy} = getCurrentInstance()
	
	// #ifdef H5
	const wxOpenTags = ref('')
	// #endif
	
	const curIndex = ref(1) // 1悬赏 2赏金任务
	const task1List = ref(false)
	const task2List = ref(false)
	
	// #ifdef MP-WEIXIN
	const poster = ref()
	const curPosterUrl = ref('')
	const posterClose = () => {
		poster.value.close()
	}
	let rewardedVideoAd = null
	onMounted(() => {
		if(wx.createRewardedVideoAd){
			rewardedVideoAd = wx.createRewardedVideoAd({ adUnitId: 'xxxx' })
			rewardedVideoAd.onLoad(() => {
				console.log('onLoad event emit')
			})
			rewardedVideoAd.onError((err) => {
				console.log('onError event emit', err)
			})
			rewardedVideoAd.onClose((res) => {
				console.log('onClose event emit', res)
			})
		} else {
			console.log('没有广告组件')
		}
	})
	const createVideoAd = () => {
		uni.showToast({
			title: '正在观看视频',
			icon: 'loading'
		})
	}
	// #endif
	
	// #ifdef H5
	var opend = false
	const wxopeninit = () => {
		if (!proxy.$wx || !app.isWechat() || opend) return
		wxOpenTags.value = `
			<wx-open-launch-weapp
				id="launch-weapp"
				path="pages/game/game"
				env-version="trial"
				appid="wx60d549932b7d4267"
				style="width: 200px;height: 43px;display: flex;"
				>
				<template>
					<style>
						.wxbtn span {
							background: linear-gradient(180deg, #01F0FD 0%, #17FFA7 100%);
							color: transparent;
							-webkit-background-clip: text;
						}
						.wxbtn {
							background-color: #000;
							font-size: 14px;
							border-radius: 20px;
							font-weight: 700;
							line-height: 21px;
							width: 200px;
							height: 43px;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					</style>
					<div class="wxbtn"><span>前往小程序看视频</span></div>
				</template>  
			</wx-open-launch-weapp>`
		opend = true
	}
	// #endif
	const goTask2 = (item) => {
		// #ifdef H5
		location.href = item.platform_data.link_h5 // 直接跳转
		// #endif
		// #ifdef MP-WEIXIN
		curPosterUrl.value = item.platform_data.poster_link
		poster.value.open()
		// #endif
	}
	const goAction = (action, id) => {
		if (action === 1) {
			// #ifdef H5
			uni.showToast({
				title: '请点击右上角分享',
				icon: 'none'
			})
			// #endif
			// #ifdef MP-WEIXIN
			uni.request({
				url: app.globalData.requestUrl + '/api/user/task/save',
				data: {
					id: id
				},
				method: 'POST',
				header: {
					'Authorization': 'Bearer ' + app.globalData.token
				},
				success(res) {
					console.log(res.data)
					loadData(1)
				}
			})
			// #endif
		} else {
			// 弹出上传图片的窗口
			pUptaskimg.value.open(id)
		}
	}
	/* 方法 */
	const loadData = (type) => {
		uni.showLoading()
		uni.request({
			url: app.globalData.requestUrl + '/api/task/list',
			data: {
				type: type
			},
			header: {
				'Authorization': 'Bearer ' + app.globalData.token
			},
			success(res) {
				console.log(res.data)
				if (type === 1) {
					task1List.value = res.data.data
				} else {
					task2List.value = res.data.data
				}
			},
			complete() {
				uni.hideLoading()
			}
			
		})
	}
	
	/* 一系列的计算属性 */
	const leftClassBck = computed(() => {
		return ['flex1', curIndex.value === 1 ? 'bck-black' : 'bck-top-color2']
	})
	const rightClassBck = computed(() => {
		return ['flex1', curIndex.value === 1 ? 'bck-top-color1' : 'bck-black']
	})
	const leftClassObject = computed(() => {
		const classArr = ['top-menu']
		if (curIndex.value === 1) {
			classArr.push('radius-t-r')
			classArr.push('bck-top-color1')
		} else {
			classArr.push('radius-b-r')
			classArr.push('bck-black')
		}
		return classArr
	})
	const rightClassObject = computed(() => {
		const classArr = ['top-menu']
		if (curIndex.value === 1) {
			classArr.push('radius-b-l')
			classArr.push('bck-black')
		} else {
			classArr.push('radius-t-l')
			classArr.push('bck-top-color2')
		}
		return classArr
	})
	const tabbarIcon1 = computed(() => {
		if (curIndex.value === 1) {
			return 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/task-top-left-black.png'
		} else {
			return 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/task-top-left-white.png'
		}
	})
	const tabbarIcon2 = computed(() => {
		if (curIndex.value === 2) {
			return 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/task-top-right-black.png'
		} else {
			return 'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/task-top-right-white.png'
		}
	})
	const listClassObject = computed(() => {
		return {
			background: curIndex.value === 1 ? 'linear-gradient(#acf393, #11ffb7)' : 'linear-gradient(#f9c87c, #e5f499)'
		}
	})
	
	/* 方法 */
	const switchTab = (i) => {
		app.playAudio() // 点击音效
		console.log(i, curIndex.value)
		if (i === curIndex.value) return
		curIndex.value = i
		if (!task2List.value) loadData(2)
	}
	const uptaskimgClose = () => {
		loadData(1)
	}
	const open = () => {
		popup.value.open()
		if (!task1List.value) loadData(1)
		// #ifdef H5
		wxopeninit()
		// #endif
	}
	const close = () => {
		proxy.$emit('close')
	}
	
	defineExpose({
		open
	}) // 暴露方法
</script>

<style scoped>
	.opentag {
		width: 100%;
		display: flex;
		justify-content: center;
		height: 43px;
	}
	.item-group {
		padding: 0 15px 15px 15px;
	}
	.list .item-group:first-child {
		padding-top: 15px;
	}
	.list .item-group:last-child {
		padding-bottom: calc(constant(safe-area-inset-bottom) + 15px);
		padding-bottom: calc(env(safe-area-inset-bottom) + 15px);
	}
	.btn-done text {
		background: linear-gradient(180deg, #01F0FD 0%, #17FFA7 100%);
		color: transparent;
		-webkit-background-clip: text;
	}
	.btn-done {
		background-color: #000;
		font-size: 14px;
		border-radius: 20px;
		font-weight: 700;
		line-height: 21px;
		width: 200px;
		height: 43px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.list {
		height: calc(100% - 62px);
	}
	.list .item {
		background: #F5F5F5CC;
		border-radius: 15px;
		display: flex;
		padding: 25px 15px;
		flex-direction: column;
		
	}
	.list .itemA {
		/* flex-direction: column; */
	}
	.list .itemB {
		padding: 15px;
	}
	.list .item-top {
		font-weight: bold;
	}
	.list .itemB .item-bottom {
		display: flex;
	}
	.list .itemB .item-bottom .item-center {
		padding: 0;
	}
	.list .itemB .item-bottom .item-center > view:first-child {
		padding: 5px 0;
		font-family: Noto Sans S Chinese;
		font-size: 14px;
		font-weight: 400;
		line-height: 21px;

	}
	
	.list .item .item-left {
		display: flex;
		align-items: center;
	}
	.list .item .item-left image {
		width: 30px;
		height: auto;
	}
	.list .item .item-center {
		display: flex;
		flex: 1;
		flex-direction: column;
		padding: 0 10px;
		font-family: Noto Sans S Chinese;
		font-size: 12px;
		font-weight: 350;
		line-height: 18px;
		text-align: left;

	}
	.list .item .item-center > view:first-child {
		font-family: Noto Sans S Chinese;
		font-size: 16px;
		font-weight: 700;
		line-height: 24px;
	}
	.list .item .item-right {
		display: flex;
		align-items: center;
		font-family: Noto Sans S Chinese;
		font-size: 14px;
		font-weight: 700;
		line-height: 21px;
		text-align: center;
	}
	.list .item .item-right image {
		width: 22px;
		height: auto;
	}
	.list .item .item-right text {
		color: #0057ff;

	}
	
	
	.top-icon {
		display: flex;
		align-items: center;
		position: absolute;
		width: 100%;
		padding: 6px 0;
	}
	.icon-item image {
		height: 7px !important;
	}
	.icon-item {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
	}
	
	
	.tabbar {
		display: flex;
	}
	.left-bck {
		flex: 1;
		background-color: #000;
	}
	.flex1 {
		flex: 1;
	}
	.top-menu {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20px;
		font-family: Noto Sans S Chinese;
		font-size: 18px;
		font-weight: 500;
		line-height: 27px;
		text-align: center;

	}
	.radius-t-r {
		border-top-right-radius: 15px;
	}
	.radius-t-l {
		border-top-left-radius: 15px;
	}
	.radius-b-r {
		border-bottom-right-radius: 15px;
	}
	.radius-b-l {
		border-bottom-left-radius: 15px;
	}
	.colorWhite {
		color: #fff;
	}
	.tabbar image{
		width: 23px;
		height: auto;
	}
	.bck-black {
		background-color: #000;
	}
	.bck-top-color1 {
		background: linear-gradient(#c1fe8e, #acf393); /* 绿色 */
	}
	.bck-top-color2 {
		background: linear-gradient(#fac479, #f9c87c); /* 橙色 */
	}
	.bck-content-color1 {
		background: linear-gradient(#acf393, #11ffb7); /* 绿色内容 */
	}
	.bck-content-color2 {
		background: linear-gradient(#f9c87c, #e5f499); /* 橙色内容 */
	}
</style>