import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';

/** 表格列配置 */
export const columns: BasicColumn[] = [
  {
    title: '昵称',
    dataIndex: 'nickName'
  },
  {
    title: '性别',
    dataIndex: 'sex',
    width: 80,
    customRender: ({ record }) => {
      const sex = record.sex;
      const enable = ~~sex === 0;
      const color = enable ? 'green' : 'red';
      const text = enable ? '男' : '女';
      return h(Tag, { color: color }, () => text);
    }
  },
  {
    title: '手机号',
    dataIndex: 'phone'
  },
  {
    title: '邮箱',
    dataIndex: 'email'
  },
  {
    title: '所属部门',
    dataIndex: 'deptName'
  },
  {
    title: '创建人',
    dataIndex: 'createByName'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 200
  },
];

/** 搜索表单配置 */
export const searchFormSchema: FormSchema[] = [
  {
    field: 'nickName',
    label: '用户昵称',
    component: 'Input',
    componentProps: {
      placeholder: '请输入昵称',
    },
    colProps: { span: 6 }
  }
];

/** 表单配置 */
export const formSchema: FormSchema[] = [
  {
    field: 'id',
    label: 'ID',
    component: 'Input',
    show: false
  },
  {
    field: 'nickName',
    label: '昵称',
    component: 'Input',
    componentProps: {
      disabled: true
    }
  },
  {
    field: 'deptName',
    label: '所属部门',
    component: 'Input',
    colProps: {
      span: 12
    },
    componentProps: {
      disabled: true
    }
  },
  {
    field: 'sex',
    label: '性别',
    component: 'Select',
    colProps: {
      span: 12
    },
    componentProps: {
      disabled: true,
      options: [
        { label: '男', value: '0' },
        { label: '女', value: '1' }
      ]
    },
  },
  {
    field: 'phone',
    label: '手机号',
    component: 'Input',
    componentProps: {
      disabled: true
    }
  },
  {
    field: 'email',
    label: '邮箱',
    component: 'Input',
    componentProps: {
      disabled: true
    }
  },
];