<template>
  <TaskList v-show="!taskId" :prj-id="prjId" :account-list="accountList" />
  <TaskDetail
    v-if="taskId"
    :task-id="taskId"
    :draft="draft"
    :account-list="accountList"
  />
</template>

<script lang="ts" setup>
import { PropType, ref } from 'vue'
import { useEmitt } from '@/logics/mitt/useEmitt'
import { RouteLocationNormalized } from 'vue-router'
import { listenerRouteChange } from '@/logics/mitt/routeChange'
import TaskList from './task/list.vue'
import TaskDetail from './task/detail.vue'

const taskId = ref()
const draft = ref(false)
defineProps({
  prjId: {
    type: String,
    required: true
  },
  accountList: {
    type: Array as PropType<{ id: string; name: string }[]>,
    required: true
  }
})

// 监听子组件
useEmitt({
  name: 'redirectTaskDetailPage',
  callback: (list: { id: string; draft: boolean }) => {
    taskId.value = list.id
    draft.value = list.draft
  }
})
// 监听子组件
useEmitt({
  name: 'redirectTaskListPage',
  callback: () => {
    taskId.value = undefined
  }
})

// 监听子组件增加，修改，删除事件，更新列表
// useEmitt({
//   name: 'get_task_list',
//   callback: () => {
//     console.log('task')
//   }
// })

listenerRouteChange(async (r: RouteLocationNormalized) => {
  const id = r.query?.task_id // id
  // const isDraft = r.query?.draft // id
  if (id) {
    taskId.value = id
  }
})
</script>

<script lang="ts">
export default {
  name: 'ProjectPlan'
}
</script>
