import { FormSchema, BasicColumn } from '/@/components/Table';
import { categoryApi } from '/@/api/product/category';
import { makeTree } from '/@/utils/treeUtils';
import { uploadApi } from '/@/api/advertisement/list';
import { h } from 'vue';
import { Switch } from 'ant-design-vue';
import { useMessage } from '/@/hooks/web/useMessage';
import { Tinymce } from '/@/components/Tinymce/index';
import { BrandListApi } from '/@/api/order/list';

export const formSchema: FormSchema[] = [
  {
    field: 'categoryId',
    label: '商品分类',
    component: 'ApiTreeSelect',
    required: true,
    componentProps: {
      api: async () => {
        const res = await categoryApi({ show: 1 });
        const treeData = makeTree(res);
        return treeData;
      },
      fieldNames: {
        label: 'name',
        key: 'id',
        value: 'id',
      },
    },
  },
  // {
  //   field: 'goodsSn',
  //   label: '序列号',
  //   component: 'Input',
  //   required: true,
  //   componentProps: {
  //     maxLength: 3,
  //   },
  // },
  {
    field: 'name',
    label: '商品名称',
    component: 'Input',
    required: true,
    componentProps: {
      maxLength: 15,
    },
  },
  {
    field: 'goodsSimpleDesc',
    label: '商品描述',
    component: 'Input',
    required: true,
    componentProps: {
      maxLength: 200,
    },
  },
  {
    field: 'brandId',
    label: '直播间名称',
    component: 'ApiSelect',
    itemProps: {
      validateTrigger: 'blur',
    },
    componentProps: {
      api: BrandListApi,
      labelField: 'name',
      valueField: 'id',
      immediate: true,
      params: {
        page: 1,
        limit: 1000,
      },
    },
    required: true,
  },
  {
    field: 'realShopUrl',
    component: 'Input',
    label: '购买链接',
    renderComponentContent: () => {
      return {
        suffix: () => '仅支持京东链接',
      };
    },
    componentProps: {
      maxLength: 200,
    },
    rules: [
      {
        validator: async (_, value) => {
          return new Promise((resolve, reject) => {
            if (!value) {
              return resolve();
            }
            const reg =
              /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
            if (reg.test(value) && value.includes('.jd.')) {
              resolve();
            } else {
              reject('不是京东链接！！');
            }
          });
        },
      },
    ],
  },
  {
    field: 'goodsgg',
    label: '商品规格',
    slot: 'goodsgg',
    component: 'Input',
  },
  {
    field: 'productList',
    label: '规格明细',
    slot: 'detailed',
    rules: [
      {
        required: true,
        validator: async (_, value) => {
          console.log('validator', value);
          return new Promise((resolve, reject) => {
            if (!value) {
              reject('请选生成规格明细！！');
            }
            const check =
              value &&
              value.every((ele) => {
                const { goodsNumber, goodsSn, marketPrice, retailPrice } = ele;
                try {
                  if (goodsNumber >= 0 && retailPrice >= 0 && goodsSn && marketPrice >= 0) {
                    if (
                      goodsNumber.toString().length > 0 &&
                      retailPrice.toString().length > 0 &&
                      marketPrice.toString().length > 0
                    ) {
                      return true;
                    }
                    return false;
                  } else {
                    return false;
                  }
                } catch (error) {
                  return false;
                }
              });
            console.log('product', value, check);
            if (check) {
              resolve();
            } else {
              reject('请输入商品明细！！');
            }
          });
        },
      },
    ],
    component: 'Input',
  },
  {
    field: 'isOnSale',
    label: '是否上架',
    component: 'Switch',
  },
  {
    field: 'primaryPicUrl',
    component: 'Upload',
    label: '主图',
    rules: [{ required: true, message: '请选择上传文件' }],
    itemProps: {
      validateTrigger: 'blur',
    },
    componentProps: {
      api: uploadApi,
      maxSize: 5,
      maxNumber: 5,
      afterFetch: function (data) {
        Reflect.set(data, 'url', data.message);
        return data;
      },
    },
    required: true,
  },
  {
    field: 'listPicUrl',
    component: 'Upload',
    label: '列表图',
    itemProps: {
      validateTrigger: 'blur',
    },
    rules: [{ required: true, message: '请选择上传文件' }],
    componentProps: {
      api: uploadApi,
      maxSize: 5,
      maxNumber: 1,
      afterFetch: function (data) {
        Reflect.set(data, 'url', data.message);
        console.log('setFieldsValue');
        return data;
      },
    },
    required: true,
  },
  // {
  //   field: 'steamRoom',
  //   label: '直播间名称',
  //   component: 'Input',
  //   helpMessage: '直播间不能修改',
  //   required: true,
  //   colProps: {
  //     lg: 8,
  //     md: 8,
  //   },
  //   componentProps: {
  //     disabled: false,
  //   },
  // },
  {
    field: 'goodsDesc',
    label: '商品描述',
    component: 'Input',
    render: ({ model, field }) => {
      return h(Tinymce, {
        value: model[field],
        maxlength: 200,
        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,
  },
];
