import { FormProps, BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Form/index';
import { adapt } from '/@/utils/adapt';
import CustomInput from './customCom/CustomInput.vue';
import { formatToDate } from '/@/utils/dateUtil';
import { h } from 'vue';

const adaptWidth = adapt();

export const columns: BasicColumn[] = [
  {
    title: 'ID',
    dataIndex: 'id',
    editComponentProps: {
      prefix: '$',
    },
    width: 100,
    sorter: true,
  },
  {
    title: '部门名称',
    dataIndex: 'name',
    width: 130,
    sorter: true,
  },
  {
    title: '部门归属',
    dataIndex: 'high',
    width: 130,
    sorter: true,
  },
  {
    title: '下属部门',
    dataIndex: 'low',
    width: 130,
    sorter: true,
  },
  {
    title: '部门人数',
    dataIndex: 'num',
    width: 130,
    sorter: true,
  },
  {
    title: '总负责人',
    dataIndex: 'master',
    width: 130,
    sorter: true,
  },
  {
    title: '操作员',
    dataIndex: 'manager',
    width: 130,
    sorter: true,
  },
  {
    title: '备注',
    dataIndex: 'remark',
    width: 160,
    sorter: true,
  },
  {
    title: '创建日期',
    dataIndex: 'createtime',
    width: 200,
    customRender: ({ record }) => {
      const createtime = record.createtime;
      return formatToDate(createtime * 1000);
    },
  },
];

export function getFormConfig(): Partial<FormProps> {
  return {
    labelWidth: 100,
    schemas: [
      {
        field: `id`,
        label: `ID`,
        component: 'Input',
        componentProps: {
          placeholder: 'ID',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `name`,
        label: `部门名称`,
        component: 'Input',
        componentProps: {
          placeholder: '部门名称',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `high`,
        label: `部门归属`,
        component: 'Input',
        componentProps: {
          placeholder: '部门归属',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `low`,
        label: `下属部门`,
        component: 'Input',
        componentProps: {
          placeholder: '下属部门',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `num`,
        label: `部门人数`,
        component: 'Input',
        componentProps: {
          placeholder: '部门人数',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `master`,
        label: `总负责人`,
        component: 'Input',
        componentProps: {
          placeholder: '总负责人',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `manager`,
        label: `操作员`,
        component: 'Input',
        componentProps: {
          placeholder: '操作员',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `remark`,
        label: `备注`,
        component: 'Input',
        componentProps: {
          placeholder: '备注',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `createtime`,
        label: `创建日期`,
        component: 'DatePicker',
        componentProps: {
          placeholder: '创建日期',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
    ],
  };
}

// =================popup================================
export const schemas: FormSchema[] = [
  {
    field: 'name',
    component: 'Input',
    label: '部门名称',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    componentProps: {
      placeholder: '活动名称',
    },
    required: true,
  },
  {
    field: 'pid',
    component: 'Input',
    label: '上级部门',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    componentProps: {
      placeholder: '上级部门',
    },
  },
  {
    field: 'member',
    component: 'Input',
    label: '部门人员',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    componentProps: {
      placeholder: '部门人员',
    },
  },
  {
    field: 'master',
    component: 'Select',
    label: '总负责人',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    render: ({ model, field }) => {
      return h(CustomInput, {
        value: model.master,
        placeholder: '总负责人',
        onChange(value) {
          model[field] = value;
        },
      });
    },
  },
  {
    field: 'manager',
    component: 'Input',
    label: '分管人',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    render: ({ model, field }) => {
      return h(CustomInput, {
        value: model.manager,
        placeholder: '分管人',
        onChange(value) {
          model[field] = value;
        },
      });
    },
  },
  {
    field: 'remark',
    component: 'Input',
    label: '备注',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    componentProps: {
      placeholder: '备注',
    },
  },
];
