<template>
  <div class="tree-container">
    <div class="tree-box fl">
      <div class="tit" @click="handleTreeLabelClick"><b>{{widget.options.treeLabel}}</b></div>
      <template v-if="!!widget.leftWidgetList && (widget.leftWidgetList.length > 0)">
        <template v-for="(subWidget, swIdx) in widget.leftWidgetList">
          <template v-if="'container' === subWidget.category">
            <component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx"
                       :parent-list="widget.leftWidgetList"
                       :index-of-parent-list="swIdx" :parent-widget="widget">
              <!-- 递归传递插槽！！！ -->
              <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
                <slot :name="slot" v-bind="scope"/>
              </template>
            </component>
          </template>
          <template v-else>
            <component :is="subWidget.type + '-widget'" :field="subWidget" :designer="null" :key="swIdx"
                       :parent-list="widget.leftWidgetList"
                       :index-of-parent-list="swIdx" :parent-widget="widget">
              <!-- 递归传递插槽！！！ -->
              <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
                <slot :name="slot" v-bind="scope"/>
              </template>
            </component>
          </template>
        </template>
      </template>
    </div>
    <label id="labBtn">
      <div class="icon">
        <i class="el-icon-more"></i>
        <i class="el-icon-more"></i>
      </div>
    </label>
    <div class="main-right fr" style="padding-left:6px;">
      <div class="grid-height">
        <template v-if="!!widget.widgetList && (widget.widgetList.length > 0)">
          <template v-for="(subWidget, swIdx) in widget.widgetList">
            <template v-if="'container' === subWidget.category">
              <component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx"
                         :parent-list="widget.widgetList"
                         :index-of-parent-list="swIdx" :parent-widget="widget">
                <!-- 递归传递插槽！！！ -->
                <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
                  <slot :name="slot" v-bind="scope"/>
                </template>
              </component>
            </template>
            <template v-else>
              <component :is="subWidget.type + '-widget'" :field="subWidget" :designer="null" :key="swIdx"
                         :parent-list="widget.widgetList"
                         :index-of-parent-list="swIdx" :parent-widget="widget">
                <!-- 递归传递插槽！！！ -->
                <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
                  <slot :name="slot" v-bind="scope"/>
                </template>
              </component>
            </template>
          </template>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import emitter from '../../../../components/xform/utils/emitter'
import i18n from "../../../../components/xform/utils/i18n"
import refMixin from "../../../../components/xform/form-render/refMixin"
import containerItemMixin from "./containerItemMixin"
import FieldComponents from '../../../../components/xform/form-designer/form-widget/field-widget/index'
import {treeScollx} from '../../../../utils/global.js';

export default {
  name: "tree-pane-item",
  componentName: 'ContainerItem',
  mixins: [emitter, i18n, refMixin, containerItemMixin],
  components: {
    ...FieldComponents,
  },
  props: {
    widget: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
  },
  inject: ['refList', 'globalModel', 'previewState'],
  computed: {
    customClass() {
      return this.widget.options.customClass || ''
    }
  },
  watch: {
    //
  },
  created() {
    this.initRefList()
    this.handleOnCreated();
  },
  mounted() {
    treeScollx({target: this, type: 'default'});
    this.handleOnMounted();
  },
  methods: {
    handleTreeLabelClick(){
      this.handleCustomEvent(this.widget.options.onTreeLabelClick);
    }
  }
}
</script>


<style scoped>

</style>
