<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 { reactive, ref, onMounted, computed, watch } from 'vue';
import { useStore } from 'vuex';
import dayjs from 'dayjs';

const data = reactive({
  calendar: null,
  days: [],
});

const height = ref(null);
const store = useStore();
const token = computed(() => store.state.user.token);

onMounted(() => {
  const system = uni.getSystemInfoSync();
  height.value = `${system.windowHeight}px`;
});

const handleFindPoint = async (start, end) => {
  try {
    const startTime = start
      || dayjs()
        .startOf('month')
        .valueOf();
    const endTime = end
      || dayjs()
        .endOf('month')
        .valueOf();
    const res = await uni.$u.api.findRedPoint(startTime, endTime);
    store.commit('project/setDotList', res);
  } catch (error) {
    console.log('error: ', error);
  }
};

// 监听token
watch(
  () => token.value,
  newValue => {
    if (!newValue) return;
    if (newValue) {
      handleFindPoint();
    }
  },
  { immediate: true },
);

</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>
