<template>
  <el-scrollbar class="side-scroll-bar" :style="{height: scrollerHeight}">
    <div class="panel-container">

      <el-tabs v-model="firstTab" class="no-bottom-margin indent-left-margin">
        <el-tab-pane v-if="showComponentLib" name="componentLib">
          <span slot="label"><i class="el-icon-set-up"></i> {{ i18nt('designer.componentLib') }}</span>

          <el-collapse v-model="activeNames" class="widget-collapse">
            <el-collapse-item name="1" :title="i18nt('designer.containerTitle')">
              <draggable tag="ul" :list="containers" :group="{name: 'dragGroup', pull: 'clone', put: false}"
                         :clone="handleContainerWidgetClone" ghost-class="ghost" :sort="false"
                         :move="checkContainerMove" @end="onContainerDragEnd">
                <li v-for="(ctn, index) in containers" :key="index" class="container-widget-item"
                    :title="ctn.displayName"
                    @dblclick="addContainerByDbClick(ctn)">
              <span><svg-icon :icon-class="ctn.icon" class-name="color-svg-icon"/>
                <span>{{ i18n2t(`designer.widgetLabel.${ctn.type}`, `extension.widgetLabel.${ctn.type}`) }}</span>
              </span>
                </li>
              </draggable>
            </el-collapse-item>

            <el-collapse-item name="2" :title="i18nt('designer.basicFieldTitle')">
              <draggable tag="ul" :list="basicFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
                         :move="checkFieldMove"
                         :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
                <li v-for="(fld, index) in basicFields" :key="index" class="field-widget-item" :title="fld.displayName"
                    @dblclick="addFieldByDbClick(fld)">
                  <span><svg-icon :icon-class="fld.icon"
                                  class-name="color-svg-icon"/><span>{{
                      i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
                    }}</span></span>
                </li>
              </draggable>
            </el-collapse-item>

            <el-collapse-item name="3" :title="i18nt('designer.advancedFieldTitle')">
              <draggable tag="ul" :list="advancedFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
                         :move="checkFieldMove"
                         :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
                <li v-for="(fld, index) in advancedFields" :key="index" class="field-widget-item"
                    :title="fld.displayName"
                    @dblclick="addFieldByDbClick(fld)">
              <span><svg-icon :icon-class="fld.icon" class-name="color-svg-icon"/>
              <span>{{ i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`) }}</span>
              </span>
                </li>
              </draggable>
            </el-collapse-item>

            <!-- -->
            <el-collapse-item name="4" :title="i18nt('designer.customFieldTitle')">
              <draggable tag="ul" :list="customFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
                         :move="checkFieldMove"
                         :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
                <li v-for="(fld, index) in customFields" :key="index" class="field-widget-item" :title="fld.displayName"
                    @dblclick="addFieldByDbClick(fld)">
              <span>
                <svg-icon :icon-class="fld.icon" class-name="color-svg-icon"/>
                <span>{{ i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`) }}</span>
              </span>
                </li>
              </draggable>
            </el-collapse-item>
            <!-- -->


          </el-collapse>

        </el-tab-pane>
        <el-tab-pane v-if="showMetadataLib" name="metadataLib">
          <span slot="label"><i class="el-icon-set-up"></i> {{ i18nt('designer.metadataLib') }}</span>

          <el-collapse v-model="metadataActiveNames" class="widget-collapse">
            <el-collapse-item name="0" :title="i18nt('designer.containerTitle')">
              <draggable tag="ul" :list="commonContainers" :group="{name: 'dragGroup', pull: 'clone', put: false}"
                         :clone="handleContainerWidgetClone" ghost-class="ghost" :sort="false"
                         :move="checkContainerMove" @end="onContainerDragEnd">
                <li v-for="(ctn, index) in commonContainers" :key="index" class="container-widget-item"
                    :title="ctn.displayName"
                    @dblclick="addContainerByDbClick(ctn)">
              <span><svg-icon :icon-class="ctn.icon" class-name="color-svg-icon"/>
                <span>{{ i18n2t(`designer.widgetLabel.${ctn.type}`, `extension.widgetLabel.${ctn.type}`) }}</span>
              </span>
                </li>
              </draggable>
            </el-collapse-item>
            <el-collapse-item name="2" :title="i18nt('designer.basicFieldTitle')">
              <draggable tag="ul" :list="basicFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
                         :move="checkFieldMove"
                         :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
                <li v-for="(fld, index) in basicFields" :key="index" class="field-widget-item" :title="fld.displayName"
                    @dblclick="addFieldByDbClick(fld)">
                  <span><svg-icon :icon-class="fld.icon"
                                  class-name="color-svg-icon"/><span>{{
                      i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
                    }}</span></span>
                </li>
              </draggable>
            </el-collapse-item>
            <el-collapse-item name="3" :title="i18nt('designer.advancedFieldTitle')">
              <draggable tag="ul" :list="commonAdvancedFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
                         :move="checkFieldMove"
                         :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
                <li v-for="(fld, index) in commonAdvancedFields" :key="index" class="field-widget-item"
                    :title="fld.displayName"
                    @dblclick="addFieldByDbClick(fld)">
              <span><svg-icon :icon-class="fld.icon" class-name="color-svg-icon"/>
              <span>{{ i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`) }}</span>
              </span>
                </li>
              </draggable>
            </el-collapse-item>



            <el-collapse-item v-if="!!metaFields.main.entityName" name="1" :title="metaFields.main.entityLabel">
              <draggable tag="ul" :list="metaFields.main.fieldList"
                         :group="{name: 'dragGroup', pull: 'clone', put: false}"
                         :move="checkFieldMove"
                         :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
                <li v-for="(fld, index) in metaFields.main.fieldList" :key="index" class="field-widget-item"
                    :title="fld.displayName"
                    @dblclick="addFieldByDbClick(fld)">
                  <span><svg-icon :icon-class="fld.icon"
                                  class-name="color-svg-icon"/><span>{{ getMetaFieldLabel(fld) }}</span></span>
                </li>
              </draggable>
            </el-collapse-item>

            <template v-if="metaFields.detail && metaFields.detail.length >0">
              <el-collapse-item v-for="(item,index0) in metaFields.detail" :key="index0" :name="index0+'2'"
                                :title="item.entityLabel">
                <draggable tag="ul" :list="item.fieldList" :group="{name: 'dragGroup', pull: 'clone', put: false}"
                           :move="checkFieldMove"
                           :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
                  <li v-for="(fld, index) in item.fieldList" :key="index" class="field-widget-item"
                      :title="fld.displayName"
                      @dblclick="addFieldByDbClick(fld)">
              <span><svg-icon :icon-class="fld.icon" class-name="color-svg-icon"/>
              <span>{{ getMetaFieldLabel(fld) }}</span>
              </span>
                  </li>
                </draggable>
              </el-collapse-item>
            </template>
          </el-collapse>
        </el-tab-pane>
        <el-tab-pane name="businessLib">
          <span slot="label"><i class="el-icon-set-up"></i> {{ i18nt('业务组件') }}</span>
          <el-collapse v-model="businessActiveNames" class="widget-collapse">
            <el-collapse-item name="0" :title="i18nt('业务组件')">
              <draggable tag="ul" :list="businessFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
                         :move="checkFieldMove"
                         :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
                <li v-for="(fld, index) in businessFields" :key="index" class="field-widget-item"
                    :title="fld.displayName"
                    @dblclick="addFieldByDbClick(fld)">
              <span><svg-icon :icon-class="fld.icon" class-name="color-svg-icon"/>
              <span>{{ i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`) }}</span>
              </span>
                </li>
              </draggable>
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
        <!--       <el-tab-pane v-if="showFormTemplates" name="formLib" style="padding: 8px">
                <span slot="label"><i class="el-icon-c-scale-to-original"></i> {{i18nt('designer.formLib')}}</span>

                <template v-for="(ft, idx) in formTemplates">
                  <el-card :key="idx" :bord-style="{ padding: '0' }" shadow="hover" class="ft-card">
                    <el-popover placement="right" trigger="hover">
                      <img slot="reference" :src="ft.imgUrl" style="width: 200px">
                      <img :src="ft.imgUrl" style="height: 600px;width: 720px">
                    </el-popover>
                    <div class="bottom clear-fix">
                      <span class="ft-title">#{{idx+1}} {{ft.title}}</span>
                      <el-button type="text" class="right-button" @click="loadFormTemplate(ft.jsonUrl)">
                        {{i18nt('designer.hint.loadFormTemplate')}}</el-button>
                    </div>
                  </el-card>
                </template>
              </el-tab-pane>-->

      </el-tabs>

    </div>
  </el-scrollbar>
