<template>
  <baseTabPane :label="getI18nLabel(widget.options.label)" ref="baseTabRef" :visible="!widget.options.hidden" v-show="!widget.options.hidden" :showFold="true"
               :defaultShowContent="!widget.options.defaultCollapse">

    <template #button>
<!--      <div class='btn-close-open' @click="opeaShowCont()">
        <span v-if="showStatus==true"><i class="el-icon-arrow-up"></i>收起</span>
        <span v-else><i class="el-icon-arrow-down"></i>展开</span>
      </div>-->
      <template v-for="(subWidget, swIdx) in widget.buttonWidgetList">
        <template v-if="'container' === subWidget.category">
          <component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx"
                     :parent-list="widget.buttonWidgetList"
                     :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.buttonWidgetList"
                     :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>
    <template #default>
      <div :class="{'hidden':!showStatus}">
        <template>
          <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>
    </template>
  </baseTabPane>
</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'

export default {
  name: "DetailPaneItem",
  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() {
    this.handleOnMounted();
  },
  data() {
    return {
      showStatus:true,
    }
  },
  methods: {
    opeaShowCont(){
      this.showStatus = !this.showStatus
      console.log(this.showStatus)
    }
  }
}
</script>

<style lang="scss" scoped>
.grid-container {
  min-height: 50px;
  //line-height: 48px;
  //padding: 6px;
  outline: 1px dashed #336699;

  > div {
    height: 100%;
  }

  .form-widget-list {
    // min-height: 28px;
    height: 100%;
  }

}

.grid-container.selected, .grid-cell.selected {
  outline: 2px solid $--color-primary !important;
}

.grid-cell {
  min-height: 80px;
  //margin: 6px 0;  /* 设置了margin，栅格列的offset、push、pull会失效！！ */
  padding: 3px;
  outline: 1px dashed #336699;
  position: relative;

  > div {
    height: 100%;
  }

  .form-widget-list {
    min-height: 28px;
    height: 100%
  }

}
</style>
