<template>
  <!-- 修复模板字符串语法（反引号需用 v-bind 或模板插值）+ 补充属性格式 -->
  <TypeLine
    scene="ht-tab"
    :title="`合同段：${contractName}`"
    :subtitle="`合同段ID：${contractId}`"
    :meta-text="`合同段预算金额：${formatBudgetAmount(contractBudget)}`"
    :copy-text="contractId"
    :storage-key="`project-active-cat-${contractId}`"
    default-category="info"
    :categories="xmCategories"
  />
</template>

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

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

const toFiniteNumber = (value: unknown): number | null => {
  if (value == null || value === '') return null
  const num = Number(value)
  return Number.isFinite(num) ? num : null
}

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

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 validParts = parts.filter((item): item is number => typeof item === 'number' && Number.isFinite(item))
  if (validParts.length === 0) return null
  return roundTo(validParts.reduce((sum, value) => sum + value, 0), 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 validTotals = rowTotals.filter((item): item is number => typeof item === 'number' && Number.isFinite(item))
  if (validTotals.length === 0) return null
  return roundTo(validTotals.reduce((sum, value) => sum + value, 0), 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 validParts = parts.filter((item): item is number => typeof item === 'number' && Number.isFinite(item))
  contractBudget.value = validParts.length === 0 ? null : roundTo(validParts.reduce((sum, value) => sum + value, 0), 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('@/components/ht/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('@/components/ht/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('@/components/ht/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('@/components/ht/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('@/components/ht/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('@/components/ht/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('@/components/ht/HtReserveFee.vue'),
        onError: (err) => {
          console.error('加载 HtReserveFee 组件失败：', err);
        }
      });
      return () => h(AsyncHtReserveFee, { contractId: props.contractId, contractName: props.contractName });
    }
  })
);

// 4. 给分类数组添加严格类型标注
const xmCategories: XmCategoryItem[] = [
    { key: 'base-info', label: '基础信息', component: htBaseInfoView },
  { key: 'info', label: '规模信息', component: htView },
  { key: 'consult-category-factor', label: '咨询分类系数', component: consultCategoryFactorView },
  { key: 'major-factor', label: '工程专业系数', component: majorFactorView },
  { key: 'contract', label: '咨询服务', component: zxfwView },
  { key: 'additional-work-fee', label: '附加工作费', component: additionalWorkFeeView },
  { key: 'reserve-fee', label: '预备费', component: reserveFeeView },
  { key: 'all', label: '汇总', component: reserveFeeView },


];

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

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

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

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

