<script setup lang="ts">
import BasicDescriptions from "/@/components/BasicDescriptions";
import { orderRecordColumns } from "/@/utils/details/_purchase";
import { computed, watchEffect } from "vue";
import { httpInfo } from "/@/api/purchase/orderRecord";
import { useAsync } from "/@/hooks";

import {
  send_status_list,
  cg_order_source_options,
  cgd_type_list
} from "/@/utils/status";

const props = defineProps<{
  payNo: string;
  isInv?: boolean;
}>();

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

const hiddenPayColumns = [
  "inv_status",
  "remark",
  "pay_fee",
  "wpay_fee",
  "apay_fee"
];

const columns = orderRecordColumns.filter(col => {
  return props.isInv
    ? !hiddenPayColumns.includes(col.field)
    : !hiddenInvColumns.includes(col.field);
});

const { data: orderRecordDetail, run: orderRecordDetailRun } = useAsync({
  initalData: {}
});

//采购单个数
const total = computed(
  () =>
    (orderRecordDetail.value as any).cgdlist &&
    (orderRecordDetail.value as any).cgdlist.length
);

const requesetOrderRecordDetail = () => {
  orderRecordDetailRun(
    httpInfo({
      payNo: props.payNo
    })
  );
};

watchEffect(() => {
  const { payNo } = props;
  if (!payNo) return;

  requesetOrderRecordDetail();
});

defineExpose({
  reload: () => {
    requesetOrderRecordDetail();
  }
});
</script>

<template>
  <BasicDescriptions :data="orderRecordDetail" :columns="columns" />
  <div flex justify-between w-full my-1>
    <el-tag type="warning">共计:{{ total }}个订单</el-tag>
  </div>

  <el-table
    ref="tableRef"
    row-key="id"
    size="small"
    :data="(orderRecordDetail as any).cgdlist || []"
    max-height="400"
  >
    <el-table-column label="采购单编码" prop="sequenceNo" width="150" />
    <el-table-column label="采购单信息">
      <el-table-column
        label="供货商"
        prop="supplierName"
        width="160"
        show-overflow-tooltip
      />
      <el-table-column
        label="发货状态"
        prop="sendStatus"
        width="90"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <el-tag>{{
            send_status_list.find(s => s.value === row.sendStatus)?.label
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="业务公司"
        prop="companyName"
        show-overflow-tooltip
      />
      <el-table-column
        label="订单来源"
        prop="cgdSource"
        width="100"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <el-tag>
            {{
              cg_order_source_options.find(t => t.value === row.cgdSource)
                ?.label
            }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="总货款"
        prop="totalPrice"
        width="80"
        show-overflow-tooltip
      />
    </el-table-column>
    <el-table-column label="商品信息">
      <el-table-column
        label="商品编码"
        prop="goodNo"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        label="商品名称"
        prop="goodName"
        width="180"
        show-overflow-tooltip
      />
      <el-table-column
        label="商品来源"
        prop="cgdType"
        width="90"
        show-overflow-tooltip
      >
        <template #="{ row }">
          <el-tag>
            {{
              cgd_type_list.find(t => t.value === String(row.cgdType))?.label
            }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="商品数量"
        prop="goodNum"
        width="90"
        show-overflow-tooltip
      />
    </el-table-column>
    <el-table-column
      label="采购员"
      prop="ownerName"
      width="75"
      show-overflow-tooltip
    />
  </el-table>
</template>
