

<script>
/* eslint-disable */
// sd-skip-auto-import
import sdFormItemHelp from"@/common/components/sd-form/sd-form-item-help.vue";import cloneDeep from"lodash.clonedeep";import util from"./util";import components from"./_import-components/sd-component-wrapper-import";var _render=function e(){var t=this,i=t._self._c;return i("div",{class:{[t.$style.selected]:t.designer.selected===t.item,[t.$style.item]:true,[t.$style.noLabel]:t.item.attrFD.hideLabel,[t.$style.layout]:t.isLayout,[t.$style.simple]:t.simple,"sd-drag-handle":!t.isLayout,"sd-layout-component":t.isLayout,"sd-component-wrapper":true},style:{width:t.simple?void 0:1/t.designer.formProps.attrFD.columns*t.item.attrFD.columns*100+"%"},on:{click:function(e){e.stopPropagation();return(()=>t.componentClick(t.item)).apply(null,arguments)}}},[i("a-form-model-item",{class:t.$style.formItem,attrs:{label:t.item.attrFD.hideLabel&&!t.simple?null:t.item.caption,required:t.item.required}},[t.item.attr&&!t.simple?i(t.getRenderFormLibrary(t.item.attrFD.cid),{ref:"editor",tag:"component",attrs:{"designer-data":t.item,selected:t.designer.selected===t.item,value:t.item.attrFD.defaultValue}}):t._e()],1),!t.simple?i("div",{class:t.$style.description},[!t.item.attrFD.popoverDescription?i("sd-form-item-help",{attrs:{html:t.item.attrFD.description}}):t._e()],1):t._e(),"title"!==t.item.dataType?i("div",{class:t.$style.tools},[-1===t.designer.disabledCids.indexOf(t.item.attrFD.cid)&&!t.simple&&!t.isLayout?i("a-icon",{attrs:{title:"复制",type:"copy"},on:{click:function(e){e.stopPropagation();return t.copyComponent.apply(null,arguments)}}}):t._e(),t.isLayout?i("a-icon",{staticClass:"sd-drag-handle",attrs:{title:"移动",type:"drag"}}):t._e(),!t.item.isDbSynch?i("a-icon",{attrs:{title:"删除",type:"delete"},on:{click:function(e){e.stopPropagation();return t.deleteComponent.apply(null,arguments)}}}):t._e()],1):t._e(),!t.simple?i("div",{class:t.$style.icons},[false===t.item.mobileVisible?i("a-icon",{attrs:{title:"移动端不显示",type:"mobile"}}):t._e()],1):t._e()],1)};var staticRenderFns=[];_render._withStripped=true;export default{name:"SdComponentWrapper",components:{sdFormItemHelp:sdFormItemHelp,...components},inject:{designer:{},layoutEditor:{default:void 0}},props:{component:{type:Object,required:true},simple:{type:Boolean,default:false},list:{type:Array,required:true}},data(){return{}},computed:{item(){return this.component},isLayout(){return"layout"===this.item.attrFD.category}},methods:{getRenderFormLibrary(e){const t=this.designer.util.getComponentByID(e).metaInfo;return t.component||t.runtimeComponent},componentClick(e){this.selectionChange(e.attrFD.id)},selectionChange(e){this.designer.selectionChange(e)},deleteComponent(){const e=this.list;const t=this.list.indexOf(this.item);util.processChildrenInLayout([this.item],(e=>{this.designer.visibleComponents.push(e)}),false);e.splice(t,1);this.selectionChange((e[t]||e[e.length-1])?.attrFD.id);this.designer.takeSnapshot("删除组件")},copyComponent(){const e=cloneDeep(this.designer.selected);const t=this.designer.util.getId(e.attrFD.cid);e.name=t.name;e.id=void 0;e.attrFD.id=t.id;e.isDbSynch=false;const i=this.designer.util.getComponentByID(e.attrFD.cid).updateOnCopy;i?.(e);if(this.layoutEditor?.copyComponent)this.layoutEditor.copyComponent(e,this.designer.selected);else this.list.push(e);this.designer.takeSnapshot("拷贝组件")}},render:_render,staticRenderFns:staticRenderFns};</script>

<style module lang="scss">
@use '@/common/design' as *;
.form-item {
  margin: 10px 60px 10px 0;
  pointer-events: none;
}
.item {
  position: relative;
  display: inline-block;
  vertical-align: top;
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  outline: 1px dashed $border-color-base;
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  outline-offset: -2px;
  &::before {
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 5px;
    content: '';
    background-color: $primary-color;
    transition: all 0.3s;
  }
  .tools {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    background-color: $primary-color;
    border-radius: 0 0 0 8px;
    :global(.anticon) {
      padding: 6px;
      color: $white;
    }
  }
  .icons {
    position: absolute;
    bottom: 0;
    left: 0;
    :global(.anticon) {
      margin: 6px;
      // 通过背景色画一个斜杠
      background: linear-gradient(-45deg, transparent 46%, #f008 46%, #f008 54%, transparent 54%);
      opacity: 0.6;
    }
  }
  :global(.ant-form-item-label) {
    width: 150px;
  }
  :global(.ant-form-item-control-wrapper) {
    box-sizing: border-box;
    width: 100%;
    padding-left: 150px;
    margin-left: -150px;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    filter: grayscale(1);
  }
  &.no-label {
    > .form-item {
      > :global(.ant-form-item-control-wrapper) {
        padding-left: 50px;
        margin-left: 0;
      }
    }
    .description {
      margin: 0 60px 16px;
    }
  }
}
.selected {
  background-color: $primary-2;
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  outline: none;
  &::before {
    left: 0;
    width: 100%;
  }
  > .tools {
    display: block;
  }
}
.description {
  margin-bottom: 5px;
  margin-left: 150px;
}
.item.simple {
  :global(.ant-form-item-label) {
    width: auto;
  }
  .form-item {
    margin: 5px 20px;
  }
}
.layout {
  background: none;

  > .form-item {
    pointer-events: auto;
    > :global(.ant-form-item-control-wrapper) {
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      filter: none;
    }
    .item {
      :global(.ant-form-item-control-wrapper) {
        margin-left: auto;
      }
    }
  }

  &.selected {
    outline: 1px solid $primary-color;
  }
}
</style>
