import { FormSchema, BasicColumn } from '/@/components/Table';

import { h } from 'vue';
import { Switch } from 'ant-design-vue';
import { useMessage } from '/@/hooks/web/useMessage';
import { Tinymce } from '/@/components/Tinymce/index';

export const formSchema: FormSchema[] = [
  {
    field: 'name',
    label: '商品名称',
    component: 'Input',
    required: true,
  },

  {
    field: 'link',
    label: '购买链接',
    component: 'Input',
  },
  {
    field: 'isLaunched',
    label: '是否上架',
    component: 'Switch',
  },
  {
    field: 'steamRoom',
    label: '直播间名称',
    component: 'Input',
    helpMessage: '直播间不能修改',
    required: true,
    colProps: {
      lg: 8,
      md: 8,
    },
    componentProps: {
      disabled: false,
    },
  },
  {
    field: 'desc',
    label: '商品描述',
    component: 'Input',
    render: ({ model, field }) => {
      return h(Tinymce, {
        value: model[field],

        onChange: (value: string) => {
          model[field] = value;
        },
        showImageUpload: true,
      });
    },
  },
];
export const columns: BasicColumn[] = [
  {
    title: 'ID',
    dataIndex: 'id',
    fixed: 'left',
    width: 60,
  },
  {
    title: '商品名称',
    dataIndex: 'name',

    width: 160,
  },
  {
    title: '商品描述',
    dataIndex: 'desc',
    width: 150,
  },
  {
    title: '购买链接',
    dataIndex: 'link',
    slots: { customRender: 'link' },
    width: 150,
  },
  {
    title: '商品分类',
    dataIndex: 'productType',
    slots: { customRender: 'productType' },
    sorter: true,
    width: 120,
  },
  {
    title: '直播间名称',
    dataIndex: 'steamRoom.name',
    sorter: true,
    width: 120,
  },
  {
    title: '零售价格',
    dataIndex: 'unit',
    sorter: true,
    width: 80,
  },
  {
    title: '销售量',
    dataIndex: 'amount',
    sorter: true,
    width: 80,
  },
  {
    title: '市场价',
    dataIndex: 'marketingUnit',
    sorter: true,
    width: 80,
  },
  {
    title: '下单时间',
    dataIndex: 'createTime',
    sorter: true,
    width: 140,
  },
  {
    title: '上架状态',
    dataIndex: 'isLaunched',
    width: 180,
    customRender: ({ record }) => {
      if (!Reflect.has(record, 'pendingStatus')) {
        record.pendingStatus = false;
      }
      return h(Switch, {
        checked: record.isLaunched,
        checkedChildren: '上架',
        unCheckedChildren: '下架',
        loading: false,
        onChange(checked: boolean) {
          record.pendingStatus = true;
          const newStatus = checked ? '1' : '0';
          const { createMessage } = useMessage();
          createMessage.info(`暂未接入` + newStatus);
        },
      });
    },
  },
  {
    title: '操作',
    dataIndex: '',
    slots: { customRender: 'action' },
    fixed: 'right',
    width: 140,
  },
];