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

    <u-button class="mt-4" @click="toLogin">登录</u-button>
    <!-- 项目列表 -->
    <Projects @getProjects="getProjects" class="flex-1 overflow-y-auto" />

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

<script setup>
  import { reactive, computed, watchEffect, ref } from 'vue';
  import { useStore } from 'vuex';
  import dayjs from 'dayjs';

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

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

  getProjects();
  handleFindPoint();

  // 监听token
  // watchEffect(() => {
  //   if (!token.value) return;
  //   if (token.value) {
  //     getProjects();
  //     handleFindPoint();
  //   }
  // });

  // 获取项目列表
  function getProjects(start = dayjs().startOf('day').valueOf(), end = dayjs().endOf('day').valueOf()) {
    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);
      }
    });
  }

  async function handleFindPoint(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);
    }
  }

  // 点击了某个日期
  const onDateChange = event => {
    const day = dayjs(event.fullDate);
    const start = day.startOf('date').valueOf();
    const end = day.endOf('date').valueOf();
    getProjects(start, end);
  };

  // 导入成功
  const onUploadSuccess = () => {
    uni.$ui.showToast('导入成功，即将打开新项目', 3000);
    // uTips.show({
    //   title: '导入成功，即将打开新项目',
    //   type: 'success',
    //   duration: '3000',
    // });
  };

  // 导入失败
  const onUploadError = error => {
    uni.$ui.showToast('导入失败', 6000);
    // uTips.show({
    //   title: error || '导入失败',
    //   type: 'error',
    //   duration: '6000',
    // });
  };

  // 监听触摸滑动 切换日历的模式 月/周
  // function onMove(event) {
  //   const y = event.changedTouches[0].pageY;
  //   const prevY = 0;
  //   if (y - prevY > 0) {
  //     // 向下滑动 如果是周视图weekMode=true 就 变成 月视图weekMode=false
  //     data.calendar.weekMode && (data.calendar.weekMode = false);
  //   } else if (y - prevY < 0) {
  //     // 向上滑动 如果是月视图weekMode=false 就变成 周视图weekMode=true
  //     !data.calendar.weekMode && (data.calendar.weekMode = true);
  //   }
  //   prevY = y;
  //   data.calendar.initDate();
  // }

  function toLogin() {
    uni.navigateTo({
      url: '/pages/user/login'
    })
  }
</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>
