

<script>
/* eslint-disable */
// sd-skip-auto-import
import cloneDeep from"lodash.clonedeep";import util from"./util";import components from"./_import-components/sd-main-import";var _render=function e(){var t=this,o=t._self._c;return o("a-layout",{class:t.$style.wrapper},[o("a-layout-header",{class:t.$style.header},[t._t("header")],2),t.layoutable?o("a-layout-header",{class:t.$style.header},[o("portal-target",{attrs:{name:"componentToolbar"+t.designer.formProps.tableName}})],1):t._e(),o("a-layout-content",{class:t.$style.content},[o("a-form-model",{attrs:{"label-col":{span:6},"wrapper-col":{span:18},colon:false}},[!t.formProps.attrFD.hideTableTxt?o("h2",{class:t.$style.title},[t._v(t._s(t.formProps.tableTxt))]):t._e(),o("sd-draggable",{class:t.$style.dragBox,attrs:{list:t.visibleComponents,handle:".sd-drag-handle",group:{name:t.formProps.tableName,put:[t.formProps.tableName,t.formProps.tableName+"_layout"]}},on:{update:t.onUpdate,add:e=>t.componentAdded(e,t.visibleComponents)}},t._l(t.visibleComponents,(function(e){return o("sd-component-wrapper",{key:e.attrFD.id,class:t.$style.item,attrs:{component:e,list:t.visibleComponents}})})),1),o("sd-quill-reader",{attrs:{value:t.formProps.attrFD.description}})],1)],1),o("a-layout-footer",{class:t.$style.footer},[o("a-form-model",{attrs:{colon:false}},[o("sd-draggable",{class:[t.$style.hiddenBox],attrs:{list:t.hiddenComponents,group:{name:t.formProps.tableName,put:t.canPutToInvisible}},on:{add:e=>t.componentAdded(e,t.hiddenComponents)}},t._l(t.hiddenComponents,(function(e){return o("sd-component-wrapper",{key:e.attrFD.id,class:t.$style.item,attrs:{component:e,list:t.hiddenComponents,simple:""}})})),1)],1)],1)],1)};var staticRenderFns=[];_render._withStripped=true;export default{name:"SdMain",components:components,mixins:[util.mixin],data(){return{selected:void 0}},watch:{selected:{handler:function(e,t){this.$emit("selectionChange",e)}}},methods:{addComponent(e){const t=this.designer.getCurrentComponentWrapper();if(t?.$refs.editor?.appendChild?.(e))return;const o=this.visibleComponents;this.addComponentToList(e,o)},addComponentToList(e,t){const o=cloneDeep(e);t.push(o);return this.componentAdded({pullMode:"clone",newIndex:t.length-1},t)},componentAdded(e,t){if("clone"!==e.pullMode){this.designer.takeSnapshot("移动组件");return}const o=e.newIndex;const n=t[o];n.sdNewItem=true;const s=util.createInstance(n,{formProps:this.formProps});this.$set(t,o,s);this.selected=s.attrFD.id;this.designer.takeSnapshot("新增组件");return this.selected},canPutToInvisible(e,t,o,n){if(e.options.group.name!==t.options.group.name)return false;return!o.classList.contains("sd-layout-component")},onUpdate(){this.designer.takeSnapshot("移动组件")}},render:_render,staticRenderFns:staticRenderFns};</script>

<style module lang="scss">
@use '@/common/design' as *;
.wrapper {
  .content {
    padding: $padding-lg;
    overflow: auto;
    background-color: $white;
    // 下面的是棋盘格背景
    // background-image: conic-gradient(
    //   #fff 0.25turn,
    //   $background-color-light 0.25turn 0.5turn,
    //   #fff 0.5turn 0.75turn,
    //   $background-color-light 0.75turn
    // );
    // background-size: 24px 24px;
  }
  .drag-box {
    position: relative;
    min-height: 400px;
    > :global(.sd-drag-ghost:not(.sd-component-wrapper)) {
      // 从左侧拖过来的组件，直接放在画布上时的占位符
      display: inline-block;
      width: 50%;
      padding: 10px;
      margin: 8px 0;
      vertical-align: middle;
    }
  }
}
.header {
  height: $layout-trigger-height;
  line-height: $layout-trigger-height;
  text-align: right;
  background-color: $white;
  border-bottom: 1px solid $border-color-base;
}
.footer {
  height: 71px;
  padding: 10px;
  overflow: auto;
  border-top: 1px dashed $border-color-base;
  :global(.sd-drag-ghost):not(.item) {
    display: inline-block;
    width: auto;
  }
}
.hidden-box {
  padding-left: 2.5em;
  &::before {
    position: fixed;
    width: 2em;
    margin-left: -2.5em;
    color: $text-color-secondary;
    content: '隐藏字段';
  }
  &:empty::after {
    display: block;
    width: 100%;
    line-height: 3em;
    text-align: center;
    content: '将需要隐藏的字段拖拽至此区域';
  }
}
.title {
  text-align: center;
}
</style>
