import { h } from "vue";
import { ElImage, ElTag } from "element-plus";
import { statusOptions } from "./_options";
import { DescriptionColumns } from "/@/components/BasicDescriptions";
import { createTooltip } from "/@/utils/tootip";

export const purchpayColumns: DescriptionColumns = [
  {
    field: "payNo",
    span: 2,
    label: "对账申请编码"
  },
  {
    field: "dzNo",
    span: 2,
    label: "付款申请编码"
  },
  {
    field: "apply_name",
    span: 2,
    label: "申请人",
    render: (apply_name, { apply_id }) =>
      createTooltip(apply_name, "申请人ID : " + apply_id, 90)
  },
  {
    field: "pay_fee",
    label: "申请付款额度"
  },
  {
    field: "addtime",
    label: "申请时间"
  },
  {
    field: "return_img",
    label: "付款回执",
    render(return_img) {
      const chunks = return_img?.split(",");
      if (!chunks) return null;

      return chunks.map(src => {
        return h(ElImage, {
          src,
          previewSrcList: [src],
          style: {
            height: "20px"
          }
        });
      });
    }
  },
  {
    field: "return_time",
    label: "付款回执时间"
  },
  {
    field: "status",
    label: "状态",
    span: 2,
    render(status) {
      return h(ElTag, null, {
        default: () =>
          statusOptions.find(s => String(status) === s.value)?.label || "--"
      });
    }
  },
  {
    field: "remark",
    label: "备注"
  }
];

export const purchpayReliveColumns: DescriptionColumns = [
  {
    field: "returnCode",
    span: 2,
    label: "退款编码"
  },
  {
    field: "payNo",
    span: 2,
    label: "对账申请编码"
  },
  {
    field: "apply_name",
    span: 2,
    label: "申请人",
    render: (apply_name, { apply_id }) =>
      createTooltip(apply_name, "申请人ID : " + apply_id, 90)
  },
  {
    field: "supplierName",
    span: 2,
    label: "卖方公司",
    render: (supplierName, { supplierNo }) =>
      createTooltip(supplierName, "卖方公司编码 : " + supplierNo, 360)
  },
  {
    field: "companyName",
    span: 2,
    label: "买方公司",
    render: (companyName, { companyNo }) =>
      createTooltip(companyName, "买方公司编码 : " + companyNo, 360)
  },
  {
    field: "pay_fee",
    label: "申请付款额度"
  },
  {
    field: "addtime",
    label: "申请时间"
  },
  {
    field: "returnImg",
    label: "退款回执",
    render(src) {
      return h(ElImage, {
        src,
        previewSrcList: [src],
        style: {
          height: "20px"
        }
      });
    }
  },
  {
    field: "status",
    label: "状态",
    span: 2,
    render(status) {
      return h(ElTag, null, {
        default: () =>
          statusOptions.find(s => String(status) === String(s.value))?.label ||
          "--"
      });
    }
  },
  {
    field: "remark",
    label: "备注"
  }
];

export const columns = [
  {
    label: "对账编码",
    prop: "payNo",
    minWidth: 160,
    align: "left"
  },
  {
    label: "卖方公司编码",
    prop: "supplierNo",
    minWidth: 150,
    align: "left"
  },
  {
    label: "买方公司编码",
    prop: "companyNo",
    minWidth: 150
  },
  {
    label: "买方公司名称",
    prop: "companyName",
    minWidth: 180
  },
  {
    label: "总额款",
    prop: "total_fee",
    minWidth: 110,
    align: "total_fee"
  },
  {
    label: "本次付款金额",
    prop: "dpay_fee",
    minWidth: 110,
    align: "left"
  },
  {
    label: "申请人",
    prop: "apply_name",
    minWidth: 90,
    align: "total_fee"
  }
];
