<template>
  <!-- <div class="task-detail">
    <div class="task-con">任务详情页</div>
    <div>
      <router-view></router-view>
    </div>
  </div> -->

  <a-config-provider :locale="locale">
    <a-layout>
      <a-layout-header style="background: #fff"> <TopNavbar /> </a-layout-header>
      <a-layout>
        <!--      日历页-->
        <a-layout-sider v-show="collapsed" style="background: #fff"><Left /></a-layout-sider>

        <a-layout>
          <Intro v-if="!projectId" />

          <a-layout-sider v-if="projectId" class="project-detail"><ProjectDetail /></a-layout-sider>

          <a-layout v-if="taskId">
            <!--        导航栏-->
            <a-layout-header style="background: #fff">
              <Navbar />
            </a-layout-header>
            <!--        内容区-->
            <a-layout-content><router-view></router-view></a-layout-content>
            <!--        脚部-->
            <!--        <a-layout-footer>Footer</a-layout-footer>-->
          </a-layout>
        </a-layout>
      </a-layout>
    </a-layout>
  </a-config-provider>
</template>

<script setup>
import { computed, watch, ref } from 'vue';
import { useStore } from 'vuex';
// import { useRoute, useRouter } from 'vue-router';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import Left from 'components/tall/left/Index.vue';
import Navbar from 'components/tall/top/Navbar.vue';
import TopNavbar from 'components/tall/top/TopNavbar.vue';
import ProjectDetail from 'components/tall/center/ProjectDetail.vue';
import Intro from 'components/tall/right/Intro.vue';

const locale = zhCN;
const store = useStore();
const collapsed = computed(() => store.state.layout.display.left); // 是否显示左栏

const projectId = ref(null);
const project = computed(() => store.state.projects.project); // 项目信息
const sessionProjectId = sessionStorage.getItem('projectId');
projectId.value = sessionProjectId;

const taskId = ref(null);
const sessionTaskId = sessionStorage.getItem('taskId');
taskId.value = sessionTaskId;
const taskDetail = computed(() => store.state.task.taskDetail); // 任务信息

// 监听项目信息
watch(project, () => {
  if (project.value) {
    projectId.value = project.value.id;
  } else {
    projectId.value = null;
  }
});

// 监听任务信息
watch(taskDetail, () => {
  if (taskDetail.value) {
    taskId.value = taskDetail.value.id;
  } else {
    taskId.value = null;
  }
});

// 验证 获取query中u参数 获取token
// const route = useRoute();
// const router = useRouter();
// const userString = sessionStorage.getItem('user');
</script>

<style scoped>
.ant-layout {
  width: 100%;
  height: 100%;
}

.ant-layout-header {
  height: 48px;
  line-height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid #cccccc;
}

.ant-layout-sider {
  width: 300px !important;
  max-width: 300px !important;
  min-width: 300px !important;
  border-right: 1px solid #cccccc;
  flex: 0 0 300px !important;
}

.project-detail {
  width: 400px !important;
  max-width: 400px !important;
  min-width: 400px !important;
  border-right: 1px solid #cccccc;
  flex: 0 0 400px !important;
  background: #fff;
}
</style>
