<template>
  <TypeLine
    scene="ht-fee-method-type-line"
    :title="titleText"
    :subtitle="t('htFeeMethodTypeLine.contractId', { id: contractIdText })"
    :copy-text="contractIdText"
    :storage-key="activeTypeStorageKey"
    default-category="rate-fee"
    :categories="categories"
  />
</template>

<script setup lang="ts">
import { computed, defineComponent, h, markRaw, defineAsyncComponent, type Component } from 'vue'
import { useI18n } from 'vue-i18n'
import TypeLine from '@/layout/typeLine.vue'
import HtFeeGrid from '@/features/shared/components/HtFeeGrid.vue'
import HtFeeRateMethodForm from '@/features/ht/components/HtFeeRateMethodForm.vue'
import HourlyFeeGrid from '@/features/shared/components/HourlyFeeGrid.vue'

interface TypeLineCategoryItem {
  key: string
  label: string
  component: Component
}

const props = defineProps<{
  sourceTitle?: string
  storageKey: string
  rowId: string | number
  rowName?: string
  contractId?: string
  contractName?: string
}>()
const { t } = useI18n()
const sourceTitleText = computed(() => props.sourceTitle || t('htFeeMethodTypeLine.feeDetail'))
const rowNameText = computed(() => props.rowName || t('htFeeMethodTypeLine.unnamed'))
const rowIdText = computed(() => String(props.rowId || '').trim())
const contractIdText = computed(() => String(props.contractId || '').trim())
const contractNameText = computed(() => String(props.contractName || '').trim() || contractIdText.value || '-')
const titleText = computed(() => t('htFeeMethodTypeLine.title', {
  contractName: contractNameText.value,
  rowName: rowNameText.value || sourceTitleText.value
}))
const activeTypeStorageKey = computed(() => `ht-fee-type-active-cat-${props.storageKey}-${rowIdText.value}`)
const buildMethodStorageKey = (method: 'rate-fee' | 'hourly-fee' | 'quantity-unit-price-fee') =>
  `${props.storageKey}-${rowIdText.value}-${method}`

const quantityUnitPricePane = markRaw(
  defineComponent({
    name: 'HtFeeGrid',
    setup() {
      const quantityStorageKey = computed(() => buildMethodStorageKey('quantity-unit-price-fee'))
      return () =>
        h(HtFeeGrid, {
          title: t('htFeeMethodTypeLine.quantityUnitPrice'),
          storageKey: quantityStorageKey.value,
          htMainStorageKey: props.storageKey,
          htRowId: rowIdText.value,
          htMethodType: 'quantity-unit-price-fee'
        })
    }
  })
)

const rateFeePane = markRaw(
  defineComponent({
    name: 'HtFeeMethodTypePane-rate-fee',
    setup() {
      const rateStorageKey = computed(() => buildMethodStorageKey('rate-fee'))
      return () =>
        h(HtFeeRateMethodForm, {
          storageKey: rateStorageKey.value,
          contractId: props.contractId,
          htMainStorageKey: props.storageKey,
          htRowId: rowIdText.value,
          htMethodType: 'rate-fee'
        })
    }
  })
)

const hourlyFeePane = markRaw(
  defineComponent({
    name: 'HtFeeMethodTypePane-hourly-fee',
    setup() {
      const hourlyStorageKey = computed(() => buildMethodStorageKey('hourly-fee'))
      return () =>
        h(HourlyFeeGrid, {
          title: t('hourlyFeeGrid.title'),
          storageKey: hourlyStorageKey.value,
          htMainStorageKey: props.storageKey,
          htRowId: rowIdText.value,
          htMethodType: 'hourly-fee'
        })
    }
  })
)

const isReserveFee = computed(() => props.sourceTitle === t('htSummary.reservePrefix'))
const showWorkContent = computed(() => {
  if (isReserveFee.value) return false
  return true
})

const workContentPane = markRaw(
  defineComponent({
    name: 'WorkContentPane',
    setup() {
      const AsyncWorkContentGrid = defineAsyncComponent({
        loader: () => import('@/features/shared/components/WorkContentGrid.vue'),
        onError: err => {
          console.error('加载 WorkContentGrid 组件失败：', err)
        }
      })
      return () => h(AsyncWorkContentGrid, {
        title: t('workContent.title'),
        storageKey: `work-content-${props.storageKey}-${rowIdText.value}`,
        dictMode: 'additional' 
      })
    }
  })
)

const categories = computed<TypeLineCategoryItem[]>(() => {
  const base: TypeLineCategoryItem[] = [
    { key: 'rate-fee', label: t('htFeeGrid.columns.rateFee'), component: rateFeePane },
    { key: 'hourly-fee', label: t('htFeeGrid.columns.hourlyFee'), component: hourlyFeePane },
    { key: 'quantity-unit-price-fee', label: t('htFeeGrid.columns.quantityUnitPriceFee'), component: quantityUnitPricePane },
  ]
  if (showWorkContent.value) {
    base.push({ key: 'work-content', label: t('workContent.title'), component: workContentPane })
  }
  return base
})
</script>
