<script setup lang="ts">
import { runLogic } from '@af-mobile-client-vue3/services/api/common'
import { Loading as VanLoading } from 'vant'
import { ref, watch } from 'vue'

import AddUserDetail from './operateRecordDetails/AddUserDetail.vue'
import AdvanceDeliveryDetail from './operateRecordDetails/AdvanceDeliveryDetail.vue'
import AutoAccountsCancelDetail from './operateRecordDetails/AutoAccountsCancelDetail.vue'
import AutoAccountsDetail from './operateRecordDetails/AutoAccountsDetail.vue'
import BankDkDetail from './operateRecordDetails/BankDkDetail.vue'
import BankPayDetail from './operateRecordDetails/BankPayDetail.vue'
import BlacklistDetail from './operateRecordDetails/BlacklistDetail.vue'
import CancellationDetail from './operateRecordDetails/CancellationDetail.vue'
import CardMeterCenterCancelDetail from './operateRecordDetails/CardMeterCenterCancelDetail.vue'
import CardMeterCenterDetail from './operateRecordDetails/CardMeterCenterDetail.vue'
import CardOverUserDetail from './operateRecordDetails/CardOverUserDetail.vue'
import ChangeMeterCancelDetail from './operateRecordDetails/ChangeMeterCancelDetail.vue'
import ChangeMeterDetail from './operateRecordDetails/ChangeMeterDetail.vue'
import DisableManageDetail from './operateRecordDetails/DisableManageDetail.vue'
import EnableManageDetail from './operateRecordDetails/EnableManageDetail.vue'
import FaZheChangeDetail from './operateRecordDetails/FaZheChangeDetail.vue'
import FeeDeductionDetail from './operateRecordDetails/FeeDeductionDetail.vue'
import GasPriceChangeDetail from './operateRecordDetails/GasPriceChangeDetail.vue'
import InputtorChangeDetail from './operateRecordDetails/InputtorChangeDetail.vue'
import IotMeterCenterCancelDetail from './operateRecordDetails/IotMeterCenterCancelDetail.vue'
import IotMeterCenterDetail from './operateRecordDetails/IotMeterCenterDetail.vue'
import IotOpenDetail from './operateRecordDetails/IotOpenDetail.vue'
import MachineCardDetail from './operateRecordDetails/MachineCardDetail.vue'
import MachineMeterCenterCancelDetail from './operateRecordDetails/MachineMeterCenterCancelDetail.vue'
import MachineMeterCenterDetail from './operateRecordDetails/MachineMeterCenterDetail.vue'
import OffGasAddGasDetail from './operateRecordDetails/OffGasAddGasDetail.vue'
import OtherChargeCancelDetail from './operateRecordDetails/OtherChargeCancelDetail.vue'
import OtherChargeDetail from './operateRecordDetails/OtherChargeDetail.vue'
import OverUserChangeDetail from './operateRecordDetails/OverUserChangeDetail.vue'
import ReBillDetail from './operateRecordDetails/ReBillDetail.vue'
import RefundDetail from './operateRecordDetails/RefundDetail.vue'
import ReplaceCardManageCancelDetail from './operateRecordDetails/ReplaceCardManageCancelDetail.vue'
import ReplaceCardManageDetail from './operateRecordDetails/ReplaceCardManageDetail.vue'
import SaleCardGasDetail from './operateRecordDetails/SaleCardGasDetail.vue'
import TransferManageDetail from './operateRecordDetails/TransferManageDetail.vue'
import UserChangeDetail from './operateRecordDetails/UserChangeDetail.vue'
import WechatPayDetail from './operateRecordDetails/WechatPayDetail.vue'

interface Props {
  expandedId: string | null // 列表项数据
  idKey?: string // 当前展开的ID
  item: Record<string, any> // ID的键名
}

// 定义组件属性
const props = withDefaults(defineProps<Props>(), {
  idKey: 'info_id',
})

// 加载状态
const loading = ref(false)
// 错误状态
const error = ref(null)
const detailData = ref({})
const currentDetailComponent = ref(null)
console.log(props.item)

// 监听展开状态变化
watch(() => props.expandedId, async (newVal) => {
  if (newVal === props.item[props.idKey]) {
    console.log('展开项的类型:', props.item.info_f_operat_type)
    // 当前项被展开，获取详情数据
    if (await getCurrentDetailComponent() !== null) {
      await fetchDetailData()
      currentDetailComponent.value = await getCurrentDetailComponent()
      console.log('获取到的详情数据:', detailData.value)
      console.log('当前渲染组件:', currentDetailComponent.value)
      console.log('完整的props.item:', props.item)
    }
    else {
      currentDetailComponent.value = null
    }
  }
  else {
    // 当前项被收起，清空数据
    detailData.value = null
    currentDetailComponent.value = null
  }
})

