import { ContentConfig } from "/@/components/PageContent";
import { httpList } from "/@/api/purchase/orderRecordQuery";

import { h } from "vue";
import dayjs from "dayjs";
import { ElImage, ElTag } from "element-plus";
import { invStatusOptions, payStatusOptions } from "./_options";

const columns = [
  {
    type: "selection",
    width: 40,
    align: "center",
    hide: ({ checkList }) => !checkList.includes("勾选列")
  },
  {
    label: "序号",
    type: "index",
    minWidth: 60,
    align: "left",
    hide: ({ checkList }) => !checkList.includes("序号列")
  },
  {
    label: "对账编码",
    prop: "payNo",
    width: 150,
    align: "left"
  },
  {
    label: "卖方公司编码",
    prop: "supplierNo",
    width: 150,
    align: "left"
  },
  {
    label: "卖方公司名称",
    prop: "supplierName",
    minWidth: 180,
    align: "left"
  },
  {
    label: "买方公司编码",
    prop: "companyNo",
    width: 150,
    align: "left"
  },
  {
    label: "买方公司名称",
    prop: "companyName",
    minWidth: 180,
    align: "left"
  },
  {
    label: "总额款",
    prop: "total_fee",
    width: 110,
    align: "total_fee"
  },
  {
    label: "回票状态",
    width: 110,
    transform: inv_status =>
      invStatusOptions.find(s => s.value === inv_status)?.label,
    cellRenderer: ({ row }) => {
      return h(ElTag, null, {
        default: () =>
          invStatusOptions.find(s => s.value === String(row.inv_status))?.label
      });
    }
  },
  {
    label: "已回票金额",
    prop: "ainv_fee",
    width: 110,
    align: "left"
  },
  {
    label: "回票中",
    prop: "inv_fee",
    width: 110
  },
  {
    label: "回票标签金额",
    prop: "inv_tag_fee",
    width: 110,
    align: "left"
  },
  {
    label: "回票标签图片",
    width: "120px",
    cellRenderer({ row }) {
      if (!row.inv_tag_img) return null;

      return h(ElImage, {
        src: row.inv_tag_img,
        previewSrcList: [row.inv_tag_img],
        previewTeleported: true,
        style: {
          height: "20px",
          width: "20px"
        },
          'text-key':"91110113MA028K5Y7Y"
      });
    }
  },
  {
    label: "回票标签标注",
    width: "120px",
    prop: "inv_tag_remark"
  },
  {
    label: "未回票金额",
    prop: "winv_fee",
    width: 110,
    align: "left"
  },
  {
    label: "付款状态",
    width: 110,
    cellRenderer: ({ row }) => {
      return h(ElTag, null, {
        default: () =>
          payStatusOptions.find(s => s.value === String(row.pay_status))?.label
      });
    }
  },
  {
    label: "已付款金额",
    prop: "apay_fee",
    width: 110,
    align: "left"
  },
  {
    label: "付款中金额",
    prop: "pay_fee",
    width: 110,
    align: "left"
  },
  {
    label: "付款标签金额",
    prop: "pay_tag_fee",
    width: 110,
    align: "left"
  },
  {
    label: "付款标签图片",
    width: "120px",
    cellRenderer({ row }) {
      if (!row.pay_tag_img) return null;

      return h(ElImage, {
        src: row.pay_tag_img,
        previewSrcList: [row.pay_tag_img],
        previewTeleported: true,
        style: {
          height: "20px",
          width: "20px"
        },
          'text-key':"91110113MA028K5Y7Y"
      });
    }
  },
  {
    label: "未付款金额",
    prop: "wpay_fee",
    width: 110,
    align: "left"
  },
  {
    label: "申请人",
    prop: "apply_name",
    width: 80,
    align: "left"
  },
  {
    label: "申请时间",
    width: 140,
    prop: "addtime",
    formatter: ({ addtime }) => dayjs(addtime).format("YYYY-MM-DD HH:mm:ss")
  },
  {
    label: "操作",
    fixed: "right",
    width: 140,
    slot: "operation"
  }
];

const contentConfig: ContentConfig = {
  title: "订单对账查询",
  columns,
  deleteProp: "payNo",
  superUserNoAction: true,
  apis: {
    httpList
  },
  payProps: {
    prop: "payNo",
    type: "1"
  },
  returnProps: {
    prop: "payNo",
    type: "2"
  }
};

export default contentConfig;
