import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { rules } from '/@/utils/helper/validator';
import { render } from '/@/utils/common/renderUtils';
import { getWeekMonthQuarterYear } from '/@/utils';
import { h } from 'vue';
import { Image } from 'ant-design-vue';
//列表数据
// 反馈类型0-投诉吐槽；1-功能异常；2-用户体验；3-功能建议；4-其他
export const feedbackTypeOptions = ['投诉吐槽', '功能异常', '用户体验', '功能建议', '其他'];
export const columns: BasicColumn[] = [
  {
    title: '昵称',
    align: 'center',
    dataIndex: 'userName',
  },
  {
    title: '手机号码',
    align: 'center',
    dataIndex: 'phone',
  },
  {
    title: '问题类型',
    align: 'center',
    dataIndex: 'feedbackType',
    slots: { customRender: 'type' },
  },
  {
    title: '问题描述',
    align: 'center',
    dataIndex: 'feedbackDescribed',
  },
  {
    title: '图片',
    align: 'center',
    dataIndex: 'feedbackImgList',
    slots: { customRender: 'img' },
  },
  {
    title: '反馈时间',
    align: 'center',
    dataIndex: 'createTime',
  },
  {
    title: '回复',
    align: 'center',
    dataIndex: 'replyContent',
  },
];
//查询数据
export const searchFormSchema: FormSchema[] = [];
//表单数据
export const formSchema: FormSchema[] = [
  {
    label: '',
    field: 'userId',
    component: 'Input',
    colSlot: 'title1',
    labelWidth: 0,
    colProps: {
      span: 28,
      xs: 28,
    },
  },
  // TODO 主键隐藏字段，目前写死为ID
  {
    label: '',
    field: 'id',
    component: 'Input',
    show: false,
  },
  {
    label: '昵称',
    field: 'userName',

    component: 'Input',
    span: 12,
    componentProps: {
      readonly: true,
    },
  },
  {
    label: '手机号码',
    field: 'phone',
    component: 'Input',

    span: 12,
    componentProps: {
      readonly: true,
    },
  },
  {
    label: '问题类型',
    field: 'feedbackName',
    component: 'Input',

    span: 12,
    componentProps: {
      readonly: true,
    },
  },
  {
    label: '问题描述',
    field: 'feedbackDescribed',
    component: 'Input',
    span: 12,

    componentProps: {
      readonly: true,
    },
  },
  {
    label: '图片',
    field: 'feedbackImgList',
    component: 'Input',
    span: 12,

    componentProps: {
      readonly: true,
    },
    render: ({ model, field }) => {
      console.log(typeof model[field] == 'object', field);
      return h(
        'div',
        { class: 'flex item-center justify-around' }, // 外层容器
        model[field]?.map((img, idx) =>
          h(Image, {
            key: idx, // 重要：为循环项添加唯一 key
            src: img,
            width: 80,
            rootClassName: 'mr-4',
          })
        )
      );
    },
  },
  {
    label: '反馈时间',
    field: 'createTime',
    component: 'Input',
    span: 12,
    componentProps: {
      readonly: true,
    },
  },
  {
    label: '',
    field: '',
    component: 'Input',
    colSlot: 'title2',
    labelWidth: 0,
  },
  {
    label: '回复',
    field: 'replyContent',
    component: 'InputTextArea',
    span: 12,
    required: true,
  },
];

/**
 * 流程表单调用这个方法获取formSchema
 * @param param
 */
export function getBpmFormSchema(_formData): FormSchema[] {
  // 默认和原始表单保持一致 如果流程中配置了权限数据，这里需要单独处理formSchema
  return formSchema;
}