// 使用computed获取对应的组件
async function getCurrentDetailComponent() {
  const type = props.item.info_f_operat_type

  switch (type) {
    // 基础操作
    case '发卡售气':
    case '换表发卡':
      return SaleCardGasDetail
    case '卡表收费':
      return CardMeterCenterDetail
    case '机表收费':
      return MachineMeterCenterDetail
    case '自动下账':
      return AutoAccountsDetail
    case '银行代扣':
      return BankDkDetail
    case '银行支付':
      return BankPayDetail
    case '微信支付':
      return WechatPayDetail
    case '停用':
      return DisableManageDetail
    case '启用':
      return EnableManageDetail
    case '补卡':
      return ReplaceCardManageDetail
    case '机表补卡':
      return MachineCardDetail
    case '过户':
      return TransferManageDetail
    case '其他收费':
      return OtherChargeDetail
    case '抄表员变更':
      return InputtorChangeDetail
    case '换表补气':
    case '其他补气':
    case '清零补气':
    case '掉气补气':
      return OffGasAddGasDetail
    case '开通':
      return IotOpenDetail
    case '物联网收费':
    case '物联网开户':
    case '调价退费':
    case '调价补费':
      return IotMeterCenterDetail
    case '超用收费':
      return OverUserChangeDetail
    case '新增户档案':
      return AddUserDetail
    case '气价变更':
      return GasPriceChangeDetail
    case '档案变更':
    case '表记变更':
    case '修改表计信息':
    case '手动同步开户':
    case '自动同步开户':
    case '批量导入开户':
    case '档案完善开户':
    case '新增户档案开户':
    case '新增用户档案开户':
      return UserChangeDetail
    case '换表':
    case '换控制器':
    case '换新表':
    case '气表清零':
    case '气表升级':
    case '换主板':
    case '换基表':
      return ChangeMeterDetail
    case '卡表超用':
      return CardOverUserDetail
    case '销户':
      return CancellationDetail
    case '退费':
      return RefundDetail

    // 撤销类操作
    case '换表撤销':
    case '换控制器撤销':
    case '换新表撤销':
    case '气表清零撤销':
    case '气表升级撤销':
    case '换主板撤销':
    case '换基表撤销':
      return ChangeMeterCancelDetail
    case '自动下账撤销':
      return AutoAccountsCancelDetail
    case '卡表收费撤销':
      return CardMeterCenterCancelDetail
    case '机表收费撤销':
      return MachineMeterCenterCancelDetail
    case '其他收费撤销':
      return OtherChargeCancelDetail
    case '补卡撤销':
      return ReplaceCardManageCancelDetail
    case '物联网收费撤销':
      return IotMeterCenterCancelDetail

    // 特殊操作
    case '补费':
    case '扣费':
    case '补气':
    case '扣气':
      return FeeDeductionDetail
    case '拉黑':
    case '取消拉黑':
      return BlacklistDetail
    case '卡表预交':
      return AdvanceDeliveryDetail
    case '补换折':
    case '发折':
      return FaZheChangeDetail
    case '补打票据':
    case '补打折子':
      return ReBillDetail
    default:
      return null
  }
}

// 获取详情数据
async function fetchDetailData() {
  loading.value = true
  error.value = null
  try {
    const params = {
      type: props.item.info_f_operat_type,
      id: props.item.info_id,
      f_userinfo_id: props.item.info_f_userinfo_id,
    }
    console.log('开始获取详情数据，参数:', params)
    const result = await runLogic('mobile_getBusinessDataDetail', params, 'af-revenue')
    console.log('获取详情数据成功:', result)
    detailData.value = result
  }
  catch (err) {
    console.error('获取详情数据失败:', err)
    error.value = err
    detailData.value = null
  }
  finally {
    loading.value = false
  }
}
</script>

<template>
  <div v-if="expandedId === item[idKey]" class="expanded-detail">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-state">
      <VanLoading type="spinner" />
      <span>加载中...</span>
    </div>

    <!-- 错误状态 -->
    <div v-else-if="error" class="error-state">
      <span>{{ error.msg || '数据加载失败' }}</span>
    </div>

    <!-- 动态组件渲染 -->
    <component
      :is="currentDetailComponent"
      v-else-if="currentDetailComponent"
      :data="detailData"
    />

    <div v-else class="error-state">
      <span>暂无对应的详情组件</span>
    </div>
  </div>
</template>

<style scoped lang="less">
.expanded-detail {
  padding: 8px;
  background-color: var(--van-background);
  margin-top: 8px;
  border-radius: var(--van-radius-md);
  border: 1px solid var(--van-border-color);
  animation: expand 0.3s ease-out;

  .loading-state,
  .error-state {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-size: var(--van-font-size-sm);

    .van-loading {
      margin-right: 8px;
    }
  }

  .detail-content {
    h4 {
      margin: 0 0 8px;
      color: var(--van-text-color);
      font-size: var(--van-font-size-md);
    }

    p {
      margin: 0 0 12px;
      color: var(--van-text-color-2);
      font-size: var(--van-font-size-sm);
    }

    pre {
      margin: 0;
      padding: 12px;
      background-color: var(--van-background-2);
      border-radius: var(--van-radius-sm);
      font-size: var(--van-font-size-sm);
      overflow-x: auto;
    }
  }
}

@keyframes expand {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
