<template>
  <Calendar @changeTime="changeTime" />
  <Projects />
</template>

<script setup>
import { reactive } from 'vue';
import { useStore } from 'vuex';
import dayjs from 'dayjs';
import { getProjects } from 'apis';
import Calendar from './Calendar.vue';
import Projects from './Projects.vue';

const store = useStore();
const projects = reactive([]);

// 获取项目列表
const getProjectsList = async (startTime, endTime) => {
  try {
    const data = await getProjects(startTime, endTime);

    data.forEach(item => {
      item.show = false;
    });

    data.forEach(item => {
      item.show = false;

      if (item.sonsonProjectList) {
        item.sonsonProjectList.forEach(sonItem => {
          sonItem.show = false;
        });
      }

      projects.push(item);
    });

    store.commit('projects/setProjects', projects);
  } catch (error) {
    console.log(error);
  }
};

getProjectsList(dayjs().startOf('day').format('x'), dayjs().endOf('day').format('x'));

function changeTime(data) {
  getProjectsList(data.startTime, data.endTime);
}
</script>

<script>
export default { name: 'LeftIndex' };
</script>
