<script setup>
	/**
	 * 优先任务 和 有效读秒
	 */
	import {
		ref,
		computed,
		onMounted,
	} from 'vue'
	// 工具库
	import util from '@/common/js/util.js'
	import {
		useStore,
	} from 'vuex'
	import intergralApi from '@/api/intergral.js';
	// vuex
	const store = useStore()
	//读秒记录
	const viewData = ref({
		// 有效读秒任务
		seconds: 0,
		// 卷轴任务
		scrollFlag: false,
		// 榴莲果树任务
		treeFlag: false,
	})
	// 类型
	const type = computed(() => {
		let result = viewData.value.scrollFlag || viewData.value.treeFlag
		if (result && Number(viewData.value.seconds) > 300) result = false
		return result
	})
	// 进度条
	const progress = computed(() => {
		let result = viewData.value.seconds
		result = (Number(result) % 300) / 300 * 100
		return result
	})

	onMounted(() => {
		util.isLogin(() => {
			getTasks()
		})
	})

	// 今日任务读秒记录
	function getTasks() {
		intergralApi.viewingTasks({}).then(rs => {
			if (rs.code == 200 && rs.data) {
				viewData.value = rs.data
				return
			}
		})
	}
</script>

<template>
	<view class="task pr mtb30 ptb20 plr40 f28 bFFFBF3 br20">
		<view class="title c333 f36" v-if="type">任务读秒</view>
		<view class="title c333 f36" v-else>有效读秒</view>

		<view class="progressBox oh bar mt60">
			<view class="progress bar" :style="{width: progress + '%'}"></view>
		</view>

		<view class="label pa t0 r0 ptb5 plr20 cfff" v-if="type">优先</view>
	</view>
</template>

<style lang="scss" scoped>
	// 任务读秒
	.task {
		.label {
			background-image: linear-gradient(116deg, #27EFE2 0%, #A45EFF 43%, #FF004F 100%);
			border-radius: 0 24rpx 0 24rpx;
		}

		// 进度条
		.progressBox {
			// background-color: #D6D6D6;
			background-image: linear-gradient(97deg, #27EFE244 0%, #A45EFF44 43%, #FF004F44 100%);

			.progress {
				height: 30rpx;
				background-image: linear-gradient(97deg, #27EFE2 0%, #A45EFF 43%, #FF004F 100%);
			}
		}
	}
</style>