</template>

<script>
import Draggable from 'vuedraggable'
import indexMixin from './indexMixin.js';

export default {
  name: "FieldPanel",
  mixins: [indexMixin],
  components: {
    Draggable,
  }
}
</script>

<style lang="scss" scoped>

.color-svg-icon {
  color: $--color-primary;
}

.side-scroll-bar {
  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}

// div.panel-container {
//   padding-bottom: 10px;
// }

.no-bottom-margin ::v-deep .el-tabs__header {
  margin-bottom: 0;
}

.indent-left-margin {
  ::v-deep .el-tabs__nav {
    margin-left: 20px;
  }
}

.el-collapse-item ::v-deep ul > li {
  list-style: none;
}

.widget-collapse {
  border-top-width: 0;

  ::v-deep .el-collapse-item__header {
    margin-left: 8px;
    font-weight: bold;
  }

  ::v-deep .el-collapse-item__content {
    padding-bottom: 6px;

    ul {
      padding-left: 10px; /* 重置IE11默认样式 */
      margin: 0; /* 重置IE11默认样式 */
      margin-block-start: 0;
      margin-block-end: 0.25em;
      padding-inline-start: 10px;

      &:after {
        content: "";
        display: block;
        clear: both;
      }

      .container-widget-item, .field-widget-item {
        display: inline-block;
        height: 35px;
        line-height: 35px;
        width: 117px;
        float: left;
        margin: 2px 6px 3px 0;
        cursor: move;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        background: #f1f2f3;
        font-size: 12px;
        padding-left: 12px;

        svg {
          display: inline-block;
          //margin: 10px auto 0;
          width: 1.25em;
          height: 1.25em;
          vertical-align: middle;
          margin-right: 5px;

        }

        span > span {
          vertical-align: middle;
        }
      }

      .container-widget-item:hover, .field-widget-item:hover {
        background: #EBEEF5;
        outline: 1px solid $--color-primary;
      }

      .drag-handler {
        position: absolute;
        top: 0;
        left: 160px;
        background-color: #dddddd;
        border-radius: 5px;
        padding-right: 5px;
        font-size: 11px;
        color: #666666;
      }
    }
  }
}

.el-card.ft-card {
  border: 1px solid #8896B3;
}

.ft-card {
  margin-bottom: 10px;

  .bottom {
    margin-top: 10px;
    line-height: 12px;
  }

  .ft-title {
    font-size: 13px;
    font-weight: bold;
  }

  .right-button {
    padding: 0;
    float: right;
  }

  .clear-fix:before, .clear-fix:after {
    display: table;
    content: "";
  }

  .clear-fix:after {
    clear: both;
  }

}

</style>
