<template>
  <!-- 修复模板字符串语法（反引号需用 v-bind 或模板插值）+ 补充属性格式 -->
  <TypeLine
    scene="ht-tab"
    :title="t('htCard.title', { name: contractName })"
    :subtitle="t('htCard.subtitle', { id: contractId })"
    :meta-text="t('htCard.metaBudget', { amount: formatBudgetAmount(contractBudget) })"
    :copy-text="contractId"
    :storage-key="typeLineStorageKey"
    default-category="base-info"
    :categories="xmCategories"
  />
</template>

<script setup lang="ts">
import { computed, markRaw, defineAsyncComponent, defineComponent, h, onActivated, onBeforeUnmount, onMounted, ref, watch, type Component } from 'vue';
import { useI18n } from 'vue-i18n'
import TypeLine from '@/layout/typeLine.vue';
import { useZxFwPricingStore } from '@/pinia/zxFwPricing'
import { roundTo, sumNullableNumbers, toFiniteNumber } from '@/lib/decimal'
import { formatThousands } from '@/lib/numberFormat'
import {useDataStore} from '@/pinia/zx'

// 1. 完善 Props 类型 + 添加校验（可选但推荐）
const props = defineProps<{
  contractId: string; // 合同ID（必传）
  contractName: string; // 合同名称（必传）
  projectInfoKey?: string; // 工作区基础信息键
  projectScaleKey?: string | null; // 工作区规模信息键
  projectConsultCategoryFactorKey?: string; // 工作区咨询分类系数键
  projectMajorFactorKey?: string; // 工作区工程专业系数键
}>();
const { t } = useI18n()
const zxFwPricingStore = useZxFwPricingStore()

interface HtFeeMainRowLike {
  id?: unknown
}

interface RateMethodStateLike {
  budgetFee?: unknown
}

interface HourlyMethodRowLike {
  serviceBudget?: unknown
  adoptedBudgetUnitPrice?: unknown
  personnelCount?: unknown
  workdayCount?: unknown
}

interface HourlyMethodStateLike {
  detailRows?: HourlyMethodRowLike[]
}

interface QuantityMethodRowLike {
  id?: unknown
  budgetFee?: unknown
  quantity?: unknown
  unitPrice?: unknown
}

interface QuantityMethodStateLike {
  detailRows?: QuantityMethodRowLike[]
}

const contractBudget = ref<number | null>(null)
const typeLineStorageKey = computed(() => `project-active-cat-${props.contractId}`)
let budgetRefreshTimer: ReturnType<typeof setTimeout> | null = null

const formatBudgetAmount = (value: number | null | undefined) =>
  typeof value === 'number' && Number.isFinite(value)
    ? `${formatThousands(value, 2)} ${t('htCard.currencySuffix')}`
    : '--'

const sumHourlyMethodFee = (state: HourlyMethodStateLike | null): number | null => {
  const rows = Array.isArray(state?.detailRows) ? state.detailRows : []
  if (rows.length === 0) return null
  let hasValid = false
  let total = 0
  for (const row of rows) {
    const serviceBudget = toFiniteNumber(row?.serviceBudget)
    if (serviceBudget != null) {
      total += serviceBudget
      hasValid = true
      continue
    }
    const adopted = toFiniteNumber(row?.adoptedBudgetUnitPrice)
    const personnel = toFiniteNumber(row?.personnelCount)
    const workday = toFiniteNumber(row?.workdayCount)
    if (adopted == null || personnel == null || workday == null) continue
    total += adopted * personnel * workday
    hasValid = true
  }
  return hasValid ? roundTo(total, 2) : null
}

const sumQuantityMethodFee = (state: QuantityMethodStateLike | null): number | null => {
  const rows = Array.isArray(state?.detailRows) ? state.detailRows : []
  if (rows.length === 0) return null
  const subtotalRow = rows.find(row => String(row?.id || '') === 'fee-subtotal-fixed')
  const subtotal = toFiniteNumber(subtotalRow?.budgetFee)
  if (subtotal != null) return roundTo(subtotal, 2)
  let hasValid = false
  let total = 0
  for (const row of rows) {
    if (String(row?.id || '') === 'fee-subtotal-fixed') continue
    const budget = toFiniteNumber(row?.budgetFee)
    if (budget != null) {
      total += budget
      hasValid = true
      continue
    }
    const quantity = toFiniteNumber(row?.quantity)
    const unitPrice = toFiniteNumber(row?.unitPrice)
    if (quantity == null || unitPrice == null) continue
    total += quantity * unitPrice
    hasValid = true
  }
  return hasValid ? roundTo(total, 2) : null
}

