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

<template>
  <form-item-wrapper :designer="designer" :field="widget" :rules="rules" :design-state="designState"
                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
    <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)">
        <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>
  </form-item-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';
import FormItemWrapper from "../../../../../components/xform/form-designer/form-widget/field-widget/form-item-wrapper.vue";
import emitter from '../../../../../components/xform/utils/emitter'
import fieldMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/fieldMixin";

export default {
	name: 'tableColumnWidget',
	componentName: 'ContainerWidget',
	mixins: [emitter, fieldMixin, i18n, containerMixin, refMixinDesign],
	inject: ['refList'],
	components: {
    FormItemWrapper,
		Draggable,
		ContainerWrapper,
		...FieldComponents
	},
	props: {
		widget: Object,
		parentWidget: Object,
		parentList: Array,
		indexOfParentList: Number,
		designer: Object,

    designState: {
      type: Boolean,
      default: false
    },

    subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
      type: Number,
      default: -1
    },
    subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
      type: Number,
      default: -1
    },
    subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
      type: String,
      default: ''
    },
	},
  data(){
    return {
      rules: [],
    }
  },
	computed: {
		selected() {
			return this.widget.id === this.designer.selectedId;
		},

		customClass() {
			return this.widget.options.customClass || '';
		}
	},
	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>
