<#if !item.isHidden()>
  <#assign selfContent>
<div class="item-field">
<#if item.render??>
${item.render.code}
<#else>
    <app-panel-field
      name='${item.name}'
      labelPos='<#if item.getLabelPos?? && item.getLabelPos()??>${item.getLabelPos()}<#else>LEFT</#if>'
      caption="<#if item.getCaption?? && item.getCaption()??>${item.getCaption()}</#if>"
      :isEmptyCaption="<#if item.isEmptyCaption?? && item.isEmptyCaption()??>${item.isEmptyCaption()?c}<#else>false</#if>"
      :error='detailsModel.${item.name}.error'
      :data='data'
      :value='data.${item.name}'
      :itemRules="rules.${item.name}">
    ${P.getEditorCode(item, "PANELEDITOR.vue").code}
    </app-panel-field>
</#if>
</div>
  </#assign>

<#ibizinclude>
./@MACRO/PLAYOUT.vue.ftl
</#ibizinclude>
  <#if item.getParentLayoutMode()=='FLEX'>
<div v-show="detailsModel.${item.name}.visible" style="${flexAttr}<#if item.getWidth() gt 0>width: ${item.getWidth()?c}px;</#if><#if item.getHeight() gt 0>height: ${item.getHeight()?c}px;</#if><#if item.getPSSysCss()??>${item.getPSSysCss().getRawCssStyle()}</#if>" class="app-layoutpanel-field <#if item.getPSSysCss?? && item.getPSSysCss()??> ${item.getPSSysCss().getCssName()}</#if>">
    ${content}
</div>
  <#else>
<i-col v-show="detailsModel.${item.name}.visible" ${tableAttr} style="${flexAttr}<#if item.getWidth() gt 0>width: ${item.getWidth()?c}px;</#if><#if item.getHeight() gt 0>height: ${item.getHeight()?c}px;</#if><#if item.getPSSysCss()??>${item.getPSSysCss().getRawCssStyle()}</#if>" class="app-layoutpanel-field<#if item.getPSSysCss()??> ${item.getPSSysCss().getCssName()}</#if>">
    ${content}
</i-col>
  </#if>
</#if>