const loadHtMethodTotalByRow = async (mainStorageKey: string, rowId: string) => {
  const [rateState, hourlyState, quantityState] = await Promise.all([
    zxFwPricingStore.loadHtFeeMethodState<RateMethodStateLike>(mainStorageKey, rowId, 'rate-fee'),
    zxFwPricingStore.loadHtFeeMethodState<HourlyMethodStateLike>(mainStorageKey, rowId, 'hourly-fee'),
    zxFwPricingStore.loadHtFeeMethodState<QuantityMethodStateLike>(mainStorageKey, rowId, 'quantity-unit-price-fee')
  ])
  const parts = [
    toFiniteNumber(rateState?.budgetFee),
    sumHourlyMethodFee(hourlyState),
    sumQuantityMethodFee(quantityState)
  ]
  const total = sumNullableNumbers(parts)
  return total == null ? null : roundTo(total, 2)
}

const loadHtMainTotalFee = async (mainStorageKey: string) => {
  const mainState = await zxFwPricingStore.loadHtFeeMainState<HtFeeMainRowLike>(mainStorageKey)
  const rows = Array.isArray(mainState?.detailRows) ? mainState.detailRows : []
  const rowIds = rows.map(row => String(row?.id || '').trim()).filter(Boolean)
  if (rowIds.length === 0) return null
  const rowTotals = await Promise.all(rowIds.map(rowId => loadHtMethodTotalByRow(mainStorageKey, rowId)))
  const total = sumNullableNumbers(rowTotals)
  return total == null ? null : roundTo(total, 2)
}

const refreshContractBudget = async () => {
  await zxFwPricingStore.loadContract(props.contractId)
  const serviceFee = zxFwPricingStore.getBaseSubtotal(props.contractId)
  const [additionalFee, reserveFee] = await Promise.all([
    loadHtMainTotalFee(`htExtraFee-${props.contractId}-additional-work`),
    loadHtMainTotalFee(`htExtraFee-${props.contractId}-reserve`)
  ])
  const parts = [serviceFee, additionalFee, reserveFee]
  const total = sumNullableNumbers(parts)

  const zxRows = await useDataStore().query([
    { field: 'type', value: `${props.contractId}-zxFw`, operator: 'eq' }
  ])
  const totalFinalFee = zxRows.reduce((sum, row) => {
    return sum + (Number(row.finalFee) || 0)
  }, 0)

  contractBudget.value = totalFinalFee == null ? null : roundTo(totalFinalFee, 2)
}

const budgetRefreshSignature = computed(() => {
  const additionalMainKey = `htExtraFee-${props.contractId}-additional-work`
  const reserveMainKey = `htExtraFee-${props.contractId}-reserve`
  return JSON.stringify({
    contractState: zxFwPricingStore.contracts[props.contractId] || null,
    addMain: zxFwPricingStore.htFeeMainStates[additionalMainKey] || null,
    reserveMain: zxFwPricingStore.htFeeMainStates[reserveMainKey] || null,
    addMethods: zxFwPricingStore.htFeeMethodStates[additionalMainKey] || null,
    reserveMethods: zxFwPricingStore.htFeeMethodStates[reserveMainKey] || null
  })
})

const scheduleRefreshContractBudget = () => {
  if (budgetRefreshTimer) clearTimeout(budgetRefreshTimer)
  budgetRefreshTimer = setTimeout(() => {
    void refreshContractBudget()
  }, 80)
}

// 2. 定义分类项的 TS 类型（核心：明确 categories 结构）
interface XmCategoryItem {
  key:
    | 'info'
    | 'base-info'
    | 'consult-category-factor'
    | 'major-factor'
    | 'work-grid'
    | 'contract'
    | 'additional-work-fee'
    | 'reserve-fee'
    | 'all';
  label: string;
  component: Component; // 标记为 Vue 组件类型
}

// 3. 优化异步组件导入（添加加载失败兜底 + 类型标注）
const htView = markRaw(
  defineComponent({
    name: 'HtInfoWithProps',
    setup() {
      const AsyncHtInfo = defineAsyncComponent({
        loader: () => import('@/features/ht/components/htInfo.vue'),
        onError: (err) => {
          console.error('加载 htInfo 组件失败：', err);
        }
      });
      return () => h(AsyncHtInfo, {
        contractId: props.contractId,
        projectScaleKey: props.projectScaleKey,
        projectInfoKey: props.projectInfoKey
      });
    }
  })
);

const zxfwView = markRaw(
  defineComponent({
    name: 'ZxFwWithProps',
    setup() {
      const AsyncZxFw = defineAsyncComponent({
        loader: () => import('@/features/ht/components/zxFw.vue'),
        onError: (err) => {
          console.error('加载 zxFw 组件失败：', err);
        }
      });
      return () => h(AsyncZxFw, {
        contractId: props.contractId,
        contractName: props.contractName,
        projectInfoKey: props.projectInfoKey
      });
    }
  })
);

