import { h } from "vue";
import { ContentConfig } from "/@/components/PageContent";
import { httpChangeList } from "/@/api/InvoiceSaleSettings/commodityCost";

import { ElImage } from "element-plus";
import { renderIconLabelLeft } from "/@/utils/columnRenderHelper";

function renderGoodImage(imgSrc: string) {
  const imgs = imgSrc.split(",");
  return h(ElImage, {
    src: imgs[0],
    previewTeleported: true,
    previewSrcList: [imgs[0]],
    style: {
      height: "20px",
      width: "20px"
    }
  });
}

export const stock_type = [
  {
    value: "0",
    label: "非库存商品"
  },
  {
    value: "1",
    label: "库存商品"
  }
];

const columns = [
  {
    label: "商品编码",
    prop: "spuCode",
    width: 150
  },
  {
    label: "商品名称",
    prop: "good_name",
    minWidth: 195
  },
  {
    label: "商品类型",
    width: 120,
    cellRenderer({ row }) {
      return Number(row.isZx) == 1 ? "反馈商品" : stock_type.find(({ value }) => value === String(row.is_stock))?.label || "--";
    },
  },
  {
    label: "卖出方公司",
    prop: "supplierName",
    width: 175,
    ...renderIconLabelLeft("supplierNo", "supplierName", "卖出方公司编码:")
  },
  {
    label: "买入方公司",
    prop: "companyName",
    width: 195,
    ...renderIconLabelLeft("companyNo", "companyName", "买入方公司编码:")
  },
  {
    label: "主图",
    prop: "good_img",
    width: 55,
    cellRenderer: ({ row }) => renderGoodImage(row.good_img)
  },
  {
    label: "操作",
    fixed: "right",
    width: 80,
    slot: "operation"
  }
];

const contentConfig: ContentConfig = {
  columns,
  companyProp: "supplierNo",
  apis: {
    httpList: httpChangeList
  }
};

export default contentConfig;
