<template>
  <vxe-grid
    :ref="widget.id"
    v-bind="vxeOption"
    :auto-resize="true"
    v-show="!widget.options.hidden"
    @resizable-change="$vxeTableUtil.onColumnWitchChange"
    @custom="$vxeTableUtil.customHandle"
    @checkbox-change="handleCheckboxChange"
    @checkbox-all="handleCheckboxAll"
    @cell-dblclick="handleCellDblclick"
    :class="dataTableConfig.class"
    :data="fieldModel"
    v-on="eventConfig"
  >
    <template #form>
      <tableForm
        v-if="widget.options.isQueryTable"
        :formData.sync="formModel"
        :xform="true"
        @searchEvent="searchEvent"
        @resetEvent="resetEvent"
        @advancedClear="advancedClear"
        @settingConfirm="tableFormSettingConfirm"
      >
        <template #buttonLeft>
          <template v-if="!!widget.buttons && widget.buttons.length > 0">
            <template v-for="(subWidget, swIdx) in widget.buttons">
              <template v-if="'container' === subWidget.category">
                <component
                  :is="subWidget.type + '-item'"
                  :widget="subWidget"
                  :key="swIdx"
                  :parent-list="widget.buttons"
                  :index-of-parent-list="swIdx"
                  :parent-widget="widget"
                >
                  <!-- 递归传递插槽！！！ -->
                  <template
                    v-for="slot in Object.keys($scopedSlots)"
                    v-slot:[slot]="scope"
                  >
                    <slot :name="slot" v-bind="scope" />
                  </template>
                </component>
              </template>
              <template v-else>
                <component
                  :is="subWidget.type + '-widget'"
                  :field="subWidget"
                  :designer="null"
                  :key="swIdx"
                  :parent-list="widget.buttons"
                  :index-of-parent-list="swIdx"
                  :parent-widget="widget"
                >
                  <!-- 递归传递插槽！！！ -->
                  <template
                    v-for="slot in Object.keys($scopedSlots)"
                    v-slot:[slot]="scope"
                  >
                    <slot :name="slot" v-bind="scope" />
                  </template>
                </component>
              </template>
            </template>
          </template>
        </template>
        <template #buttonRight>
          <vxe-button
            icon="el-icon-brush"
            class="button-sty"
            @click="handleResetClick"
            type="text"
            status="primary"
            plain
            >{{ $t2("重置") }}
          </vxe-button>
          <vxe-button
            status="warning"
            icon="el-icon-search"
            class="button-sty"
            @click="handleSearchClick"
          >
            {{ $t2("搜索") }}
          </vxe-button>
        </template>

        <template
          v-for="(subWidget, swIdx) in widget.widgetList"
          v-slot:[subWidget.options.name]
        >
          <component
            v-if="'container' !== subWidget.category"
            :key="swIdx"
            :is="subWidget.type + '-widget'"
            :field="subWidget"
            :designer="null"
            :parent-list="subWidget.widgetList"
            :parent-widget="widget"
          >
            <!-- 递归传递插槽！！！ -->
            <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
              <slot :name="slot" v-bind="scope" />
            </template>
          </component>
        </template>

        <template #searchWidget="{ searchColumn }">
          <component
            :is="searchColumn.widget.type + '-widget'"
            :field="searchColumn.widget"
            :designer="null"
            :parent-list="searchColumn.widget.widgetList"
            :parent-widget="searchColumn.widget"
            formItemType="vxe-form-item"
          >
            <!-- 递归传递插槽！！！ -->
            <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
              <slot :name="slot" v-bind="scope" />
            </template>
          </component>
        </template>
      </tableForm>
      <treeMoveDialog
        v-if="showTreeMoveDialog"
        :visiable.sync="showTreeMoveDialog"
        :rows.sync="sortRows"
        :parent-target="_self"
        @confirm="confirmTreeMoveDialog"
      ></treeMoveDialog>
    </template>
    <template #widget="obj">
      <template v-if="!!getTableColumnWidget(obj)">
        <template v-if="obj.column.params.widget.type == 'status'">
          <template
            v-for="(item, index) in getTableColumnWidget(obj).options.statusParam"
          >
            <template v-if="isShowColumnStatusWidget(obj, item)">
              <span
                v-if="
                  getTableColumnWidget(obj).options.formScriptEnabled ||
                  getTableColumnWidget(obj).options.commonAttributeEnabled
                "
                :key="getTableColumnWidget(obj).id + '-' + index"
                >{{ getI18nLabel(item[getTableColumnStatusWidgetLabelKey(obj)]) }}</span
              >
              <span
                v-else
                :key="getTableColumnWidget(obj).id + '-' + index"
                class="list-tag"
                :class="item.type"
                >{{ getI18nLabel(item[getTableColumnStatusWidgetLabelKey(obj)]) }}</span
              >
            </template>
          </template>
        </template>
        <component
          v-else
          :is="getColumnWidgetName(obj.column.params.widget)"
          :field="fieldSchemaMap[obj.row._X_ROW_KEY][obj.column.params.widget.id]"
          :form-model="globalModel.formModel"
          :designer="null"
          :key="
            obj.rowIndex +
            '-' +
            fieldSchemaMap[obj.row._X_ROW_KEY][obj.column.params.widget.id].id
          "
          :parent-widget="widget"
          :columnConfig="obj.column.params.columnConfig"
          :subFormRowIndex="obj.rowIndex"
          :formItemProp="getColumnProp(obj)"
          :subFormRowId="obj.row._X_ROW_KEY"
          :tableParam="obj"
        >
          <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
            <slot :name="slot" v-bind="scope" />
          </template>
        </component>
      </template>
    </template>
    <template #widgetList="obj">
      <div>
        <template v-for="(fieldWidget, index) in obj.column.params.widgetList">
          <component
            v-if="!!fieldSchemaMap[obj.row._X_ROW_KEY] && !!obj.row._X_ROW_KEY"
            :is="getColumnWidgetName(fieldWidget)"
            v-bind="getRowWidgetOption(obj, fieldWidget)"
            :form-model="globalModel.formModel"
            :designer="null"
            :key="obj.rowIndex + '-' + getRowWidgetKey(obj, fieldWidget)"
            :parent-widget="widget"
            :columnConfig="obj.column.params.columnConfig"
            :subFormRowIndex="obj.rowIndex"
            :subFormRowId="obj.row._X_ROW_KEY"
            :formItemProp="getColumnProp2(fieldWidget, obj)"
            :tableParam="obj"
          >
            <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
              <slot :name="slot" v-bind="scope" :tableParam="obj" />
            </template>
          </component>
        </template>
      </div>
    </template>
    <template #editWidget="obj">
      <component
        v-if="!!fieldSchemaMap[obj.row._X_ROW_KEY]"
        :is="getColumnWidgetName(obj.column.params.editWidget)"
        :field="fieldSchemaMap[obj.row._X_ROW_KEY][obj.column.params.editWidget.id]"
        :form-model="globalModel.formModel"
        :designer="null"
        :key="
          obj.rowIndex +
          '-' +
          fieldSchemaMap[obj.row._X_ROW_KEY][obj.column.params.editWidget.id].id
        "
        :parent-widget="widget"
        :columnConfig="obj.column.params.columnConfig"
        :subFormRowIndex="obj.rowIndex"
        :subFormRowId="obj.row._X_ROW_KEY"
        :formItemProp="getColumnProp(obj, true)"
        :tableParam="obj"
      >
        <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
          <slot :name="slot" v-bind="scope" />
        </template>
      </component>
    </template>
    <template #editTreeButtonGroup="obj">
      <div class="cell-operate">
        <template v-if="getGridTable().isActiveByRow(obj.row)">
          <a @click="saveEditRow(obj)" class="a-link" data-tit="保存">
            <el-tooltip
              :enterable="false"
              effect="dark"
              content="保存"
              placement="top"
              popper-class="tooltip-skin"
              ><i class="el-icon-circle-check"></i
            ></el-tooltip>
          </a>
          <a
            @click="cancleRowEvent(obj)"
            class="a-link"
            data-tit="取消行编辑"
            v-if="hasSaveRow(obj.row)"
          >
            <el-tooltip
              :enterable="false"
              effect="dark"
              content="取消行编辑"
              placement="top"
              popper-class="tooltip-skin"
              ><i class="el-icon-circle-close"></i
            ></el-tooltip>
          </a>
          <a
            @click="removeEditRow(obj)"
            class="a-link"
            data-tit="删除"
            v-if="!hasSaveRow(obj.row)"
          >
            <el-tooltip
              :enterable="false"
              effect="dark"
              content="删除"
              placement="top"
              popper-class="tooltip-skin"
              ><i class="el-icon-delete"></i
            ></el-tooltip>
          </a>
        </template>
        <template v-else>
          <a
            class="a-link"
            data-tit="新增"
            @click="addEditRow(null, obj)"
            v-if="widget.options.isTreeTable && canShowRowAdd(obj)"
          >
            <el-tooltip
              :enterable="false"
              effect="dark"
              content="新增"
              placement="top"
              popper-class="tooltip-skin"
              ><i class="el-icon-circle-plus-outline"></i
            ></el-tooltip>
          </a>
          <a
            @click="editRowEvent(obj)"
            class="a-link"
            data-tit="行编辑"
            v-if="canShowRowEdit(obj)"
          >
            <el-tooltip
              :enterable="false"
              effect="dark"
              content="行编辑"
              placement="top"
              popper-class="tooltip-skin"
              ><i class="el-icon-edit-outline"></i
            ></el-tooltip>
          </a>
        </template>
      </div>
    </template>
  </vxe-grid>
</template>

<script>
import FieldComponents from "../../../../components/xform/form-designer/form-widget/field-widget/index";
import dataTableMixin from "./data-table-mixin.js";
import tableForm from "../../../../components/table/tableForm.vue";
import treeMoveDialog from "../../../../components/xform/form-designer/form-widget/dialog/treeMoveDialog.vue";

export default {
  name: "DataTableItem",
  components: {
    tableForm,
    treeMoveDialog,
    ...FieldComponents,
  },
  mixins: [dataTableMixin],
  computed: {
    /*heightStyle() {
      let tableHeight = this.widget.options.tableHeight;
      if (tableHeight && (tableHeight == 'auto' || tableHeight.slice(-1) == '%')) {
        return 'height:100%';
      }
      return '';
    }*/
  },
};
</script>

<style lang="scss" scoped>
.field-wrapper {
  display: inline-block;
}
</style>
