<template>
  <view class="bg-gray-50">
    <view class="relative">
      <!-- 日历 -->
      <Calendar @selected-change="onDateChange" :show-back="true" :dot-list="days" />
      <!-- 上传 导入wbs -->
      <Upload @show-alert="onShowAlert" />
    </view>

    <!-- 项目列表 -->
    <Projects />

    <!-- 全局提示框 -->
    <u-alert-tips
      class="top-0 -inset-x-0"
      style="position: fixed !important"
      type="error"
      :close-able="true"
      :title="alert.title"
      :show="alert.show"
      :description="alert.description"
      @close="alert.show = false"
    ></u-alert-tips>
  </view>
</template>

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

export default {
  data() {
    return {
      days: [
        { date: '2020-08-14' },
        { date: '2020-08-27' },
        { date: '2020-08-09' },
        // {date: '2020-08-16'}
      ],
      alert: {
        show: false,
        title: '',
        description: '',
      },
    };
  },

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

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

  onShow() {
    console.log('index onShow');
    if (!this.token) return;
    this.getProjects();
  },

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

    // 获取项目列表
    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.log('error: ', error);
      }
    },

    changeList() {
      this.days = [{ date: '2021-08-03' }, { date: '2021-08-04' }, { date: '2021-08-06' }];
    },

    onDateChange(event) {
      console.log(event);
    },

    // 受到展示alert的消息
    onShowAlert(event) {
      this.alert.description = event || '发生了点小意外';
      this.alert.show = true;

      setTimeout(() => (this.alert.show = false), 10000);
    },
  },
};
</script>
