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

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

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

<script>
import { mapState, mapMutations } from 'vuex';

let prevY = 0;

export default {
  data() {
    return {
      calendar: null,
      days: [],
    };
  },

  computed: mapState('user', ['token']),

  watch: {
    token(value) {
      if (!value) return;
      this.getProjects();
      this.handleFindPoint();
    },
  },

  onShow() {
    if (!this.token) return;
    this.getProjects();
    this.handleFindPoint();
  },

  onPageScroll(res) {
    // console.log('页面滚动了', res.scrollTop);
    if (res.scrollTop > 0) {
      this.setWeekMode(true);
    } else {
      this.setWeekMode(false);
    }
  },

  onReady() {
    this.calendar = this.$refs.calendar;
  },

  methods: {
    ...mapMutations('project', ['setProjects', 'setDotList', 'setWeekMode']),

    // 获取项目列表
    async getProjects(start = this.$moment().startOf('day').valueOf(), end = this.$moment().endOf('day').valueOf()) {
      try {
        const data = await this.$u.api.getProjects(start, end);
        this.setProjects(data);
      } catch (error) {
        console.error('error: ', error);
      }
    },

    /**
     * 查询小红点
     * @param { string } endTime 结束时间
     * @param { string } startTime 开始时间
     */
    async handleFindPoint(start = this.$moment().startOf('month').valueOf(), end = this.$moment().endOf('month').valueOf()) {
      try {
        const data = await this.$u.api.findRedPoint(start, end);
        this.setDotList(data);
      } catch (error) {
        console.log('error: ', error);
      }
    },

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

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

    // 导入成功
    onUploadSuccess() {
      this.$refs.uTips.show({
        title: '导入成功，即将打开新项目',
        type: 'success',
        duration: '3000',
      });
    },

    // 导入失败
    onUploadError(error) {
      this.$refs.uTips.show({
        title: error || '导入失败',
        type: 'error',
        duration: '6000',
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  overflow: hidden;
}
</style>
