/**
 * @description：表单配置
 */
import { IVFormComponent } from '../typings/v-form-component';
import { isArray } from 'lodash-es';
import { componentMap as VbenCmp, add } from '@/components/Form/src/componentMap';
import { ComponentType } from '@/components/Form/src/types';
import { uploadApi, fileUploadApi } from '@/api/sys/upload';
import { componentMap as Cmp } from '../components';
import { Component } from 'vue';
import { getDeptList, getAccountList, getPosGroupList } from '@/api/demo/system';

//获取部门列表数据
const deptTreeData = await Promise.all([getDeptListData()]);
function getDeptListData() {
  let param = {
    page: 1,
    limit: 9999,
  };
  return getDeptList(param).then((data) => {
    return data;
  });
}
//获取职级列表数据
const positionTreeData = await Promise.all([getPositionListData()]);
function getPositionListData() {
  let param = {
    page: 1,
    limit: 9999,
  };
  return getPosGroupList(param).then((data) => {
    return data;
  });
}
//获取人员选择列表数据
const userTreeData = await Promise.all([getUserListData()]);
function getUserListData() {
  let param = {
    page: 1,
    limit: 9999,
  };
  return getAccountList(param).then((data) => {
    return data.items;
  });
}

const componentMap = new Map<string, Component>();

//如果有其它控件，可以在这里初始化

//注册Ant控件库
Cmp.forEach((value, key) => {
  componentMap.set(key, value);
  if (VbenCmp[key] == null) {
    add(key as ComponentType, value);
  }
});
//注册vben控件库
VbenCmp.forEach((value, key) => {
  componentMap.set(key, value);
});

export { componentMap };

/**
 * 设置自定义表单控件
 * @param {IVFormComponent | IVFormComponent[]} config
 */
export function setFormDesignComponents(config: IVFormComponent | IVFormComponent[]) {
  if (isArray(config)) {
    config.forEach((item) => {
      const { componentInstance: component, ...rest } = item;
      componentMap[item.component] = component;
      customComponents.push(Object.assign({ props: {} }, rest));
    });
  } else {
    const { componentInstance: component, ...rest } = config;
    componentMap[config.component] = component;
    customComponents.push(Object.assign({ props: {} }, rest));
  }
}

//外部设置的自定义控件
export const customComponents: IVFormComponent[] = [
  {
    component: 'TreeSelect',
    label: '职级选择',
    icon: 'bi:list-stars',
    field: '',
    colProps: { span: 24 },
    componentProps: {
      fieldNames: {
        children: 'children',
        label: 'name',
        value: 'id',
      },
      treeData: positionTreeData[0],
    },
  },
  {
    component: 'TreeSelect',
    label: '部门选择',
    icon: 'bi:people',
    field: '',
    colProps: { span: 24 },
    componentProps: {
      fieldNames: {
        children: 'children',
        label: 'name',
        value: 'id',
      },
      treeData: deptTreeData[0],
    },
  },
  {
    component: 'Select',
    label: '人员选择',
    icon: 'bi:person',
    field: '',
    colProps: { span: 24 },
    componentProps: {
      fieldNames: {
        label: 'name',
        value: 'account',
      },
      options: userTreeData[0],
    },
  },
  {
    component: 'MapGeom',
    label: '图斑',
    icon: 'bi:box-arrow-in-up-left',
    field: 'mapgeom',
    colProps: { span: 24 },
    componentProps: {},
  },
];

