<template>
  <container-wrapper :designer="designer" :widget="widget" :parent-widget="parentWidget" :parent-list="parentList"
                     :index-of-parent-list="indexOfParentList" :class="widget.options.isFullscreen ? 'full-height':''">
    <div class="grid-container" :key="widget.id"
         :class="{'selected': selected}" @click.stop="selectWidget(widget)">
      <h5CardPaneWidget v-for="(paneWidget, index) in widget.panes" :key="index" :widget="paneWidget"
                        :designer="designer" :parent-list="widget.panes"
                        :index-of-parent-list="index" :parent-widget="widget"
                        :col-height="widget.options.colHeight" tabRef="baseTabRef"
                        :tabPaneGrade="2"></h5CardPaneWidget>

    </div>
  </container-wrapper>
</template>
<script>

import h5CardPaneWidget from "../../../../../components/xform/form-designer/form-widget/container-widget/h5-card-pane-widget.vue";
import ContainerWrapper from "../../../../../components/xform/form-designer/form-widget/container-widget/container-wrapper.vue";
import i18n from "../../../../../components/xform/utils/i18n";
import containerMixin from "../../../../../components/xform/form-designer/form-widget/container-widget/containerMixin";
import refMixinDesign from "../../../../../components/xform/form-designer/refMixinDesign";

export default {
  name: "h5-card-widget",
  componentName: 'ContainerWidget',
  mixins: [i18n, containerMixin, refMixinDesign],
  inject: ['refList'],
  components: {ContainerWrapper, h5CardPaneWidget},
  props: {
    widget: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
  },
  computed: {
    selected() {
      return this.widget.id === this.designer.selectedId
    },

    customClass() {
      return this.widget.options.customClass || ''
    },

  },
  watch: {
    //
  },
  created() {
    this.initRefList()
  },
  mounted() {
    //
  },
  methods: {
    checkContainerMove(evt) {
      return true;
    }
  }
}
</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: 38px;
  //margin: 6px 0;  /* 设置了margin，栅格列的offset、push、pull会失效！！ */
  padding: 3px;
  outline: 1px dashed #336699;
  position: relative;

  > div {
    height: 100%;
  }

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

  .grid-col-action {
    position: absolute;
    bottom: 0;
    right: -2px;
    height: 28px;
    line-height: 28px;
    background: $--color-primary;
    z-index: 999;

    i {
      font-size: 14px;
      color: #fff;
      margin: 0 5px;
      cursor: pointer;
    }
  }

  .grid-col-handler {
    position: absolute;
    top: -2px;
    left: -2px;
    height: 22px;
    line-height: 22px;
    background: $--color-primary;
    z-index: 9;

    i {
      font-size: 14px;
      font-style: normal;
      color: #fff;
      margin: 4px;
      cursor: default;
    }
  }
}

</style>
