<template>
  <container-item-wrapper :widget="widget">

    <div :key="widget.id" class="tab-container"
         v-show="!widget.options.hidden">
      <div class="box-style" :class="{'boxfull': widget.options.isFullscreen,'notitle' : widget.options.label==''}" :style="{'height': widget.options.isFullscreen ? '' : widget.options.height}">
        <div class="t" :class="widget.options.styleTitClass"><b v-html="widget.options.label"></b></div>
        <div class="cont">
          <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"
                  formItemType="vxe-form-item"
                >
                  <!-- 递归传递插槽！！！ -->
                  <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"
                  formItemType="vxe-form-item"
                >
                  <!-- 递归传递插槽！！！ -->
                  <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>

  </container-item-wrapper>
</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 ContainerItemWrapper from './container-item-wrapper'
  import containerItemMixin from "./containerItemMixin";
  import FieldComponents from '../../../../components/xform/form-designer/form-widget/field-widget/index'

  export default {
    name: "vf-box-item",
    componentName: 'ContainerItem',
    mixins: [emitter, i18n, refMixin, containerItemMixin],
    components: {
      ContainerItemWrapper,
      ...FieldComponents,
    },
    props: {
      widget: Object,
    },
    inject: ['refList', 'sfRefList', 'globalModel'],
    data() {
      return {
        activeTabName: '',
      }
    },
    computed: {
      visibleTabs() {
        return this.widget.tabs.filter(tp => {
          return !tp.options.hidden
        })
      },

    },
    created() {
      this.initRefList()
    },
    mounted() {
    },
    beforeDestroy() {
      this.unregisterFromRefList()
    },
    methods: {

    },
  }
</script>

<style lang="scss" scoped>


</style>