// 左侧控件列表与初始化的控件属性
// props.slotName,会在formitem级别生成一个slot,并绑定当前record值
// 属性props，类型为对象，不能为undefined或是null。
export const commonComponents: IVFormComponent[] = [
  {
    component: 'InputGuid',
    label: 'GUID主键',
    icon: 'bi:braces-asterisk',
    field: '',
    colProps: { span: 24 },
    componentProps: {},
  },
  {
    component: 'Input',
    label: '输入框',
    icon: 'bi:braces',
    field: '',
    colProps: { span: 24 },
    componentProps: {
      type: 'text',
    },
  },
  {
    component: 'InputNumber',
    label: '数字输入框',
    icon: 'ant-design:field-number-outlined',
    field: '',
    colProps: { span: 24 },
    componentProps: { style: 'width:200px' },
  },
  {
    component: 'InputTextArea',
    label: '文本域',
    icon: 'ant-design:file-text-outlined',
    field: '',
    colProps: { span: 24 },
    componentProps: {},
  },
  {
    component: 'Radio',
    label: '单选框',
    icon: 'carbon:radio-button-checked',
    field: '',
    colProps: { span: 24 },
    componentProps: {},
  },
  {
    component: 'RadioGroup',
    label: '单选框-组',
    icon: 'bi:ui-radios-grid',
    field: '',
    colProps: { span: 24 },
    componentProps: {
      options: [
        {
          label: '选项1',
          value: '1',
        },
        {
          label: '选项2',
          value: '2',
        },
      ],
    },
  },
  {
    component: 'Checkbox',
    label: '复选框',
    icon: 'bi:check-square',
    colProps: { span: 24 },
    field: '',
    componentProps: {},
  },
  {
    component: 'CheckboxGroup',
    label: '复选框-组',
    icon: 'bi:ui-checks-grid',
    field: '',
    colProps: { span: 24 },
    componentProps: {
      options: [
        {
          label: '选项1',
          value: '1',
        },
        {
          label: '选项2',
          value: '2',
        },
      ],
    },
  },
  {
    component: 'TimePicker',
    label: '时间选择',
    icon: 'healthicons:i-schedule-school-date-time',
    field: '',
    colProps: { span: 24 },
    componentProps: {},
  },
  {
    component: 'DatePicker',
    label: '日期选择',
    icon: 'healthicons:i-schedule-school-date-time-outline',
    field: '',
    colProps: { span: 24 },
    componentProps: {},
  },
  {
    component: 'MonthPicker',
    label: '月份选择',
    icon: 'healthicons:i-schedule-school-date-time-outline',
    field: '',
    colProps: { span: 24 },
    componentProps: {
      placeholder: '请选择月份',
    },
  },
  {
    component: 'RangePicker',
    label: '日期范围',
    icon: 'healthicons:i-schedule-school-date-time-outline',
    field: '',
    colProps: { span: 24 },
    componentProps: {
      placeholder: ['开始日期', '结束日期'],
    },
  },
  {
    component: 'Switch',
    label: '开关',
    icon: 'bi:toggle-off',
    field: '',
    colProps: { span: 24 },
    componentProps: {},
  },
  {
    component: 'Button',
    label: '按钮组件',
    icon: 'ant-design:build-outlined',
    field: '',
    colProps: { span: 24 },
    hiddenLabel: true,
    componentProps: {
      type: 'default',
      shape: 'default',
      size: 'middle',
      icon: '',
      clickCode: '',
    },
  },
  {
    component: 'Select',
    label: '下拉选择',
    icon: 'gg:select',
    field: '',
    dataType:"1",
    dataCode: '',
    colProps: { span: 24 },
    componentProps: {
      options: [
        {
          label: '选项1',
          value: '1',
        },
        {
          label: '选项2',
          value: '2',
        },
      ],
    },
  },
  {
    component: 'TreeSelect',
    label: '树形选择',
    icon: 'clarity:tree-view-line',
    field: '',
    colProps: { span: 24 },
    componentProps: {
      treeData: [
        {
          label: '选项1',
          value: '1',
          children: [
            {
              label: '选项3',
              value: '3',
            },
          ],
        },
        {
          label: '选项2',
          value: '2',
        },
      ],
    },
  },
  {
    component: 'Cascader',
    label: '级联选择',
    icon: 'ant-design:block-outlined',
    field: '',
    colProps: { span: 24 },
    componentProps: {
      options: [
        {
          label: '选项1',
          value: '1',
          children: [
            {
              label: '选项3',
              value: '3',
            },
          ],
        },
        {
          label: '选项2',
          value: '2',
        },
      ],
    },
  },
  {
    component: 'Transfer',
    label: '穿梭框',
    icon: 'bx:bx-transfer-alt',
    field: '',
    colProps: { span: 24 },
    componentProps: {
      titles: ['', ''],
      dataSource: [
        {
          key: 'key-1',
          title: '标题1',
          description: '描述1',
          disabled: false,
        },
        {
          key: 'key-2',
          title: '标题2',
          description: '描述2',
          disabled: false,
        },
        {
          key: 'key-3',
          title: '标题3',
          description: '描述3',
          disabled: false,
        },
      ],
      targetKeys: [],
      // selectedKeys: [],
    },
  },
];

