<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(() => store.state.userinfo)

	// 开启青少年模式
	function handleUpdate() {
		api.mine.adolescentOpen({}).then(rs => {
			if (rs.code == 200) {
				// 更新用户信息
				util.getUserinfo()
				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.teenTime">已开启青少年模式</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>