import { h } from "vue";
import { httpList } from "/@/api/sellOut/adviceProductSetting";
import { ContentConfig } from "/@/components/PageContent";
import { ElImage, ElTag } from "element-plus";

import { isCombindOptions, infoStatusOptions, taxStatusOptions } from "./_options";

const columns = [
  {
    prop: 'infoNo',
    label: '竞价单编号',
    fixed: 'left',
    width: '160px'
  },
  {
    prop: 'bidNo',
    label: '商品编码',
    width: '160px'
  },
  {
    prop: 'good_name',
    label: '商品名称',
    minWidth: '160px'
  },
  {
    prop: 'is_combind',
    label: '组合类型',
    width: '100px',
    cellRenderer({ row }){
      return h(
        ElTag, 
        { size: 'small' }, 
        { default: () => isCombindOptions.find(({ value }) => value == row.is_combind)?.label || '--'}
      )
    }
  },
  {
    label: '竞价单状态',
    width: '110px',
    cellRenderer({ row }){
      return h(
        ElTag, 
        { 
          size: 'small',
          type: String(row.info_status) === '5'
                ? '' : String(row.info_status) === '6' || String(row.info_status) === '7'
                ? 'info' : 'warning'
        }, 
        { default: () => infoStatusOptions.find(({ value }) => value == row.info_status)?.label || '--'}
      )
    }
  },
  {
    label: '类目状态',
    width: '130px',
    cellRenderer({ row }){
      return h(
        ElTag, 
        { size: 'small', type:  taxStatusOptions.find(({ value }) => value == row.tax_status)?.type || 'info' }, 
        { default: () => taxStatusOptions.find(({ value }) => value == row.tax_status)?.label || '--'}
      )
    }
  },
  {
    label: '商品主图',
    minWidth: '120px',
    cellRenderer({ row }){
      return h('div', { style: { display: 'flex' }}, (row.good_img || '').split(',').map(imgUrl => {
        return h(ElImage, 
          {  
            src:imgUrl,
            previewSrcList: [imgUrl],
            previewTeleported: true,
            style: 'width: 25px; height:25px'
          }
        )
      }))
    }
  },
  {
    label: '供应商名称',
    minWidth: '160px',
    _slot_: 'supplier',
    prop: 'supplierName'
  },
  {
    prop: 'companyName',
    _slot_: 'company',
    label: '业务公司名称',
    minWidth: '160px',
  },
  {
    prop: 'order_creater',
    label: '竞价创建人',
    minWidth: '100px'
  },
  {
    prop: 'addtime',
    label: '添加时间',
    minWidth: '160px',
  },
  {
    prop: "",
    label: "操作",
    fixed: "right",
    width: "80px",
    slot: "operation",
  }
];

const contentConfig: ContentConfig = {
  title: "咨询商品销项类目设置",
  columns,
  apis: {
    httpList,
  }
};

export default contentConfig;