export const baseComponents: IVFormComponent[] = [
  {
    component: 'InputCountDown',
    label: '倒计时输入',
    icon: 'ant-design:hourglass-outlined',
    colProps: { span: 24 },
    field: '',
    componentProps: {},
  },
  {
    component: 'IconPicker',
    label: '图标选择器',
    icon: 'bi:grid',
    colProps: { span: 24 },
    field: '',
    componentProps: {},
  },
  {
    component: 'StrengthMeter',
    label: '密码强度',
    icon: 'wpf:password1',
    colProps: { span: 24 },
    field: '',
    componentProps: {},
  },
  {
    component: 'AutoComplete',
    label: '自动完成',
    icon: 'bi:check2-circle',
    colProps: { span: 24 },
    field: '',
    componentProps: {
      placeholder: '请输入正则表达式',
      options: [
        {
          value: '/^(?:(?:\\+|00)86)?1[3-9]\\d{9}$/',
          label: '手机号码',
        },
        {
          value: '/^((ht|f)tps?:\\/\\/)?[\\w-]+(\\.[\\w-]+)+:\\d{1,5}\\/?$/',
          label: '网址带端口号',
        },
      ],
    },
  },
  {
    component: 'Slider',
    label: '滑动输入条',
    icon: 'vaadin:slider',
    field: '',
    colProps: { span: 24 },
    componentProps: {},
  },
  {
    component: 'Rate',
    label: '评分',
    icon: 'ic:outline-star-rate',
    field: '',
    colProps: { span: 24 },
    componentProps: {},
  },
  // {
  //   component: 'ColorPicker',
  //   label: '颜色选择器',
  //   icon: 'carbon:color-palette',
  //   field: '',
  //   colProps: { span: 24 },
  //   componentProps: {
  //     defaultValue: '',
  //     value: '',
  //   },
  // },
  {
    component: 'CreateUser',
    type: 'createuser',
    label: '创建人员',
    icon: 'mdi:account-check',
    colProps: { span: 24 },
    field: '',
    componentProps: {},
  },
  {
    component: 'ModifyUser',
    type: 'modifyuser',
    label: '修改人员',
    icon: 'mdi:account-edit',
    colProps: { span: 24 },
    field: '',
    componentProps: {},
  },
  {
    component: 'CreateTime',
    type: 'createtime',
    label: '创建时间',
    icon: 'ic:outline-event-available',
    colProps: { span: 24 },
    field: '',
    componentProps: {},
  },
  {
    component: 'ModifyTime',
    type: 'modifytime',
    label: '修改时间',
    icon: 'ic:outline-event',
    colProps: { span: 24 },
    field: '',
    componentProps: {},
  },
  {
    component: 'FileUpload',
    label: '文件上传',
    icon: 'ant-design:file-add-outlined',
    field: '',
    colProps: { span: 24 },
    componentProps: {
      api: fileUploadApi,
      maxNumber: 10,
      maxSize: 2,
      name: 'files',
      action: '/api/Files/Upload',
      server: '',
    },
  },
  {
    component: 'ImageUpload',
    label: '图片上传',
    icon: 'ant-design:file-image-outlined',
    field: '',
    colProps: { span: 24 },
    componentProps: {
      api: fileUploadApi,
      maxNumber: 10,
      accept: ['png', 'jpeg', 'jpg'],
      maxSize: 2,
      name: 'files',
      action: '/api/Files/Upload',
      server: '',
    },
  },
  {
    component: 'VideoUpload',
    label: '视频上传',
    icon: 'ant-design:video-camera-outlined',
    field: '',
    colProps: { span: 24 },
    componentProps: {
      api: fileUploadApi,
      maxNumber: 10,
      accept: ['mp4', 'mov', 'avi'],
      maxSize: 100,
      name: 'files',
      action: '/api/Files/Upload',
      server: '',
    },
  },
  {
    component: 'slot',
    label: '插槽',
    icon: 'bi:inboxes',
    field: '',
    colProps: { span: 24 },
    componentProps: {
      slotName: 'slotName',
    },
  },
  {
    component: 'Location',
    label: '获取位置',
    icon: 'ant-design:environment-outlined',
    field: '',
    colProps: { span: 24 },
    componentProps: {
      api: () => 1,
      maxNumber: 10,
      accept: ['mp4', 'mov', 'avi'],
      maxSize: 100,
    },
  },
  {
    component: 'Divider',
    label: '分割线',
    icon: 'radix-icons:divider-horizontal',
    colProps: { span: 24 },
    field: '',
    componentProps: {
      orientation: 'center',
      dashed: true,
    },
  },
];

// // https://next.antdv.com/components/transfer-cn
// const transferControl = ;

// baseComponents.push(transferControl);

export const layoutComponents: IVFormComponent[] = [
  {
    component: 'Tabs',
    label: '选项卡',
    icon: 'ant-design:database-outlined',
    colProps: { span: 24 },
    field: 'Tabs',
    componentProps: {
      options: [
        {
          label: '选项卡1',
          value: '1',
          children: [],
        },
        {
          label: '选项卡2',
          value: '2',
          children: [],
        },
      ],
    },
  },
  {
    field: '',
    component: 'Grid',
    label: '设计子表',
    icon: 'bi:list-ul',
    type: 'subTable',
    componentProps: {},
    columns: [
      {
        span: 24,
        children: [],
      },
    ],
    colProps: { span: 24 },
    options: {
      gutter: 0,
    },
  },
  {
    field: '',
    component: 'Card',
    label: '卡片布局',
    icon: 'bi:card-text',
    componentProps: {},
    columns: [
      {
        span: 24,
        children: [],
      },
    ],
    colProps: { span: 24 },
    options: {
      gutter: 0,
    },
  },
  {
    component: 'CardGroup',
    label: '卡片组',
    icon: 'bi:card-list',
    colProps: { span: 24 },
    field: '',
    componentProps: {
      options: [
        {
          label: '卡片1',
          value: '1',
          field: 'use_card_1',
          children: [],
        },
        {
          label: '卡片2',
          field: 'use_card_2',
          value: '2',
          children: [],
        },
      ],
    },
  },
  {
    field: '',
    component: 'Grid',
    label: '栅格布局',
    icon: 'bi:border-all',
    componentProps: {},
    columns: [
      {
        span: 24,
        children: [],
      },
    ],
    colProps: { span: 24 },
    options: {
      gutter: 0,
    },
  },
];
