<template>
  <div>
    <el-form-item :label="i18nt('designer.setting.tableWidth')">
      <el-input v-model="optionModel.tableWidth"></el-input>
    </el-form-item>
    <el-form-item :label="i18nt('designer.setting.tableHeight')">
      <el-input v-model="optionModel.tableHeight"></el-input>
    </el-form-item>
    <el-form-item label="行高度（px）">
      <el-input v-model="optionModel.tableRowHeight"></el-input>
    </el-form-item>
    <!--    <el-form-item :label="i18nt('designer.setting.customClass')">
          <el-select v-model="optionModel.customClass" multiple="" filterable="" allow-create="" default-first-option="">
            <el-option v-for="(e, t) in cssClassList" :key="t" :value="e" :label="e"></el-option>
          </el-select>
        </el-form-item>-->
    <!-- <el-form-item :label="i18nt('designer.setting.showIndex')"><el-switch v-model="optionModel.showIndex"></el-switch></el-form-item>
    <el-form-item :label="i18nt('designer.setting.showCheckBox')"><el-switch v-model="optionModel.showCheckBox"></el-switch></el-form-item> -->
    <el-form-item label="启用数据行合并">
      <el-switch v-model="optionModel.mergeRowEnabled"></el-switch>
    </el-form-item>
    <el-form-item :label="i18nt('合并行唯一字段')">
      <el-input v-model="optionModel.mergeRowKey"></el-input>
    </el-form-item>
    <el-form-item label="查询列表">
      <el-switch v-model="optionModel.isQueryTable"></el-switch>
    </el-form-item>
    <el-form-item label="切换tab时自动查询">
      <el-switch v-model="optionModel.searchOnSwitchTab"></el-switch>
    </el-form-item>
    <el-form-item label="是否显示查询按钮">
      <el-switch v-model="isShowQueryButton"></el-switch>
    </el-form-item>
    <el-form-item :label="i18nt('designer.setting.showPagination')">
      <el-switch v-model="optionModel.showPagination"></el-switch>
    </el-form-item>
    <el-form-item :label="i18nt('是否显示表尾统计行')">
      <el-switch v-model="optionModel.showGridFooter"></el-switch>
    </el-form-item>
    <el-form-item :label="i18nt('是否隐藏复选框')">
      <el-switch v-model="optionModel.hideGridCheckBox"></el-switch>
    </el-form-item>
    <el-form-item label="是否查询总页数">
      <el-switch v-model="isQueryAllPage"></el-switch>
    </el-form-item>
    <el-form-item label="默认每页查询数">
      <base-input-number
        v-model="optionModel.gridPageSize"
        size="mini"
        :max="10000"
      />
    </el-form-item>
    <el-form-item :label="i18nt('可选择每页查询数')"></el-form-item>
    <el-form-item label-width="0">
      <template v-if="optionModel.gridPageSizeList">
        <draggable
          tag="ul"
          class="draggable-box"
          :list="optionModel.gridPageSizeList"
          v-bind="{
            group: 'optionsGroup',
            ghostClass: 'ghost',
            handle: '.drag-option',
          }"
        >
          <li
            v-for="(item, index) in optionModel.gridPageSizeList"
            :key="index"
            class="col-item"
          >
            <i class="el-icon-s-operation drag-option"></i>
            <base-input-number
              v-model="item.value"
              :min="1"
              :max="10000"
              style="width: 200px"
            ></base-input-number>
            <el-button
              circle
              plain
              size="mini"
              type="danger"
              @click="optionModel.gridPageSizeList.splice(index, 1)"
              icon="el-icon-minus"
              class="col-delete-button"
              style="position: unset"
            ></el-button>
          </li>
        </draggable>
      </template>
      <div>
        <el-button
          type="text"
          @click="addGridPageSizeList"
          icon="el-icon-circle-plus-outline"
          class="add-option"
        >
          {{ i18nt("新增分页数") }}
        </el-button>
      </div>
    </el-form-item>

    <!--    <el-form-item :label="i18nt('显示导出')">
          <el-switch v-model="optionModel.showExportBtn"></el-switch>
        </el-form-item>-->
    <!--    <el-form-item :label="i18nt('显示搜索栏')">
          <el-switch v-model="optionModel.showSearchArea"></el-switch>
        </el-form-item>-->
    <!-- <el-form-item :label="i18nt('designer.setting.smallPagination')"><el-switch v-model="optionModel.smallPagination"></el-switch></el-form-item>
    <el-form-item :label="i18nt('designer.setting.showSummary')"><el-switch v-model="optionModel.showSummary"></el-switch></el-form-item>
    <el-form-item :label="i18nt('designer.setting.stripe')"><el-switch v-model="optionModel.stripe"></el-switch></el-form-item>
    <el-form-item :label="i18nt('designer.setting.rowSpacing')">
      <el-input-number style="width:100%;" controls-position="right" :min="0" :max="20" v-model="optionModel.rowSpacing"></el-input-number>
    </el-form-item>
    <el-form-item :label="i18nt('designer.setting.widgetSize')">
      <el-select v-model="optionModel.tableSize" @change="refreshTableLayout">
        <el-option v-for="e in widgetSizes" :key="e.value" :value="e.value" :label="e.label"></el-option>
      </el-select>
    </el-form-item> -->
    <el-form-item :label="i18nt('designer.setting.tableColEdit')">
      <el-button type="primary" plain="" round="" @click="openSetting"
        >{{ i18nt("designer.setting.editAction") }}
      </el-button>
    </el-form-item>
    <el-form-item label="自定义表格配置" label-width="150px">
      <a
        href="javascript:void(0);"
        class="a-link link-oneLind"
        @click="editEventHandler('tableConfig', tableConfigParams)"
      >
        <span>{{ optionModel.tableConfig }}</span>
        <i class="el-icon-edit"></i>
      </a>
    </el-form-item>
    <el-form-item label-width="0">
      <el-divider class="custom-divider-margin-top">编辑表格设置</el-divider>
    </el-form-item>
    <el-form-item :label="i18nt('编辑表格')">
      <el-switch v-model="optionModel.isEditTable"></el-switch>
    </el-form-item>
    <el-form-item :label="i18nt('树表格')">
      <el-switch v-model="optionModel.isTreeTable"></el-switch>
    </el-form-item>
    <el-form-item :label="i18nt('启用WBS码')">
      <el-switch v-model="optionModel.wbsEnabled"></el-switch>
    </el-form-item>
    <el-form-item :label="i18nt('排序脚本编码')" v-if="optionModel.isEditTable">
      <el-input v-model="optionModel.sortScriptCode"></el-input>
    </el-form-item>
    <el-form-item label-width="0">
      <el-divider class="custom-divider-margin-top">明细导出设置</el-divider>
    </el-form-item>
    <el-form-item :label="i18nt('明细导出脚本编码')">
      <el-input v-model="optionModel.exportItemScriptCode"></el-input>
    </el-form-item>
    <el-form-item label="自定义明细导出参数" label-width="150px">
      <a
        href="javascript:void(0);"
        class="a-link link-oneLind"
        @click="editEventHandler('exportItemParam', tableConfigParams)"
      >
        <span>{{ optionModel.exportItemParam }}</span>
        <i class="el-icon-edit"></i>
      </a>
    </el-form-item>
    <el-form-item label="明细导出列维护" label-width="150px">
      <a
        href="javascript:void(0);"
        class="a-link link-oneLind"
        @click="openExportItemColumnsDialog"
      >
        <span>{{
          optionModel.exportItemColumns && optionModel.exportItemColumns.length
            ? "已维护"
            : null
        }}</span>
        <i class="el-icon-edit"></i>
      </a>
    </el-form-item>

    <el-dialog
      v-if="dataDialogVisible"
      custom-class="dialog-style list-dialog"
      :title="i18nt('designer.setting.tableDataEdit')"
      :visible.sync="dataDialogVisible"
      :show-close="!0"
      append-to-body=""
      :close-on-click-modal="!1"
      :close-on-press-escape="!1"
      :destroy-on-close="!0"
      width="75%"
      v-dialog-drag
    >
      <template slot="footer">
        <div class="dialog-footer">
          <el-button
            type=""
            @click="dataDialogVisible = !1"
            class="button-sty"
            icon="el-icon-close"
          >
            {{ i18nt("designer.hint.cancel") }}
          </el-button>
          <el-button
            type="primary"
            @click="saveTableData"
            class="button-sty"
            icon="el-icon-check"
          >
            {{ i18nt("designer.hint.confirm") }}
          </el-button>
        </div>
      </template>
      <code-editor
        mode="json"
        :readonly="!1"
        v-model="tableDataOptions"
      ></code-editor>
    </el-dialog>
    <el-dialog
      v-if="showSqlEditDialog"
      :title="i18nt('数据源SQL编辑')"
      :visible.sync="showSqlEditDialog"
      append-to-body=""
      :show-close="!0"
      custom-class="dialog-style list-dialog"
      :close-on-click-modal="!1"
      :close-on-press-escape="!1"
      :destroy-on-close="!0"
      v-dialog-drag
    >
      <el-alert type="info" :closable="!1" />
      <code-editor
        ref="dsResultEditor"
        mode="javascript"
        :readonly="!1"
        v-model="dataSourceSql"
      ></code-editor>
      <el-alert type="info" :closable="!1" />
      <div class="dialog-footer" slot="footer">
        <el-button
          @click="showSqlEditDialog = !1"
          class="button-sty"
          icon="el-icon-close"
        >
          {{ i18nt("designer.hint.cancel") }}
        </el-button>
        <el-button
          type="primary"
          @click="saveDataSourceSql"
          class="button-sty"
          icon="el-icon-check"
        >
          {{ i18nt("designer.hint.confirm") }}
        </el-button>
      </div>
    </el-dialog>
    <requestaccessDialog
      v-if="showRequestaccessDialog"
      :visiable.sync="showRequestaccessDialog"
      @confirm="confirmInsertRequestaccess"
      multi="false"
      :param="{ reportCode: reportTemplate.reportCode }"
    />

    <el-dialog
      v-if="showFieldTreeDialog"
      custom-class="dialog-style list-dialog"
      title="新增列表列"
      :visible.sync="showFieldTreeDialog"
      :show-close="!0"
      :append-to-body="false"
      :modal="false"
      :close-on-click-modal="!1"
      :close-on-press-escape="!1"
      :destroy-on-close="!0"
      width="500px"
      v-dialog-drag
    >
      <div class="cont" style="height: 500px">
        <el-tree
          ref="tree"
          :data="treeData"
          show-checkbox
          node-key="name"
          :default-expand-all="true"
          :check-on-click-node="true"
          :expand-on-click-node="false"
          :default-checked-keys="defaultCheckedKeys"
          :props="defaultProps"
        >
        </el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          plain
          class="button-sty"
          @click="showFieldTreeDialog = false"
        >
          <i class="el-icon-close el-icon"></i>
          取 消
        </el-button>
        <el-button
          type="primary"
          @click="confirmFieldTreeDialog"
          class="button-sty"
        >
          <i class="el-icon-check el-icon"></i>
          确 定
        </el-button>
      </span>
    </el-dialog>
    <tableColumnDialog
      v-if="columnDialogMounted"
      :visiable.sync="dialogVisible"
      :designer="designer"
      :selectedWidget="selectedWidget"
      :optionModel="optionModel"
    />
    <exportItemColumnsDialog
      v-if="showExportItemColumnsDialog"
      :visiable.sync="showExportItemColumnsDialog"
      :designer="designer"
      :selectedWidget="selectedWidget"
      :optionModel="optionModel"
    />
  </div>
