<script setup lang="ts">
import chargeList from '../../components/charge-orderList/charge-orderList.vue'
import xsbList from '../../components/xsb-orderList/xsb-orderList.vue'
import filmList from '../../components/film-orderList/film-orderList.vue'
import videoRightsList from '../../components/videoRights-orderList/videoRights-orderList.vue'

interface Props {
  orderList: Api.xsbOrderList[]
  navActiveTab: string
  subPackOrder: any
  subPackConfirm: any
}

defineProps<Props>()

defineEmits<{
  'cancel': [order: Api.xsbOrderList]
  'pay': [orderNumber: string]
  'submit': [order: Api.xsbOrderList]
  'del': [order: Api.xsbOrderList]
  'after-sale': [item: Api.xsbOrderList]
  'refresh': []
}>()

const subPackFilmOrder = ref<typeof import('@/subPack-film/utils/order-data')>()
const subPackFilmComfirm = ref<typeof import('@/subPack-film/utils/confirm-order')>()

onMounted(async () => {
  subPackFilmOrder.value = await AsyncImport('@/subPack-film/utils/order-data')
  subPackFilmComfirm.value = await AsyncImport('@/subPack-film/utils/confirm-order')
})
</script>

<template>
  <template v-if="navActiveTab === 'all'">
    <template v-for="order in orderList" :key="order.orderNumber">
      <xsbList
        v-if="order.businessType === 'XSB'" :order-list="[order]" :sub-pack-order="subPackOrder"
        :sub-pack-confirm="subPackConfirm" @cancel="$emit('cancel', $event)" @pay="$emit('pay', $event)"
        @submit="$emit('submit', $event)" @del="$emit('del', $event)" @after-sale="$emit('after-sale', $event)"
        @refresh="$emit('refresh')"
      />
      <chargeList v-else-if="order.businessType === 'CD'" :order-list="[order]" />
      <filmList
        v-else-if="order.businessType === 'DYY'" :order-list="[order]" :sub-pack-order="subPackFilmOrder"
        :sub-pack-confirm="subPackFilmComfirm" @cancel="$emit('cancel', $event)" @pay="$emit('pay', $event)"
        @submit="$emit('submit', $event)" @del="$emit('del', $event)" @after-sale="$emit('after-sale', $event)"
        @refresh="$emit('refresh')"
      />
      <videoRightsList v-else-if="order.businessType === 'XNSP'" :order-list="[order]" />
    </template>
  </template>
  <xsbList
    v-else-if="navActiveTab === 'XSB'" :order-list="orderList" :sub-pack-order="subPackOrder"
    :sub-pack-confirm="subPackConfirm" @cancel="$emit('cancel', $event)" @pay="$emit('pay', $event)"
    @submit="$emit('submit', $event)" @del="$emit('del', $event)" @after-sale="$emit('after-sale', $event)"
    @refresh="$emit('refresh')"
  />
  <chargeList v-else-if="navActiveTab === 'CD'" :order-list="orderList" />
  <filmList
    v-else-if="navActiveTab === 'DYY'" :order-list="orderList" :sub-pack-order="subPackFilmOrder"
    :sub-pack-confirm="subPackFilmComfirm" @cancel="$emit('cancel', $event)" @pay="$emit('pay', $event)"
    @submit="$emit('submit', $event)" @del="$emit('del', $event)" @after-sale="$emit('after-sale', $event)"
    @refresh="$emit('refresh')"
  />
  <videoRightsList v-else-if="navActiveTab === 'XNSP'" :order-list="orderList" />
</template>
