<template>
	<view class="flex flex-col h-full bg-gray-50" @click="openAuth">
		<view class="relative" @touchmove="onMove">
			<!-- 日历 -->
			<Calendar @selected-change="onDateChange" :show-back="true" ref="calendar" @handleFindPoint="handleFindPoint" />
			<!-- 上传 导入wbs -->
			<Upload @success="onUploadSuccess" @error="onUploadError" />
		</view>

		<!-- 项目列表 -->
		<Projects @getProjects="getProjects" class="flex-1 overflow-y-auto" />

		<!-- 全局提示框 -->
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script setup>
	import { ref, computed, watch } from 'vue';
	import store from '@/store/index.js';
	import dayjs from 'dayjs';
	import Calendar from '@/components/Calendar/Calendar.vue';
	import Upload from '@/components/Upload/Upload.vue';
	import Projects from '@/components/Projects/Projects.vue';

	const token = computed(() => store.state.user.token);
	
	watch(token, (value) => {
		if (!value) return;
		getProjects();
	})
	
	// 获取项目列表
	function getProjects(start = dayjs().startOf('day').valueOf(), end = dayjs().endOf('day').valueOf()) {
		// const data = await this.$u.api.getProjects(start, end);
		uni.$catchReq.getProjects(start, end, (err, data) => {
			if (err) {
				console.error('err: ', err);
			} else {
				data.forEach(item => {
					item.show = false;
				});
				store.commit('project/setProjects', data);
			}
		});
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