const consultCategoryFactorView = markRaw(
  defineComponent({
    name: 'HtConsultCategoryFactorWithProps',
    setup() {
      const AsyncHtConsultCategoryFactor = defineAsyncComponent({
        loader: () => import('@/features/ht/components/HtConsultCategoryFactor.vue'),
        onError: (err) => {
          console.error('加载 HtConsultCategoryFactor 组件失败：', err);
        }
      });
      return () => h(AsyncHtConsultCategoryFactor, {
        contractId: props.contractId,
        projectInfoKey: props.projectInfoKey,
        parentStorageKey: props.projectConsultCategoryFactorKey
      });
    }
  })
);

const majorFactorView = markRaw(
  defineComponent({
    name: 'HtMajorFactorWithProps',
    setup() {
      const AsyncHtMajorFactor = defineAsyncComponent({
        loader: () => import('@/features/ht/components/HtMajorFactor.vue'),
        onError: (err) => {
          console.error('加载 HtMajorFactor 组件失败：', err);
        }
      });
      return () => h(AsyncHtMajorFactor, {
        contractId: props.contractId,
        projectInfoKey: props.projectInfoKey,
        parentStorageKey: props.projectMajorFactorKey
      });
    }
  })
);



const htBaseInfoView = markRaw(
  defineComponent({
    name: 'HtBaseInfoWithProps',
    setup() {
      const AsyncHtBaseInfo = defineAsyncComponent({
        loader: () => import('@/features/ht/components/HtBaseInfo.vue'),
        onError: (err) => {
          console.error('加载 HtBaseInfo 组件失败：', err)
        }
      })
      return () => h(AsyncHtBaseInfo, { contractId: props.contractId })
    }
  })
)

const additionalWorkFeeView = markRaw(
  defineComponent({
    name: 'HtAdditionalWorkFeeWithProps',
    setup() {
      const AsyncHtAdditionalWorkFee = defineAsyncComponent({
        loader: () => import('@/features/ht/components/HtAdditionalWorkFee.vue'),
        onError: (err) => {
          console.error('加载 HtAdditionalWorkFee 组件失败：', err);
        }
      });
      return () => h(AsyncHtAdditionalWorkFee, { contractId: props.contractId, contractName: props.contractName });
    }
  })
);

const reserveFeeView = markRaw(
  defineComponent({
    name: 'HtReserveFeeWithProps',
    setup() {
      const AsyncHtReserveFee = defineAsyncComponent({
        loader: () => import('@/features/ht/components/HtReserveFee.vue'),
        onError: (err) => {
          console.error('加载 HtReserveFee 组件失败：', err);
        }
      });
      return () => h(AsyncHtReserveFee, { contractId: props.contractId, contractName: props.contractName });
    }
  })
);

const summaryView = markRaw(
  defineComponent({
    name: 'HtContractSummaryWithProps',
    setup() {
      const AsyncSummary = defineAsyncComponent({
        loader: () => import('@/features/ht/components/HtContractSummary.vue'),
        onError: (err) => {
          console.error('加载 HtContractSummary 组件失败：', err)
        }
      })
      return () => h(AsyncSummary, { contractId: props.contractId })
    }
  })
)

// 4. 给分类数组添加严格类型标注
const xmCategories = computed<XmCategoryItem[]>(() => [
  { key: 'base-info', label: t('htCard.categories.baseInfo'), component: htBaseInfoView },
  { key: 'info', label: t('htCard.categories.scaleInfo'), component: htView },
  { key: 'contract', label: t('htCard.categories.services'), component: zxfwView },
  // { key: 'consult-category-factor', label: t('htCard.categories.consultFactor'), component: consultCategoryFactorView },
  // { key: 'major-factor', label: t('htCard.categories.majorFactor'), component: majorFactorView },
  // { key: 'additional-work-fee', label: t('htCard.categories.additionalFee'), component: additionalWorkFeeView },
  // { key: 'reserve-fee', label: t('htCard.categories.reserveFee'), component: reserveFeeView },
  // { key: 'all', label: t('htCard.categories.summary'), component: summaryView },
]);

watch(budgetRefreshSignature, (next, prev) => {
  if (next === prev) return
  scheduleRefreshContractBudget()
})

onMounted(() => {
  void refreshContractBudget()
})

onActivated(() => {
  void refreshContractBudget()
})

onBeforeUnmount(() => {
  if (budgetRefreshTimer) clearTimeout(budgetRefreshTimer)
})
</script>

