<!--
/**
 * 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="box-container"
         :class="{'selected': selected}" @click.stop="selectWidget(widget)">
      <div class="box-style" :class="{'boxfull': widget.options.isFullscreen,'notitle' : widget.options.label==''}" :style="{'height': widget.options.isFullscreen ? '' : widget.options.height}">
        <div class="t" :class="widget.options.styleTitClass"><b v-html="widget.options.label"></b></div>
        <div class="cont">
          <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 Draggable from 'vuedraggable';
  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 * as formatUtil from '../../../../../components/xform/utils/format.js';

  import FieldComponents from '../../../../../components/xform/form-designer/form-widget/field-widget/index';

  export default {
    name: "vf-box-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 || '';
      },
      columns() {
        let tableColumns = this.widget.options.tableColumns;
        let newColumns = [];
        newColumns.push({ type: 'checkbox', fixed: 'left' });
        tableColumns.forEach(t => {
          let col = {
            fixed: !!t.fixed && t.fixed,
            field: t.prop,
            title: t.label,
            witdh: t.width,
            sortable: t.sortable,
            align: t.align ? t.align : 'center',
            formatter: this.formatterValue,
            params: {
              formatS: t.formatS
            },
            visible: t.show
          };
          newColumns.push(col);
        });
        return newColumns;
      },
      gridOptions() {
        return {
          ...this.gridOptions1,
          columns: this.columns
        };
      }
    },
    watch: {
      //
    },
    created() {
      this.initRefList();
    },
    mounted() {
      //
    },
    methods: {
      resetEvent() {},
      searchEvent() {},
      openEditDialog() {},
      importExcel() {},
      formatterValue: function({ cellValue, row, column }) {
        if (!cellValue) return '';

        if (column.params && column.params.formatS)
          switch (column.params.formatS) {
            case 'd1':
              return formatUtil.formatDate1(cellValue);
            case 'd2':
              return formatUtil.formatDate2(cellValue);
            case 'd3':
              return formatUtil.formatDate3(cellValue);
            case 'd4':
              return formatUtil.formatDate4(cellValue);
            case 'd5':
              return formatUtil.formatDate4(cellValue);
            case 'n1':
              return formatUtil.formatNumber1(cellValue);
            case 'n2':
              return formatUtil.formatNumber2(cellValue);
            case 'n3':
              return formatUtil.formatNumber3(cellValue);
            case 'n4':
              return formatUtil.formatNumber4(cellValue);
            case 'n5':
              return formatUtil.formatNumber5(cellValue);
            case 'n6':
              return formatUtil.formatNumber6(cellValue);
            case 'n7':
              return formatUtil.formatNumber7(cellValue);
          }
        return cellValue;
      },
      checkContainerMove(evt) {
        return true;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .box-container {
    margin: 0;
    &.selected {
      outline: 2px solid $--color-primary !important;
    }
  }

</style>
