<template>
  <div class="order-ledger-container">
    <el-card shadow="never" class="main-card">
      <template #header>
        <div class="card-header">
          <span class="header-title">订单管理台账</span>
          <el-button size="default" type="primary" icon="ArrowLeft" @click="handleBack">返回</el-button>
        </div>
      </template>
      <el-tabs v-model="activeTab" @tab-change="handleTabChange" class="custom-tabs">
        <!-- 合同信息 Tab -->
        <el-tab-pane label="合同信息" name="contract">
          <div v-loading="loadingContract" class="tab-content">
            <el-descriptions :column="3" border v-if="contractInfo" class="order-descriptions">
              <el-descriptions-item label="合同编号" :span="1">
                <span class="value-text value-highlight">{{ contractInfo?.contractCode || '-' }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="合同名称" :span="2">
                <span class="value-text value-highlight">{{ contractInfo?.contractName || '-' }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="客户合同编号">{{ contractInfo?.customerContractCode || '-' }}</el-descriptions-item>
              <el-descriptions-item label="内部合同号">{{ contractInfo?.internalContractCode || '-' }}</el-descriptions-item>
              <el-descriptions-item label="外部合同号">{{ contractInfo?.externalContractCode || '-' }}</el-descriptions-item>
              <el-descriptions-item label="订单号">{{ contractInfo?.orderContractCode || '-' }}</el-descriptions-item>
              <el-descriptions-item label="项目号">{{ contractInfo?.projectContractCode || '-' }}</el-descriptions-item>
              <el-descriptions-item label="业务方向">
                <dict-tag :options="business_direction" :value="contractInfo?.businessDirection" />
              </el-descriptions-item>
              <el-descriptions-item label="合同大类">
                <dict-tag :options="contract_category" :value="contractInfo?.contractCategory" />
              </el-descriptions-item>
              <el-descriptions-item label="合同类型">
                <dict-tag :options="contract_type" :value="contractInfo?.contractType" />
              </el-descriptions-item>
              <el-descriptions-item label="合同状态">
                <dict-tag :options="contract_status" :value="contractInfo?.contractStatus" />
              </el-descriptions-item>
              <el-descriptions-item label="合同时间">{{ contractInfo?.contractDate || '-' }}</el-descriptions-item>
              <el-descriptions-item label="合同总价" :span="1">
                <span class="value-text value-amount">
                  {{ contractInfo?.totalPrice ? formatNumber(contractInfo.totalPrice) + ' 元' : '-' }}
                </span>
              </el-descriptions-item>
              <el-descriptions-item label="付款方式">{{ contractInfo?.paymentMethod || '-' }}</el-descriptions-item>
              <el-descriptions-item label="交货地点">{{ contractInfo?.deliveryLocation || '-' }}</el-descriptions-item>
              <el-descriptions-item label="运输方式">{{ contractInfo?.shipMethod || '-' }}</el-descriptions-item>
              <el-descriptions-item label="交付启动期限">{{
                contractInfo?.deliveryStart ? contractInfo.deliveryStart + ' 天' : '-'
              }}</el-descriptions-item>
              <el-descriptions-item label="质保期">{{
                contractInfo?.warrantyPeriod ? contractInfo.warrantyPeriod + ' 天' : '-'
              }}</el-descriptions-item>
              <el-descriptions-item label="质保期描述">{{ contractInfo?.warrantyPeriodDescription || '-' }}</el-descriptions-item>
              <el-descriptions-item label="签订地点">{{ contractInfo?.signingPlace || '-' }}</el-descriptions-item>
              <el-descriptions-item label="备注" :span="3">{{ contractInfo?.remark || '-' }}</el-descriptions-item>
            </el-descriptions>
            <el-empty v-else description="暂无合同信息" class="empty-state" />
          </div>
        </el-tab-pane>

        <!-- 发货信息 Tab -->
        <el-tab-pane label="发货信息" name="shipping">
          <div v-loading="loadingShipping" class="tab-content">
            <el-table :data="shippingList" border stripe size="default" class="data-table">
              <el-table-column type="index" label="序号" width="60" align="center" />
              <el-table-column label="发货单号" prop="shippingCode" width="150" align="center" />
              <el-table-column label="发货方式" prop="shippingMode" width="120" align="center">
                <template #default="scope">
                  <dict-tag :options="shipping_mode" :value="scope.row.shippingMode" />
                </template>
              </el-table-column>
              <el-table-column label="客户名称" prop="customerName" width="180" align="center" show-overflow-tooltip />
              <el-table-column label="收货地址" prop="shippingAddress" width="200" align="center" show-overflow-tooltip />
              <el-table-column label="收货联系人" prop="receiverName" width="100" align="center" />
              <el-table-column label="收货电话" prop="receiverPhone" width="130" align="center" />
<!--              <el-table-column label="物流公司" prop="logisticsCompany" width="130" align="center" />-->
<!--              <el-table-column label="运单号" prop="trackingNo" width="150" align="center" />-->
              <el-table-column label="发货状态" prop="shippingStatus" width="100" align="center">
                <template #default="scope">
                  <dict-tag :options="shipping_status" :value="scope.row.shippingStatus" />
                </template>
              </el-table-column>
              <el-table-column label="计划到货时间" prop="planArrivalTime" width="120" align="center">
                <template #default="scope">
                  <span>{{ parseTime(scope.row.planArrivalTime, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="实际发货时间" prop="shippingTime" width="120" align="center">
                <template #default="scope">
                  <span>{{ parseTime(scope.row.shippingTime, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="发货说明" prop="directions" min-width="200" align="center" show-overflow-tooltip />
              <el-table-column label="操作" align="center" fixed="right" width="100">
                <template #default="scope">
                  <el-tooltip content="查看发货单明细" placement="top">
                    <el-button link type="primary" icon="View" @click="handleViewShipping(scope.row)">明细</el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
            <el-empty v-if="!loadingShipping && shippingList.length === 0" description="暂无发货信息" class="empty-state" />
            <pagination
              v-show="shippingTotal > 0"
              :total="shippingTotal"
              v-model:page="shippingQuery.pageNum"
              v-model:limit="shippingQuery.pageSize"
              @pagination="loadShippingList"
              class="pagination-wrapper"
            />
          </div>
        </el-tab-pane>

        <!-- 回款信息 Tab -->
        <el-tab-pane label="回款信息" name="payment">
          <div v-loading="loadingPayment" class="tab-content">
            <el-table :data="planStageList" border stripe size="default" class="data-table">
              <el-table-column label="序号" type="index" width="60" align="center" />
              <el-table-column label="回款阶段" width="220" align="center">
                <template #default="scope">
                  {{ getPaymentStageName(scope.row.collectionStage) }}
                </template>
              </el-table-column>
              <el-table-column label="预计回款比例(%)" width="160" align="center" prop="repaymentRate" />
              <el-table-column label="预计回款时间" width="150" align="center">
                <template #default="scope">
                  <span>{{ parseTime(scope.row.repaymentTime, '{y}-{m}-{d}') || '-' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="备注" min-width="200" prop="remark" show-overflow-tooltip />
            </el-table>
            <el-empty v-if="!loadingPayment && planStageList.length === 0" description="暂无回款信息" class="empty-state" />
          </div>
        </el-tab-pane>

        <!-- 开票信息 Tab -->
        <el-tab-pane label="开票信息" name="invoice">
          <div class="tab-content">
            <el-empty description="暂无开票信息，功能开发中" class="empty-state" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="OrderLedger">
import { computed, reactive, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getContractOrder } from '@/api/oa/erp/contractOrder';
import { getContractInfo } from '@/api/oa/erp/contractInfo';
import { ContractInfoVO } from '@/api/oa/erp/contractInfo/types';
import { ProjectInfoVO } from '@/api/oa/erp/projectInfo/types';
import { listWmsShippingBill } from '@/api/wms/wmsShippingBill';
import { WmsShippingBillVO } from '@/api/wms/wmsShippingBill/types';
import { getErpProjectPlanStageList } from '@/api/oa/erp/erpProjectPlanStage';
import { ErpProjectPlanStageForm } from '@/api/oa/erp/erpProjectPlanStage/types';
import { getBasePaymentStageList } from '@/api/oa/base/paymentStage';
import { PaymentStageVO } from '@/api/oa/base/paymentStage/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const route = useRoute();
const router = useRouter();

const { business_direction, contract_category, contract_type, contract_status, shipping_mode, shipping_status } = toRefs<any>(
  proxy?.useDict('business_direction', 'contract_category', 'contract_type', 'contract_status', 'shipping_mode', 'shipping_status')
);

const projectId = computed(() => route.params.projectId as string | number | undefined);
const orderInfo = ref<ProjectInfoVO | null>(null);
const contractInfo = ref<ContractInfoVO | null>(null);
const shippingList = ref<WmsShippingBillVO[]>([]);
const planStageList = ref<ErpProjectPlanStageForm[]>([]);
const paymentStageList = ref<PaymentStageVO[]>([]);

const activeTab = ref('contract');
const loadedTabs = ref<Set<string>>(new Set(['contract']));

const loadingContract = ref(false);
const loadingShipping = ref(false);
const loadingPayment = ref(false);

const shippingTotal = ref(0);
const shippingQuery = reactive({ pageNum: 1, pageSize: 10 });

/** 格式化数字 */
const formatNumber = (num: number) => {
  return num?.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
};

/** 返回 */
const handleBack = () => {
  proxy?.$tab.closePage(route);
  router.back();
};

/** 查看发货单明细 */
const handleViewShipping = (row: WmsShippingBillVO) => {
  router.push({ path: '/shipping/wmsShippingBill/edit', query: { type: 'view', id: row.shippingBillId as string } });
};

/** 加载订单基本信息和合同信息 */
const loadOrderAndContract = async () => {
  if (!projectId.value) return;
  loadingContract.value = true;
  try {
    // 先获取订单信息
    const orderRes = await getContractOrder(projectId.value);
    orderInfo.value = orderRes.data;
    // 再通过 contractId 获取合同详情
    if (orderRes.data?.contractId) {
      const contractRes = await getContractInfo(orderRes.data.contractId);
      contractInfo.value = contractRes.data;
    }
  } finally {
    loadingContract.value = false;
  }
};

/** 加载发货信息 */
const loadShippingList = async () => {
  if (!orderInfo.value?.contractId) {
    shippingList.value = [];
    shippingTotal.value = 0;
    return;
  }
  loadingShipping.value = true;
  try {
    const res: any = await listWmsShippingBill({
      ...shippingQuery,
      contractId: orderInfo.value.contractId
    });
    shippingList.value = res.rows || [];
    shippingTotal.value = res.total || 0;
  } finally {
    loadingShipping.value = false;
  }
};

/** 加载回款阶段基础数据 */
const loadPaymentStageBaseList = async () => {
  try {
    const res = await getBasePaymentStageList({ pageNum: 1, pageSize: 9999 });
    paymentStageList.value = (res.data || []).map((item: any) => ({
      ...item,
      paymentStageId: item.paymentStageId != null ? String(item.paymentStageId) : item.paymentStageId
    }));
  } catch (error) {
    console.error('查询回款阶段列表失败:', error);
    paymentStageList.value = [];
  }
};

/** 加载回款信息（项目阶段计划） */
const loadPlanStageList = async () => {
  if (!projectId.value) {
    planStageList.value = [];
    return;
  }
  loadingPayment.value = true;
  try {
    const res = await getErpProjectPlanStageList({ projectId: projectId.value });
    planStageList.value = (res.data || []).map((item: any) => ({
      ...item,
      collectionStage: item.collectionStage || '',
      repaymentRate: item.repaymentRate || undefined,
      repaymentTime: item.repaymentTime || undefined,
      remark: item.remark || ''
    }));
  } catch (error) {
    console.error('查询回款信息失败:', error);
    planStageList.value = [];
  } finally {
    loadingPayment.value = false;
  }
};

/** 获取回款阶段名称 */
const getPaymentStageName = (stageId: string | number) => {
  if (!stageId) return '-';
  const stage = paymentStageList.value.find((s) => String(s.paymentStageId) === String(stageId));
  return stage?.paymentMethod || '-';
};

/** Tab 切换 */
const handleTabChange = (tabName: string) => {
  if (!loadedTabs.value.has(tabName)) {
    loadedTabs.value.add(tabName);
    switch (tabName) {
      case 'shipping':
        shippingQuery.pageNum = 1;
        loadShippingList();
        break;
      case 'payment':
        loadPlanStageList();
        break;
    }
  }
};

watch(
  () => projectId.value,
  () => {
    if (projectId.value) {
      loadedTabs.value.clear();
      loadedTabs.value.add('contract');
      loadPaymentStageBaseList();
      loadOrderAndContract();
    }
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
.order-ledger-container {
  padding: 16px;

  .main-card {
    :deep(.el-card__header) {
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .header-title {
          font-size: 16px;
          font-weight: 600;
          color: #303133;
        }
      }
    }

    :deep(.el-card__body) {
      padding: 0;
    }
  }

  .custom-tabs {
    :deep(.el-tabs__content) {
      padding: 20px;
    }
  }

  .tab-content {
    padding: 0;
  }

  .order-descriptions {
    .value-text {
      &.value-highlight {
        font-weight: 600;
        color: #409eff;
      }

      &.value-amount {
        font-weight: 600;
        color: #e6a23c;
      }
    }
  }

  .data-table {
    :deep(.el-table__header) {
      th {
        font-weight: 600;
      }
    }
  }

  .empty-state {
    padding: 40px 0;
  }

  .pagination-wrapper {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
