<template>
  <div class="grid-cell" ref="baseTabRef"
       :class="[selected ? 'selected' : '', customClass]"
       :key="widget.id" @click.stop="selectWidget(widget)" :visible="!widget.options.hidden">
    <div class="h5-item">
      <div class="h5-title">
        <b>{{ widget.options.label }}</b>
        <div class="grid-cell">
          <draggable
            :list="widget.buttonWidgetList"
            v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 200 }"
            handle=".drag-handler"
            @add="evt => onContainerDragAdd(evt, widget.buttonWidgetList)"
            @update="onContainerDragUpdate"
            :move="checkContainerMove"
          >
            <transition-group name="fade" tag="div" class="form-widget-list">
              <template v-for="(subWidget, swIdx) in widget.buttonWidgetList">
                <template v-if="'container' === subWidget.category">
                  <component
                    :is="subWidget.type + '-widget'"
                    :widget="subWidget"
                    :designer="designer"
                    :key="subWidget.id"
                    :parent-list="widget.buttonWidgetList"
                    :index-of-parent-list="swIdx"
                    :parent-widget="widget"
                  ></component>
                </template>
                <template v-else>
                  <component
                    :is="subWidget.type + '-widget'"
                    :field="subWidget"
                    :designer="designer"
                    :key="subWidget.id"
                    :parent-list="widget.buttonWidgetList"
                    :index-of-parent-list="swIdx"
                    :parent-widget="widget"
                    :design-state="true"
                  ></component>
                </template>
              </template>
            </transition-group>
          </draggable>
        </div>
      </div>
      <div class="h5-form-box">
        <draggable
          :list="widget.widgetList"
          v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 200 }"
          handle=".drag-handler"
          @add="evt => onContainerDragAdd(evt, widget.widgetList)"
          @update="onContainerDragUpdate"
          :move="checkContainerMove"
        >
          <transition-group name="fade" tag="div" class="form-widget-list">
            <template v-for="(subWidget, swIdx) in widget.widgetList">
              <template v-if="'container' === subWidget.category">
                <component
                  :is="subWidget.type + '-widget'"
                  :widget="subWidget"
                  :designer="designer"
                  :key="subWidget.id"
                  :parent-list="widget.widgetList"
                  :index-of-parent-list="swIdx"
                  :parent-widget="widget"
                ></component>
              </template>
              <template v-else>
                <component
                  :is="subWidget.type + '-widget'"
                  :field="subWidget"
                  :designer="designer"
                  :key="subWidget.id"
                  :parent-list="widget.widgetList"
                  :index-of-parent-list="swIdx"
                  :parent-widget="widget"
                  :design-state="true"
                ></component>
              </template>
            </template>
          </transition-group>
        </draggable>
      </div>
    </div>
    <div class="grid-col-action" v-if="designer.selectedId === widget.id && widget.type === 'h5-card-pane'">
      <i class="el-icon-back" :title="i18nt('designer.hint.selectParentWidget')"
         @click.stop="selectParentWidget(widget)"></i>
      <i class="el-icon-top" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveUpWidget')"
         @click.stop="moveUpWidget()"></i>
      <i class="el-icon-bottom" v-if="!!parentList && (parentList.length > 1)"
         :title="i18nt('designer.hint.moveDownWidget')"
         @click.stop="moveDownWidget()"></i>
      <i class="el-icon-copy-document" :title="i18nt('designer.hint.cloneWidget')"
         @click.stop="designer.cloneH5CardPanePane(widget,parentWidget)"></i>
      <i class="el-icon-delete" :title="i18nt('designer.hint.remove')" @click.stop="removeWidget"></i>
    </div>
    <div class="grid-col-handler" v-if="designer.selectedId === widget.id && widget.type === 'h5-card-pane'">
      <i>{{ i18nt('designer.widgetLabel.' + widget.type) }}</i>
    </div>
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import i18n from "../../../../../components/xform/utils/i18n";
import refMixinDesign from "../../../../../components/xform/form-designer/refMixinDesign"
import containerMixin from "../../../../../components/xform/form-designer/form-widget/container-widget/containerMixin";
import FieldComponents from "../../../../../components/xform/form-designer/form-widget/field-widget";

export default {
  name: "h5-card-pane-widget",
  componentName: "ContainerWidget",
  mixins: [i18n, containerMixin, refMixinDesign],
  inject: ['refList'],
  components: {
    Draggable,
    ...FieldComponents,
  },
  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-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%;
    outline: 1px dashed #336699;
  }

  .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>
