<!--
/**
 * 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">
    <div :key="widget.id" class="panel-container" :class="[selected ? 'selected' : '', customClass]" @click.stop="selectWidget(widget)" :style="heightStyle">
      <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="vf-dialog-drop-zone">
          <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>
  </container-wrapper>
</template>

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

export default {
	name: 'panel-widget',
	componentName: 'ContainerWidget',
	mixins: [i18n, containerMixin, refMixinDesign],
	inject: ['refList'],
	components: {
		Draggable,
		ContainerWrapper,
		...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 || '';
		},
    heightStyle0() {
      let height = this.widget.options.height;
      if (height) {
        if (isNaN(height)) {
          if (height == 'auto' || height.slice(-1) == '%') {
            return '100%';
          }
        }
      }
      return '';
    },
    heightStyle() {
      let widgetHeight = this.widget.options.height;
      if (widgetHeight) {
        let height = widgetHeight;
        if (!isNaN(widgetHeight)) {
          height = widgetHeight + 'px';
        }
        return "height:"+height+";";
      }
      return '';
    }
	},
	created() {
		this.initRefList();
	},
	methods: {
		/**
		 * 检查接收哪些组件拖放，如不接受某些组件拖放，则根据组件类型判断后返回false
		 * @param evt
		 * @returns {boolean}
		 */
		checkContainerMove(evt) {
			return true;
		},
	}
};
</script>

<style lang="scss" scoped>
.panel-container {
  min-height: 50px;
  //line-height: 48px;
  //padding: 6px;
  outline: 1px dashed #336699;
  > div {
    height: 100%;
  }
  .form-widget-list {
    // min-height: 28px;
    height: 100%;
  }
}

.panel-container.selected {
  outline: 2px solid $--color-primary !important;
}
</style>
