<template>
  <div class="p-4">
    <!-- 页面标题和按钮 -->
    <div class="flex justify-between items-center mb-4">
      <div class="flex items-center gap-2">
        <el-button icon="ArrowLeft" @click="router.back()">返回</el-button>
        <span class="text-lg font-medium">客户详情</span>
      </div>
    </div>

    <!-- 菜单导航 -->
    <el-card shadow="never" class="mb-4">
      <el-menu :default-active="activeMenu" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="baseInfo">基本信息</el-menu-item>
        <el-menu-item index="orgStructure">企业组织结构</el-menu-item>
        <el-menu-item index="contactInfo">联系人信息</el-menu-item>
        <el-menu-item index="shippingAddress">收货地址</el-menu-item>
        <el-menu-item index="contractManagement">合同管理</el-menu-item>
        <el-menu-item index="procurementProfile">采购画像</el-menu-item>
        <el-menu-item index="operationLog">日志管理</el-menu-item>
      </el-menu>
      <!-- 动态组件显示区域 -->
      <component :is="currentComponent" :customer-id="customerId" :customer-no="customerNo" :customer-name="customerName" />
    </el-card>
  </div>
</template>

<script setup lang="ts" name="CustomerInfoEdit">
const route = useRoute();
const router = useRouter();

const activeMenu = ref('baseInfo');
const customerId = ref<string>('');
const customerNo = ref<string>('');
const customerName = ref<string>('');

// 异步加载子组件
const BaseInfo = defineAsyncComponent(() => import('@/views/customer/customerFile/customerInfo/overview/baseInfo.vue'));
const OrgStructure = defineAsyncComponent(() => import('@/views/customer/customerFile/customerInfo/overview/orgStructure.vue'));
const ContactInfo = defineAsyncComponent(() => import('@/views/customer/customerFile/customerInfo/overview/contactInfo.vue'));
const ShippingAddress = defineAsyncComponent(() => import('@/views/customer/customerFile/customerInfo/overview/shippingAddress.vue'));
const ContractManagement = defineAsyncComponent(() => import('@/views/customer/customerFile/customerInfo/overview/contractManagement.vue'));
const ProcurementProfile = defineAsyncComponent(() => import('@/views/customer/customerFile/customerInfo/overview/procurementProfile.vue'));
const OperationLog = defineAsyncComponent(() => import('@/views/customer/customerFile/customerInfo/overview/operationLog.vue'));

// 组件映射
const componentMap: Record<string, any> = {
  baseInfo: BaseInfo,
  orgStructure: OrgStructure,
  contactInfo: ContactInfo,
  shippingAddress: ShippingAddress,
  contractManagement: ContractManagement,
  procurementProfile: ProcurementProfile,
  operationLog: OperationLog
};

const currentComponent = ref(componentMap['baseInfo']); // 默认显示基本信息

// 菜单选择处理
const handleSelect = (key: string) => {
  activeMenu.value = key;
  currentComponent.value = componentMap[key] || componentMap['baseInfo'];
};

// 初始化
onMounted(async () => {
  const id = route.query.id;
  if (id) {
    customerId.value = id as string;
    // 加载客户基本信息获取客户编号
    await loadCustomerNo(id as string);
  }

  // 如果URL中有tab参数，则显示对应的tab
  const tab = route.query.tab;
  if (tab && componentMap[tab as string]) {
    activeMenu.value = tab as string;
    currentComponent.value = componentMap[tab as string];
  }
});

// 加载客户编号
const loadCustomerNo = async (id: string) => {
  try {
    const { getCustomerInfo } = await import('@/api/customer/customerFile/customerInfo');
    const res = await getCustomerInfo(id);
    customerNo.value = res.data.customerNo || '';
    customerName.value = res.data.customerName || '';
  } catch (error) {
    console.error('加载客户编号失败:', error);
  }
};
</script>

<style scoped>
.el-menu-demo {
  border-bottom: none;
}
</style>
