<script setup lang="ts">
import { computed } from "vue";
import BasicDescriptions from "/@/components/BasicDescriptions";
import { orderRecordColumns } from "./constants";
import { addition } from "/@/utils/calc";


const props = defineProps<{
  data: Record<string, string>;
  showTicketColumn?: boolean;
  isPurchPay?: boolean;
}>();

const payHiddenColumns = [
  "inv_tag_fee",
  "inv_status",
  "ainv_fee",
  "winv_fee",
  "inv_fee",
  "remark"
];

const columns = computed(() => {
  if (!props.isPurchPay || props.showTicketColumn) return orderRecordColumns;
  return orderRecordColumns.filter(col => !payHiddenColumns.includes(col.field));
});

const totalAmount = computed(() => {
  if (!props.data.cgdlist) return '0.00'
  
  return props.data.cgdlist.reduce((prev,current) => {
    return Number(addition(prev,current.post_fee)).toFixed(2)
  },0)
})
</script>

<template>
  <div>
    <BasicDescriptions :data="data" :columns="columns" />

    <el-tag class="mt-[5px] mb-[5px]" type="warning" size="small">
      共计 {{data.cgdlist ? data.cgdlist.length : 0}} 个订单, 共计 {{totalAmount}} 元
    </el-tag>

    <ElTable size="small" border :data="data.cgdlist" max-height="450px">
      <ElTableColumn prop="TrackCode" label="发货运单编号" min-width="150px" show-overflow-tooltip />
      <ElTableColumn prop="outChildCode" label="发货工单编号" min-width="160px" show-overflow-tooltip />
      <ElTableColumn prop="orderCode" label="销售订单编号" min-width="150px" show-overflow-tooltip />
      <ElTableColumn prop="companyName" label="业务公司" min-width="180px" show-overflow-tooltip />
      <ElTableColumn prop="supplierName" label="物流供应商" min-width="180px" show-overflow-tooltip />
      <ElTableColumn label="物流费用" min-width="150px" prop="post_fee" />
      <ElTableColumn label="创建人" prop="apply_name" min-width="80px" />
      <ElTableColumn label="创建时间" prop="create_time" min-width="140px" />
    </ElTable>
  </div>
</template>
