<script setup>
	// 工具库
	import util from '@/common/js/util.js'
	// 
	import api from '@/api/index.js'
	import {
		useStore
	} from 'vuex'
	import {
		computed
	} from 'vue';
	// vuex
	const store = useStore()
	// 用户信息
	const userinfo = computed(() => {
		let result = store.state.userinfo
		return result
	})

	// 开启青少年模式
	function handleUpdate() {
		api.mine.updateUserInfo({
			data: {
				youth: 1,
			}
		}).then(rs => {
			if (rs.code == 200) {
				// 设置闹铃
				setAlarm()
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 设置时间
	function setAlarm() {
		// 当前时间+40分钟
		let endTime = new Date().getTime()
		// 
		endTime = util.strtotime('+40 minute', endTime)
		// 
		const maxDateTime = new Date().setHours(20, 0, 0).valueOf()
		// console.log(new Date(endTime).valueOf(), maxDateTime)
		endTime = util.formatTime('yyyy-MM-dd HH:mm:ss', Math.min(new Date(endTime).valueOf(), maxDateTime))

		// 40分之后的
		api.video.setAlarm({
			query: {
				// 
				endTime,
				// 1倒计时闹钟 2时间闹钟 3青少年闹钟
				type: 3,
			}
		}).then(rs => {
			if (rs.code == 200) {
				util.alert('设置成功')
				// 设置
				util.setAlarm({
					"userId": userinfo.value.userId,
					"endTime": endTime,
					"type": 3
				})
				return
			}

			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}
</script>

<template>
	<view class="app">
		<view class="container pr">
			<image class="background" src="/static/teen.png" mode="widthFix" />
			<!-- <view class="">青少年模式说明</view> -->

			<view class="notice pa c333 f28">
				<view class="mtb30">开启青少年模式后，将自动为您开启时间锁，单日使用时间不超过40分钟，晚上10点至早上6点无法使用九亿</view>
				<view class="mtb30">青少年模式开启后，如果到了使用时间需要输入密码解锁关闭青少年模式</view>
			</view>
		</view>

		<view class="btn pro black mtb30 mlr60" v-if="userinfo.youth == 1">已开启青少年模式</view>
		<view class="btn pro black mtb30 mlr60" v-else @click="handleUpdate">开启青少年模式</view>

		<view class="fill" style="height: 30rpx;"></view>
	</view>
</template>

<style lang="scss">
	.app {
		background-color: #eaceb9;
	}

	// 
	.background {
		width: 100%;
	}

	// 提示
	.notice {
		margin: 0 120rpx;
		bottom: 120rpx;
	}
</style>