import { ContentConfig } from "/@/components/PageContent";
import { httpAbList } from "/@/api/InvoiceSaleSettings/commodityCost";

import { diffCatOptions, diffTaxOptions } from "./configs"

import dayjs from "dayjs";
import { ElButton, ElPopover, ElTable, ElTableColumn, ElTag } from "element-plus";
import { h } from "vue";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { renderIconLabelLeft } from "/@/utils/columnRenderHelper";

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


const columns = [
  {
    label: "商品编码",
    prop: "spuCode",
    width: 150
  },
  {
    label: "商品分类",
    prop: "cat_name",
    width: 150
  },
  {
    label: "商品名称",
    prop: "good_name",
    minWidth: 195
  },
  {
    label: "商品类型",
    prop: "isZx",
    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: "cgd_inv_cat_name",
    width: 120
  },
  {
    label: "采购商品名称",
    prop: "cgd_inv_good_name",
    width: 120
  },
  {
    label: "采购商品税率",
    prop: "cgd_inv_tax",
    width: 120
  },
  {
    label: "财务商品类目",
    prop: "inv_cat_name",
    width: 120
  },
  {
    label: "财务商品名称",
    prop: "inv_good_name",
    width: 120
  },
  {
    label: "财务商品税率",
    prop: "inv_tax",
    width: 120
  },
  {
    label: "类目是否一致",
    width: 120,
    cellRenderer({ row }) {
      const { cgd_inv_cat_code, inv_cat_code } = row;
      const data = [{type:'采购',value:cgd_inv_cat_code},  {type:'财务',value:inv_cat_code}];

      return h(
        "div",
        {
          style: {
            display: "flex",
            justifyContent: "space-between"
          }
        },
        {
          default: () => [
            h("span", null,
            h(ElTag, { type: row.cat_diff === "1" ? "" : "warning"}, 
            { default: () => diffCatOptions.find(({ value }) => value === row.cat_diff)?.label || "--" })),
            h(
              ElPopover,
              {
                placement: "top",
                width:'300px'
              },
              {
                reference: () => {
                  return  h(ElButton, {
                    link: true,
                    icon: useRenderIcon("information-line")
                  })
                },
                default: () => h("div", null, [
                  h('p',{style:{'fontSize':'14px','fontWeight':'bold','marginBottom':'10px','textAlign': 'center',width:'100%'}}, '商品类目对比'),
                  h(ElTable,{ data, size: 'small', border: true},[
                    h(ElTableColumn,{ label:'', prop: 'type',width:'80px'}, null),
                    h(ElTableColumn,{ label:'类目编码', prop: 'value','min-width':'180'}, null),
                  ])
                ])
              }
            )
          ]
        }
      );
    }
  },
  {
    label: "税率是否一致",
    width: 100,
    cellRenderer({ row }) {
      return h(ElTag, {
        type: row.tax_diff === "1" ? "" : "warning"
      }, {
        default: () => diffTaxOptions.find(({ value }) => value === row.tax_diff)?.label || "--"
      })
    }
  },
  {
    label: "创建时间",
    prop: "createTime",
    width: 140,
    formatter: ({ addtime }) => dayjs(addtime).format("YYYY-MM-DD HH:mm:ss")
  }
];

const contentConfig: ContentConfig = {
  superUserNoPerview: true,
  columns,
  apis: {
    httpList: httpAbList
  }
};

export default contentConfig;