</template>

<script>
import i18n from "../../../../../../components/xform/utils/i18n";
import Draggable from "vuedraggable";
import {
  deepClone,
  generateId,
} from "../../../../../../components/xform/utils/util";
import Sortable from "sortablejs";
import requestaccessDialog from "../../../../../../views/user/form/report_requestaccess/dialog.vue";
// import conditionEditor from "./condition-editor.vue";
import tableColumnDialog from "./table-column-dialog.vue";
import eventMixin from "../../../../../../components/xform/form-designer/setting-panel/property-editor/event-handler/eventMixin";
import setttingConfig from "@/settings";

import exportItemColumnsDialog from "./exportItemColumns-dialog.vue";

export default {
  name: "data-table-editor",
  componentName: "PropertyEditor",
  mixins: [i18n, eventMixin],
  components: {
    Draggable,
    requestaccessDialog,
    // conditionEditor,
    tableColumnDialog,
    exportItemColumnsDialog,
  },
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  inject: [
    "getReportTemplate",
    "showEventCollapse",
    "openWidgetPropertyDialog",
  ],
  data: function () {
    return {
      showTableConfigDialog: false,
      tableConfigCode: null,
      dialogVisible: !1,
      columnDialogMounted: !1,
      dataDialogVisible: !1,
      showButtonsEditDialog: !1,
      oldButtonName: "",
      cssClassList: [],
      tableDataOptions: [],
      widgetSizes: [
        {
          label: "default",
          value: "",
        },
        {
          label: "large",
          value: "large",
        },
        {
          label: "medium",
          value: "medium",
        },
        {
          label: "small",
          value: "small",
        },
        {
          label: "mini",
          value: "mini",
        },
      ],
      alignOptions: [
        {
          value: "left",
          label: "left",
        },
        {
          value: "center",
          label: "center",
        },
        {
          value: "right",
          label: "right",
        },
      ],
      fieldTypeOptions: [
        {
          value: "text",
          label: "Text",
        },
        {
          value: "number",
          label: "Number",
        },
        {
          value: "date",
          label: "Date",
        },
      ],
      op: [
        {
          label: "Date Format",
          options: [
            {
              value: "d1",
              label: "yyyy-MM-dd",
            },
            {
              value: "d2",
              label: "yyyy/MM/dd",
            },
            {
              value: "d3",
              label: "yyyy年MM月dd日",
            },
            {
              value: "d4",
              label: "yyyy-MM-dd HH:mm:ss",
            },
            {
              value: "d5",
              label: "yyyy-MM-dd hh:mm:ss",
            },
          ],
        },
        {
          label: "Number Format",
          options: [
            {
              value: "n1",
              label: "###,###,###,##0.######",
            },
            {
              value: "n2",
              label: "###,###,###,##0.00####",
            },
            {
              value: "n3",
              label: "###,###,###,##0.000000",
            },
            {
              value: "n4",
              label: "###,###,###,##0.000",
            },
            {
              value: "n5",
              label: "###,###,###,##0.00",
            },
            {
              value: "n6",
              label: "###,###,###,##0",
            },
            {
              value: "n7",
              label: "###,##0.00##%",
            },
          ],
        },
        {
          label: "edit Format",
          options: [
            {
              value: "editInput",
              label: "文本输入框",
            },
            {
              value: "editNumber",
              label: "数字输入框",
            },
            {
              value: "editDate",
              label: "日期输入框",
            },
            {
              value: "editSelect",
              label: "下拉框",
            },
            {
              value: "editSearch",
              label: "搜索框",
            },
            {
              value: "editDelete",
              label: "删除按钮",
            },
            {
              value: "editButton",
              label: "查看按钮",
            },
          ],
        },
      ],
      columnFormatMap: {
        editInput: "input",
        editNumber: "number",
        editDate: "date",
        editSelect: "select",
        editSearch: "vabsearch",
      },
      showRenderDialogFlag: !1,
      renderJson: "",
      currentTableColumn: null,
      nameRules: [
        {
          required: !0,
          trigger: ["blur", "change"],
          message: this.i18nt("designer.setting.fieldValueRequired"),
        },
      ],
      showSqlEditDialog: false,
      dataSourceSql: "",
      showRequestaccessDialog: false,
      showDateConfigDialog: false,
      columnOption: {},
      dateFieldList: [],
      columnSelectedWidget: {},
      // reportTemplate:{}

      showFieldTreeDialog: false,
      treeData: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      defaultCheckedKeys: [],
      tableConfigParams: ["dataId", "formCode"],
      showExportItemColumnsDialog: false,
    };
  },
  computed: {
    dataSourceList: function () {
      return this.designer.formConfig && this.designer.formConfig.dataSources
        ? this.designer.formConfig.dataSources
        : [];
    },
    reportTemplate: function () {
      return this.getReportTemplate();
    },
    isQueryAllPage: {
      get() {
        return !this.optionModel.isNotQueryAllPage;
      },
      set(val) {
        this.optionModel.isNotQueryAllPage = !val;
      },
    },
    isShowQueryButton: {
      get() {
        return !this.optionModel.isNotShowQueryButton;
      },
      set(val) {
        this.optionModel.isNotShowQueryButton = !val;
      },
    },
  },
  created: function () {
    // this.reportTemplate = this.getReportTemplate();
    var e = this;
    (this.cssClassList = deepClone(this.designer.getCssClassList())),
      this.designer.handleEvent("form-css-updated", function (t) {
        e.cssClassList = t;
      });
    if (this.optionModel.showExportBtn == null)
      this.$set(this.optionModel, "showExportBtn", true);
    if (this.optionModel.tableConfig === void 0)
      this.$set(this.optionModel, "tableConfig", "");
  },
  mounted: function () {
    const preloadColumnDialog = () => {
      this.columnDialogMounted = true;
    };
    if (typeof requestIdleCallback === "function") {
      requestIdleCallback(preloadColumnDialog, { timeout: 200 });
    } else {
      this.$nextTick(preloadColumnDialog);
    }
  },
  methods: {
    dragSort: function () {
      var e = this.$refs.singleTable.$el.querySelectorAll(
          ".el-table__body-wrapper > table > tbody"
        )[0],
        t = this.optionModel.tableColumns;
      this.sortable = Sortable.create(e, {
        ghostClass: "sortable-ghost",
        setData: function (e) {
          e.setData("Text", "");
        },
        onEnd: function (e) {
          var i = t.splice(e.oldIndex, 1)[0];
          t.splice(e.newIndex, 0, i);
          t[e.newIndex].id;
          t[e.newIndex - 1] && t[e.newIndex - 1].id,
            t[e.newIndex + 1] && t[e.newIndex + 1].id;
        },
      });
    },
    openTableDataEdit: function () {
      (this.dataDialogVisible = !0),
        (this.tableDataOptions = JSON.stringify(
          this.optionModel.tableData,
          null,
          "  "
        ));
    },
    saveTableData: function () {
      try {
        (this.optionModel.tableData = JSON.parse(this.tableDataOptions)),
          (this.dataDialogVisible = !1);
      } catch (e) {
        this.$message.error(
          this.i18nt("designer.hint.invalidOptionsData") + e.message
        );
      }
    },
    openSetting: function () {
      if (!this.columnDialogMounted) {
        this.columnDialogMounted = true;
      }
      this.dialogVisible = true;
    },
    colSubmit: function () {
      this.dialogVisible = !1;
    },
    addCol: function () {
      let tmpId = "column" + generateId();
      var e = {
        columnId: new Date().getTime(),
        required: false,
        width: 150,
        prop: tmpId,
        label: tmpId,
        align: "left",
        show: true,
        sortable: true,
      };
      this.optionModel.tableColumns.push(e), this.designer.emitHistoryChange();
    },
    handleDelete: function (e, t) {
      if (1 === this.optionModel.tableColumns.length)
        return (
          this.$message.warning(
            this.i18nt("designer.setting.onlyOneColumnCannotBeDeleted")
          ),
          !1
        );
      this.optionModel.tableColumns.splice(e, 1);
    },
    showRenderDialog: function (e) {
      (this.currentTableColumn = e),
        (this.renderJson = e.render || ""),
        (this.showRenderDialogFlag = !0);
    },
    saveColumnRender: function () {
      this.$set(this.currentTableColumn, "render", this.renderJson),
        (this.showRenderDialogFlag = !1);
    },
    handleShowButtonsColumnChange: function (e) {
      if (e) {
        var t = this.designer.formWidget.getSelectedWidgetRef();
        t &&
          t.refreshLayout &&
          this.$nextTick(function () {
            t.refreshLayout();
          });
      }
    },
    onButtonNameFocus: function (e) {
      console.log("test", e), (this.oldButtonName = e.target.value);
    },
    onButtonNameChange: function (e, t) {
      var i = !1;
      this.optionModel.operationButtons.map(function (n, o) {
        n.name === e && o !== t && (i = !0);
      }),
        i &&
          (this.$message.error(
            this.i18nt("designer.setting.operationButtonDuplicatedNameError")
          ),
          (this.optionModel.operationButtons[t].name = this.oldButtonName));
    },
    editButtonsColumn: function () {
      this.showButtonsEditDialog = !0;
    },
    deleteOperationButton: function (e) {
      var t = this;
      this.$confirm(
        this.i18nt("designer.setting.deleteOperationButtonHint"),
        this.i18nt("render.hint.prompt"),
        {
          confirmButtonText: this.i18nt("render.hint.confirm"),
          cancelButtonText: this.i18nt("render.hint.cancel"),
        }
      )
        .then(function () {
          t.optionModel.operationButtons.splice(e, 1);
        })
        .catch(function (e) {});
    },
    addOperationButton: function () {
      this.$set(
        this.optionModel,
        "operationButtons",
        this.optionModel.operationButtons || []
      ),
        this.optionModel.operationButtons.push({
          name: "btn" + generateId(),
          label: "new btn",
          type: "text",
          size: "small",
          round: !1,
          hidden: !1,
          disabled: !1,
        });
    },
    refreshTableLayout: function () {
      var e = this.designer.formWidget.getSelectedWidgetRef();
      e &&
        e.refreshLayout &&
        this.$nextTick(function () {
          e.refreshLayout();
        });
    },
    saveDataSourceSql() {
      this.optionModel.dataSourceSql = this.dataSourceSql;
      this.showSqlEditDialog = false;
    },
    openSqlEditDialog() {
      this.dataSourceSql = this.optionModel.dataSourceSql
        ? deepClone(this.optionModel.dataSourceSql)
        : "";
      this.showSqlEditDialog = true;
    },
    confirmInsertRequestaccess(rows) {
      if (rows.length) {
        let row = rows[0];
        this.optionModel.accessName = row.accessName;
        this.optionModel.accessCode = row.accessCode;
      }
    },
    changeFormatS(row) {
      row.widget = this.designer.createColumnWidget(row, false) || null;
      if (row.formatS == "editDelete" || row.formatS == "editButton") {
        row.width = 47;
        row.prop = null;
        row.label = null;
        row.sortable = false;
      } else {
        let tmpId = "column" + generateId();
        if (!row.width || row.width == 47) row.width = 150;
        if (!row.prop) row.prop = tmpId;
        if (!row.label) row.label = tmpId;
        row.sortable = true;
      }
    },
    confirmFormatConfigDialog(columnSelectedWidget) {
      const options = columnSelectedWidget.options;
      let row = this.optionModel.tableColumns[this.operateIndex];
      row.widget = columnSelectedWidget;
      row.prop = options.name;
      row.label = options.label;
      row.required = options.required;
    },
    openFieldTreeDialog() {
      this.treeData = [
        {
          name: "Jinjilianxiren",
          label: "员工-紧急联系人",
          children: [
            {
              detailEntity: "Jinjilianxiren",
              name: "createdOn",
              label: "员工-紧急联系人.创建时间",
              type: "DateTime",
              required: "1",
            },
            /*{
            "searchDialogWidth": "520px",
            "detailEntity": "Jinjilianxiren",
            "name": "createdBy",
            "label": "员工-紧急联系人.创建用户",
            "type": "Reference",
            "required": "1"
          },*/ {
              detailEntity: "Jinjilianxiren",
              name: "modifiedOn",
              label: "员工-紧急联系人.最近修改时间",
              type: "DateTime",
              required: "0",
            },
            /*{
            "searchDialogWidth": "520px",
            "detailEntity": "Jinjilianxiren",
            "name": "modifiedBy",
            "label": "员工-紧急联系人.修改用户",
            "type": "Reference",
            "required": "0"
          }, {
            "searchDialogWidth": "520px",
            "detailEntity": "Jinjilianxiren",
            "name": "mdYuangongdanganId",
            "label": "员工-紧急联系人.主从关联Id",
            "type": "Reference",
            "required": "1"
          },*/ {
              detailEntity: "Jinjilianxiren",
              name: "shouji",
              label: "员工-紧急联系人.手机",
              type: "Text",
              required: "0",
              maxLength: "200",
            },
            {
              detailEntity: "Jinjilianxiren",
              name: "jinjilianxirenxingming",
              label: "员工-紧急联系人.紧急联系人姓名",
              type: "Text",
              required: "0",
              maxLength: "200",
            },
          ],
        },
      ];

      let fields = this.optionModel.tableColumns
        .filter((item) => !!item.prop)
        .map((item) => item.prop);
      let defaultCheckedKeys = [];
      this.treeData.forEach((item1) => {
        item1.children.forEach((item2) => {
          if (
            fields.includes(item2.name) &&
            !defaultCheckedKeys.includes(item2.name)
          ) {
            defaultCheckedKeys.push(item2.name);
          }
        });
      });
      this.defaultCheckedKeys = defaultCheckedKeys;
      this.showFieldTreeDialog = true;
    },
    confirmFieldTreeDialog() {
      // defaultCheckedKeys
      let fields = this.optionModel.tableColumns
        .filter((item) => !!item.prop)
        .map((item) => item.prop);
      let datas = this.$refs.tree.getCheckedNodes(true, false);
      datas
        .filter((item) => !fields.includes(item.name))
        .forEach((item) => {
          this.addCol2(item);
        });
      this.designer.emitHistoryChange();
      this.showFieldTreeDialog = false;
    },
    addCol2: function (item) {
      let tmpId = "column" + generateId();
      var e = {
        columnId: new Date().getTime(),
        required: false,
        width: 150,
        prop: item.name,
        label: item.label,
        show: true,
        sortable: true,
      };
      this.optionModel.tableColumns.push(e);
    },
    openTableConfigDialog() {
      this.eventHeader = `${
        this.optionModel.name
      }.${eventName}(${eventParams.join(", ")}) {`;
      this.eventHandlerCode = selectedWidget.options[eventName] || "";
      this.showTableConfigDialog = true;
    },
    downloadExcel() {
      let defaultUrl =
        "http://file.sc.5mall.com/download/repo1/b/mk1/2024/12/13/b2aea548-a9a8-4dca-bba7-8d9c6134ebe3.xlsx";
      let xformImportTemplateFile =
        setttingConfig.xformImportTemplateFile || defaultUrl;
      if (!xformImportTemplateFile) return;
      this.$commonFileUtil.downloadFile(
        xformImportTemplateFile,
        "通用导入模板.xlsx"
      );
    },
    addGridPageSizeList() {
      if (this.optionModel.gridPageSizeList === undefined) {
        this.$set(this.optionModel, "gridPageSizeList", []);
      }
      this.optionModel.gridPageSizeList.push({ value: 50 });
    },
    openExportItemColumnsDialog() {
      this.showExportItemColumnsDialog = true;
    },
  },
};
</script>

<style>
.icon-drag:before {
  content: "\e61d";
}
</style>
