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

import { httpDetail } from "/@/api/postSupplierOrder/sendOrderRecord";
import { useAsync } from "/@/hooks";

const emit = defineEmits(['choose'])

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

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

const { run, loading, data: detail } = useAsync<Record<string, any>>({
  initalData: {}
});

const _data = computed(() => props.request ? detail.value : (props.data || {}))

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

const totalAmount = computed(() => {
  if (!_data.value.cgdlist) return '0.00';
  const total = _data.value.cgdlist.reduce((prev, current) => Number(addition(prev, current.post_fee)).toFixed(2), 0);
  return Number.isNaN(total) ? 0 : total;
})


watch(() => props.payNo, () => {
  if (!props.payNo) return detail.value = {};
  run(httpDetail({ payNo: props.payNo }));
}, {
  immediate: true
})

// 

defineExpose({
  refresh:() => run(httpDetail({ payNo: props.payNo }))
})
</script>

<template>
  <div v-loading="loading" style="width:100%">
    <div v-if="!readonly || choose" class="flex justify-end">
      <el-button text size="small" type="primary" @click="emit('choose')">选择</el-button>
    </div>

    <BasicDescriptions :data="_data" :columns="columns" v-if="readonly" />

    <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 type="index" label="序号" min-width="55" show-overflow-tooltip />
      <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 prop="post_fee" min-width="100px" label="物流费用"   show-overflow-tooltip/>
      <ElTableColumn prop="remark" label="备注"    min-width="120px" show-overflow-tooltip/>
      <ElTableColumn prop="apply_name" label="创建人"  min-width="120px" show-overflow-tooltip/>
      <ElTableColumn prop="create_time" label="创建时间"  min-width="140px" show-overflow-tooltip/>
    </ElTable>
  </div>
</template>
