<template>
  <ReportDetail
    v-if="operateItem === OperateItem.DETAIL"
    :report-id="reportId"
    :container-height="containerHeight"
    :prj-id="prjId"
  />
  <ReportList
    v-if="operateItem === OperateItem.LIST"
    :prj-list="prjList"
    :container-height="containerHeight"
    :account-list="accountList"
    :prj-id="prjId"
  />
  <ReportAdd
    v-if="operateItem === OperateItem.ADD"
    :prj-id="prjId"
    :container-height="containerHeight"
  ></ReportAdd>
</template>

<script lang="ts" setup>
import { PropType, ref } from 'vue'
import { useEmitt } from '@/logics/mitt/useEmitt'
import { OperateItem } from '@/enums/api'
import { RouteLocationNormalized } from 'vue-router'
import { listenerRouteChange } from '@/logics/mitt/routeChange'
import ReportList from './report/list.vue'
import ReportAdd from './report/add.vue'
import ReportDetail from './report/detail.vue'

const operateItem = ref<OperateItem>(OperateItem.LIST)
const reportId = ref()

const props = defineProps({
  prjId: {
    type: String
  },
  accountList: {
    type: Array as PropType<{ id: string; name: string }[]>,
    required: true
  },
  prjList: {
    type: Array as PropType<{ id: string; name: string }[]>
  },
  containerHeight: {
    type: String
  }
})
console.log(props.prjList)
// 监听子组件
useEmitt({
  name: 'redirectReportDetailPage',
  callback: (id: string) => {
    reportId.value = id
    operateItem.value = OperateItem.DETAIL
  }
})

// 监听子组件
useEmitt({
  name: 'redirectReportListPage',
  callback: () => {
    reportId.value = undefined
    operateItem.value = OperateItem.LIST
  }
})

// 监听子组件
useEmitt({
  name: 'redirectReportAddPage',
  callback: () => {
    reportId.value = undefined
    operateItem.value = OperateItem.ADD
  }
})

listenerRouteChange(async (r: RouteLocationNormalized) => {
  const id = r.query?.report_id // id
  if (id) {
    reportId.value = id
    operateItem.value = OperateItem.DETAIL
  }
})
</script>
