import Vue from 'vue';
// 输入框
import Input from '@ued_fpi/element-ui/packages/input';
// 下拉框
import Select from '../components/dynamic-select.vue';
// 单选框
import Radio from '../components/dynamic-radio.vue';
// 多选框
import Checkbox from '../components/dynamic-checkbox.vue';
// 开关
import Switch from '@ued_fpi/element-ui/packages/switch';
// 颜色选择器
import ColorPicker from '@ued_fpi/element-ui/packages/color-picker';
// 时间选择器
import TimePicker from '@ued_fpi/element-ui/packages/time-picker';
// 日期选择器
import DatePicker from '@ued_fpi/element-ui/packages/date-picker';

// 预设组件
export const componentList = [
  // 输入框，默认可清除
  {
    name: 'input',
    components: Input,
    defaultValue: '',
    defaultAttrs: {
      clearable: true
    }
  },
  // 下拉框，默认宽度100%，可清除
  {
    name: 'select',
    components: Select,
    defaultValue: '',
    defaultAttrs: {
      clearable: true
    },
    defaultStyles: {
      width: '100%'
    }
  },
  // 下拉多选框，默认宽度100%，可清除
  {
    name: 'multipleSelect',
    components: Select,
    defaultValue: [],
    defaultAttrs: {
      clearable: true,
      multiple: true
    },
    defaultStyles: {
      width: '100%'
    }
  },
  // 单选框
  {
    name: 'radio',
    components: Radio,
    defaultValue: ''
  },
  // 多选框
  {
    name: 'checkbox',
    components: Checkbox,
    defaultValue: []
  },
  // 开关
  {
    name: 'switch',
    components: Switch
  },
  // 颜色选择器
  {
    name: 'colorPicker',
    components: ColorPicker
  },
  // 时间选择器
  {
    name: 'timePicker',
    components: TimePicker,
    defaultStyles: {
      width: '100%'
    }
  },
  // 日期选择器
  {
    name: 'datePicker',
    components: DatePicker,
    defaultStyles: {
      width: '100%'
    }
  }
];

// 已注册组件tagName和component的映射
export const registedComponentMapping = {};

// 组件注册方法
// 为了避免和全局组件冲突，tagName需要随机生成，生成规则：name加随机数
export const regist = (name, components, defaultValue = undefined, defaultAttrs = {}, defaultStyles = {}) => {
  const aliasName = name + Math.random().toString().slice(2);
  Vue.component(aliasName, components);
  registedComponentMapping[name] = {
    tagName: aliasName,
    defaultValue,
    defaultAttrs,
    defaultStyles
  };
};

// 预注册组件
for (const item of componentList) {
  regist(item.name, item.components, item.defaultValue, item.defaultAttrs, item.defaultStyles);
}

export default regist;
