import { form, label, CATEGORIES } from '../../configuration/constants'

export default {
  // 组件名称
  name: `${form}-group`,

  // 前面板html模板
  viewTemplate() {
    return `
      <div data-gjs-type="${form}-group" class="${form}-group"><label class="${label}">双击可编辑：</label></div>
    `
  },
  // 前面板html样式
  viewStyle() {
    return `
      <style>
        .${form} {
          width: 500px;
          height: auto!important;
          padding: 16px;
          border-radius: 3px;
          border: 1px solid transparent;
        }

        .${form}-group {
          padding: 10px;
          display: flex;
          align-items: center;
        }
        .${form} .${label} {
          margin-bottom: 0;
          width: 90px;
          flex: 0 0 90px;
        }
      </style>
      `
  },

  // 编辑器右侧块管理器中显示属性配置
  blockOptions() {
    return {
      category: CATEGORIES.FORM,
      label: '表单组',
      attributes: { class: 'fa fa-cube' },
    };
  },

  spOptions() {
    return {
      author: '秋水',
      email: 'qiushui.smy@xuelangyun.com',
      docUrl: 'https://xuelangyun.yuque.com/docs/share/891e8754-8fc4-43eb-96a2-749e010e758b?# 《表单组》'
    }
  },

  // 组件属性
  componentOptions() {
    return {
      name: `${form}-group`,
      resizable: true,
      copyable: true,
      editable: true,
      traits: []
    }
  },
}
