<template>
  <div class="grid-cell" ref="baseTabRef"
       :class="[customClass]"
       :key="widget.id" :visible="!widget.options.hidden">
    <div >
      <div class="h5-title">
        <b>{{ widget.options.label }}</b>
      </div>
      <div class="h5-form-box">
          <transition-group name="fade" tag="div" class="form-widget-list">
            <template v-for="(subWidget, swIdx) in widget.panes">
              <template v-if="'container' === subWidget.category">
                <component
                  :is="subWidget.type + '-widget'"
                  :widget="subWidget"
                  :key="subWidget.id"
                  :parent-list="widget.panes"
                  :index-of-parent-list="swIdx"
                  :parent-widget="widget"
                ></component>
              </template>
              <template v-else>
                <component
                  :is="subWidget.type + '-widget'"
                  :field="subWidget"
                  :key="subWidget.id"
                  :parent-list="widget.panes"
                  :index-of-parent-list="swIdx"
                  :parent-widget="widget"
                  :design-state="true"
                ></component>
              </template>
            </template>
          </transition-group>
      </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 h5CardPaneWidget from "../../../../components/xform/form-render/container-item/h5-card-pane-item.vue";

export default {
  name: "h5-card-item",
  componentName: 'ContainerItem',
  mixins: [emitter, i18n, refMixin, containerItemMixin],
  components: {
    h5CardPaneWidget
  },
  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();
  },
  methods: {}
}
</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>
