<!--
/**
 * author: vformAdmin
 * email: vdpadmin@163.com
 * website: https://www.vform666.com
 * date: 2021.08.18
 * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
 */
-->

<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="h5-detail-wrap grid-container" :key="widget.id"
         :class="{'selected': selected}" @click.stop="selectWidget(widget)">
      <div class="h5-header">{{ widget.options.label }}</div>
<!--      <div class="h5-tab-nav">
        <div class="item on"><b>基本信息</b></div>
        <div class="item"><b>基本信息</b></div>
        <div class="item"><b>基本信息</b></div>
      </div>-->
<!--      <detail-pane-widget 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"></detail-pane-widget>
      -->
      <div>
        <draggable
          :list="widget.panes"
          v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 200 }"
          handle=".drag-handler"
          @add="evt => onContainerDragAdd(evt, widget.panes)"
          @update="onContainerDragUpdate"
          :move="checkContainerMove"
        >
          <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"
                  :designer="designer"
                  :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"
                  :designer="designer"
                  :key="subWidget.id"
                  :parent-list="widget.panes"
                  :index-of-parent-list="swIdx"
                  :parent-widget="widget"
                  :design-state="true"
                ></component>
              </template>
            </template>
          </transition-group>
        </draggable>
      </div>

      <div class="h5-fixed-bottom-btns " >
      <div class="grid-cell" :class="[selected ? 'selected' : '', customClass]" :key="widget.id" @click.stop="selectWidget(widget)" :visible="!widget.options.hidden">
          <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>
  </container-wrapper>
</template>

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

  export default {
    name: "detail-h5-widget",
    componentName: 'ContainerWidget',
    mixins: [i18n, containerMixin, refMixinDesign],
    inject: ['refList'],
    components: {
      ContainerWrapper,
      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-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>
