<template>
  <OutcomeList
    v-show="!outcomeId"
    :task-id="taskId"
    :draft="draft"
    :account-list="accountList"
  />
  <OutcomeDetail v-if="outcomeId" :outcome-id="outcomeId" :draft="draft" />
</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 OutcomeList from './outcome/list.vue'
import OutcomeDetail from './outcome/detail.vue'

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

// 监听子组件
useEmitt({
  name: 'redirectOutcomeDetailPage',
  callback: (id: string) => {
    outcomeId.value = id
  }
})
// 监听子组件
useEmitt({
  name: 'redirectOutcomeListPage',
  callback: () => {
    outcomeId.value = undefined
  }
})

listenerRouteChange(async (r: RouteLocationNormalized) => {
  const id = r.query?.outcome_id // id
  if (id) {
    outcomeId.value = id
  }
})
</script>

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

<style scoped lang="less"></style>
