<!--
/**
 * 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="table-container" :class="[selected ? 'selected' : '', customClass]"
         @click.stop="selectWidget(widget)">
      <vxe-grid v-bind="gridOptions" :data="widget.options.tableData" :auto-resize="true">
        <template #form>
          <template v-if="widget.options.isQueryTable">
            <div class="clearfix screen-btns">
              <div class="fl" style="width: 700px;">
                <!--                <vxe-button status="primary" class="button-sty" icon="el-icon-upload2"
                                            v-if="widget.options.showExportBtn!==false">导出
                                </vxe-button>-->
                <el-form label-position="top">
                  <draggable
                    :list="widget.buttons"
                    v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 200 }"
                    handle=".drag-handler"
                    @add="evt => onContainerDragAdd(evt, widget.buttons)"
                    @update="onContainerDragUpdate"
                    :move="checkContainerMove"
                  >
                    <transition-group name="fade" tag="div" class="sub-form-table form-widget-list">
                      <template v-for="(subWidget, swIdx) in widget.buttons">
                        <div class="sub-form-table-column" :key="swIdx">
                          <template v-if="'container' === subWidget.category">
                            <component
                              :is="subWidget.type + '-widget'"
                              :widget="subWidget"
                              :designer="designer"
                              :key="subWidget.id"
                              :parent-list="widget.buttons"
                              :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.buttons"
                              :index-of-parent-list="swIdx"
                              :parent-widget="widget"
                              :design-state="true"
                            ></component>
                          </template>
                        </div>
                      </template>
                    </transition-group>
                  </draggable>
                </el-form>
              </div>
              <div class="fr">
                <!-- <vxe-button icon="el-icon-view" class="button-sty" @click="searchEvent">显示总记录数</vxe-button> -->
                <vxe-button icon="el-icon-brush" class="button-sty" @click="resetEvent" type="text" status="primary"
                            plain>重置
                </vxe-button>

                <vxe-button status="warning" icon="el-icon-search" class="button-sty" @click="searchEvent">搜索
                </vxe-button>
              </div>
            </div>
            <div class="screen-box" title-width="92px" title-align="right" @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="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"
                        :table-condition="true"
                      ></component>
                    </template>
                  </template>
                </transition-group>
              </draggable>
              <!-- <vxe-form-item title="机构名称:" field="saleOrgName">
                <template v-slot>
                  <el-input v-model="formData.saleOrgName" size="small" :disabled="true"></el-input>
                </template>
              </vxe-form-item>
              <vxe-form-item title="登录名:" field="loginAccount">
                <template v-slot>
                  <el-input v-model="formData.loginAccount" size="small" clearable></el-input>
                </template>
              </vxe-form-item>
              <vxe-form-item title="手机号:" field="mobile">
                <template v-slot>
                  <el-input v-model="formData.mobile" size="small" clearable></el-input>
                </template>
              </vxe-form-item>
              <vxe-form-item title="是否启用:" field="enabled">
                <template v-slot>
                  <el-select v-model="formData.enabled" clearable>
                    <el-option value="true" label="启用"></el-option>
                    <el-option value="false" label="禁用"></el-option>
                  </el-select>
                </template>
              </vxe-form-item> -->
            </div>
          </template>
          <!--          <div class="design-listcolu" title-width="92px" title-align="right" @click.stop="selectWidget(widget)">
                      <el-form label-position="top">
                        <draggable
                          :list="widget.columns"
                          v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 200 }"
                          handle=".drag-handler"
                          @add="evt => onContainerDragAdd(evt, widget.columns)"
                          @update="onContainerDragUpdate"
                          :move="checkContainerMove"
                        >
                          <transition-group name="fade" tag="div" class="sub-form-table form-widget-list">
                            <template v-for="(subWidget, swIdx) in widget.columns">
                              <div class="sub-form-table-column" :key="swIdx" :style="'width:'+subWidget.options.columnWidth">
                                <template v-if="'container' === subWidget.category">
                                  <component
                                    :is="subWidget.type + '-widget'"
                                    :widget="subWidget"
                                    :designer="designer"
                                    :key="subWidget.id"
                                    :parent-list="widget.columns"
                                    :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.columns"
                                    :index-of-parent-list="swIdx"
                                    :parent-widget="widget"
                                    :design-state="true"
                                  ></component>
                                </template>
                              </div>
                            </template>
                          </transition-group>
                        </draggable>
                      </el-form>

                    </div>-->
        </template>
      </vxe-grid>
    </div>
  </container-wrapper>
</template>

<script>
import ContainerWrapper from '../../../../../components/xform/form-designer/form-widget/container-widget/container-wrapper';
import TableCellWidget from '../../../../../components/xform/form-designer/form-widget/container-widget/table-cell-widget';
import FieldComponents from '../../../../../components/xform/form-designer/form-widget/field-widget/index';
import Draggable from 'vuedraggable';
import dataTableMixin from './data-table-mixin.js';
import { enrichTableColumnsWithLabelIcon } from '../../../utils/tableColumnHelper';

export default {
  name: 'data-table-widget',
  components: {
    ContainerWrapper,
    TableCellWidget,
    Draggable,
    ...FieldComponents
  },
  mixins: [dataTableMixin],
  computed: {
    columns() {
      const baseColumns = dataTableMixin.computed.columns.call(this);
      return enrichTableColumnsWithLabelIcon(
        baseColumns,
        this.widget.options.tableColumns || []
      );
    },
  },
  created() {
    if(this.widget.options.isNotQueryAllPage===undefined)this.widget.options.isNotQueryAllPage = false;
  }
};
</script>

<style lang="scss" scoped>
div.table-container {
  padding: 5px;
  border: 1px dashed #336699;
  box-sizing: border-box;

  table.table-layout {
    width: 100%;
    text-align: center;
    //border: 1px solid #c8ebfb;
    border-collapse: collapse;
    table-layout: fixed;

    ::v-deep td {
      height: 48px;
      border: 0.5px dashed #336699;
      padding: 3px;
      display: table-cell;
    }
  }

  .form-widget-list {
    border: 1px dashed #336699;
    min-height: 36px;
  }

  &.selected {
    outline: 2px solid $--color-primary !important;
  }
}

.sub-form-table {
  min-height: 68px;
  min-width: max-content
}

.sub-form-table .sub-form-drag-drop-zone {
  min-height: 68px
}

.sub-form-table div.sub-form-table-column {
  display: inline-block
}

</style>
