//導入自定義組件
import MyButton from './button.Vue';
import FcDesigner from '@form-create/designer';


//掛載自定義組件
FcDesigner.component('MyButton', MyButton);
//或者全局掛載
app.component('MyButton', MyButton);

const buttonRule = {
    //插入菜單位置
    menu: 'aide',
    //圖標
    icon: 'icon-button',
    //名稱
    label: '按鈕',
    //id,唯一!
    name: 'MyButton',
    //是否可以操作, 除了容器類組件建議為true !
    mask: true,//定義組件的渲染規則
    rule({t}) {
          //自定義組件的生成規則
        return {
            type: 'MyButton',
            props: {},
            children: ['按鈕'],
        };
    },
      //自定義組件的屬性配置
    props(_, {t}) {
        return [{
            //修改rule.children[0]
            type: 'input',
              title: '內容',
            field: 'formCreateChild',
        }, {
            //修改rule.props.size
            type: 'select',
              title: '尺寸',
            field: 'size',
            options: [
              {label: 'large', value: 'large'}, 
              {label: 'default', value: 'default'}, 
              {label: 'small',value: 'small'}
            ]
        }];
    }
};

//掛載拖拽規則
this.$refs.designer.addComponent(buttonRule);

this.$refs.designer.appendMenuItem('main', {
    icon: 'icon-button',
    label: '按鈕',
    name: 'MyButton',
});