import { h } from 'vue';
import { BasicColumn, FormSchema } from '/@/components/Table';
import { Tinymce } from '/@/components/Tinymce/index';
import { getOrganizationList } from '/@/api/system/system';
import { copyTransFun } from '/@/utils/fnUtils';
import { Tag } from 'ant-design-vue';

export enum IsOrgEnum {
  IS_ORG_ENUM = '1',
}
export const isOrg = (type: string) => {
  return type === IsOrgEnum.IS_ORG_ENUM;
};

export const columns: BasicColumn[] = [
  {
    title: '类型',
    dataIndex: 'type',
    width: 200,
    format: (_text: string, record: Recordable) => {
      return record.type === 'NOTICE'
        ? '公告'
        : record.type === 'MEETING'
        ? '会议'
        : record.type === 'OTHER'
        ? '其他'
        : '';
    },
  },
  {
    title: '标题',
    dataIndex: 'title',
    width: 200,
  },
  {
    title: '内容',
    dataIndex: 'content',
    width: 120,
    format: (text: string, record: Recordable) => {
      return !record.content ? '' : record.content.slice(3, record.content.length - 4);
    },
  },
  {
    title: '发送者',
    dataIndex: 'senderName',
    width: 200,
    format: (text: string, record: Recordable) => {
      return record.senderName ? record.senderName : '无';
    },
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 200,
    customRender: ({ record }) => {
      const status = record.status;
      const enable = status === '已发布' ? '已发布' : status === '草稿' ? '草稿' : '其他';
      const color = enable === '已发布' ? 'green' : enable === '草稿' ? 'yellow' : 'red';
      const text = enable === '已发布' ? '已发布' : enable === '草稿' ? '草稿' : '其他';
      return h(Tag, { color }, () => text);
    },
  },
];

export const formSchema: FormSchema[] = [
  {
    field: 'type',
    label: '类型',
    colProps: { span: 24 },
    required: true,
    component: 'RadioGroup',
    componentProps: {
      options: [
        {
          label: '公告',
          value: 'NOTICE',
        },
        {
          label: '会议',
          value: 'MEETING',
        },
        {
          label: '其他',
          value: 'OTHER',
        },
      ],
    },
  },
  {
    field: 'title',
    label: '标题',
    required: true,
    colProps: { span: 24 },
    component: 'Input',
    componentProps: {
      placeholder: '请输入标题',
      maxLength: 200,
    },
  },
  {
    field: 'content',
    component: 'Input',
    colProps: { span: 24 },
    label: '通知内容',
    required: true,
    render: ({ model, field }) => {
      return h(Tinymce, {
        value: model[field],
        onChange: (value: string) => {
          model[field] = value;
        },
      });
    },
  },
  {
    field: 'receiverType',
    required: true,
    label: '接收者',
    colProps: { span: 13 },
    component: 'Select',
    componentProps: {
      placeholder: '接收者',
      options: [
        { label: '全部', value: '0' },
        { label: '组织', value: '1' },
      ],
    },
  },
  {
    field: 'organizationId',
    label: '所属组织',
    colProps: { span: 13 },
    component: 'ApiTreeSelect',
    required: true,
    componentProps: {
      multiple: true,
      api: async () => {
        const data = await getOrganizationList();
        copyTransFun(data as any as any[]);
        return data;
      },
    },
    ifShow: ({ values }) => isOrg(Reflect.get(values, 'receiverType')),
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'type',
    label: '通知类型',
    colProps: { span: 6 },
    component: 'Select',
    componentProps: {
      placeholder: '请选择类型',
      options: [
        {
          label: '公告',
          value: 'NOTICE',
        },
        {
          label: '会议',
          value: 'MEETING',
        },
        {
          label: '其他',
          value: 'OTHER',
        },
      ],
    },
  },
];
export const detailColumns: BasicColumn[] = [
  {
    title: '接收者',
    dataIndex: 'receiverName',
    width: 200,
  },
  {
    title: '阅读状态',
    dataIndex: 'readStatus',
    width: 200,
    slots: { customRender: 'readStatus' },
  },
  {
    title: '阅读时间',
    dataIndex: 'readDate',
    width: 200,
  },
];