<script setup lang="ts">
import { useDetail } from "../config/detail";
import { detailProps } from "../types";
import { RECONCILIATION_COLUMNS } from "/@/utils/details/reconciliation";
import BasicDescriptions from "/@/components/BasicDescriptions";
import { send_status_list } from "/@/utils/status";

const props = defineProps(detailProps);
defineEmits(["map-offset-top"]);

const { data, defaultRef } = useDetail(props);
</script>

<template>
  <BasicDescriptions
    ref="defaultRef"
    :data="data"
    :columns="RECONCILIATION_COLUMNS"
    :col-number="3"
  >
    <template #custom>
      <el-descriptions-item label="采购单信息" :span="3">
        <el-table :data="(data.cgdlist as unknown as any[])" size="small">
          <el-table-column label="采购单编号" prop="sequenceNo" width="180" />
          <el-table-column label="采购单信息" show-overflow-tooltip>
            <el-table-column
              label="货款"
              prop="totalPrice"
              show-overflow-tooltip
            />
            <el-table-column
              label="供货商"
              prop="supplierName"
              show-overflow-tooltip
            />
            <el-table-column label="联系人" show-overflow-tooltip />
            <el-table-column
              label="采购员"
              prop="ownerName"
              show-overflow-tooltip
            />
            <el-table-column
              label="发货状态"
              prop="sendStatus"
              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="开票编号" show-overflow-tooltip />
            <el-table-column
              label="开票公司"
              prop="companyName"
              show-overflow-tooltip
            />
          </el-table-column>
        </el-table>
      </el-descriptions-item>
    </template>
  </BasicDescriptions>
</template>
