<script setup>
	/**
	 * 优先任务 和 有效读秒
	 */
	import {
		ref,
		computed,
		onMounted,
	} from 'vue'
	// 工具库
	import util from '@/common/js/util.js'
	import {
		useStore,
	} from 'vuex'
	// 
	import api from '@/api/index.js'
	const store = useStore()
	// 当前任务
	const task = computed(() => {
		return store.state.task
	})
	// 进度条
	const progress = computed(() => {
		let result = task.value.viewingDuration
		result = (Number(result) % 300) / 3
		return result
	})

	onMounted(() => {
		// 获取我的任务
		util.getMyTask()
	})
</script>

<template>
	<view class="task pr mtb30 ptb20 plr40 f28 bFFFBF3 br20">
		<view class="title c333 f36" v-if="task === 0">任务读秒</view>
		<view class="title c333 f36" v-else>有效读秒</view>
		<view>{{task.viewingDuration}}</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="task === 0">优先</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>