<template>
  <div>
    <el-form-item label="查询列表">
      <el-switch v-model="optionModel.isQueryTable"></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('designer.setting.tableColEdit')">
      <el-button type="primary" plain="" round="" @click="openSetting">{{
          i18nt('designer.setting.editAction')
        }}
      </el-button>
    </el-form-item>
    <el-dialog
      v-if="dialogVisible"
      custom-class="dialog-style list-dialog"
      :title="i18nt('designer.setting.tableColEdit')"
      :visible.sync="dialogVisible"
      :show-close="!0"
      :append-to-body="false"
      :modal="false"
      :close-on-click-modal="!1"
      :close-on-press-escape="!1"
      :destroy-on-close="!0"
      width="1220px"
      v-dialog-drag
    >
      <div class="cont">
        <template slot="footer">
          <div class="dialog-footer">
            <el-button type="" @click="dialogVisible = !1" class="button-sty" icon="el-icon-close">
              {{ i18nt('designer.hint.cancel') }}
            </el-button>
            <el-button type="primary" @click="colSubmit" class="button-sty" icon="el-icon-check">
              {{ i18nt('designer.hint.confirm') }}
            </el-button>

          </div>
        </template>
        <el-table
          ref="singleTable"
          width="100%"
          :data="optionModel.tableColumns"
          height="500"
          border=""
          row-key="columnId"
          stripe=""
        >
          <el-table-column type="index" width="35" fixed="left"></el-table-column>
          <el-table-column label="" width="35"><i class="el-icon-s-operation drag-option"></i></el-table-column>
          <el-table-column :label="i18nt('designer.setting.columnLabel')" width="150" prop="label">
            <template slot-scope="scope">
              <el-input v-model="scope.row.label"></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('designer.setting.columnName')" width="150" prop="prop">
            <template slot-scope="scope">
              <el-input v-model="scope.row.prop"></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('designer.setting.columnWidth')" width="100" prop="width">
            <template slot-scope="scope">
              <el-input v-model="scope.row.width"></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('designer.setting.visibleColumn')" width="70" prop="show">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.show"></el-switch>
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('必填')" width="70" prop="required">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.required"></el-switch>
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('列表展示')" width="70" prop="showForRow">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.showForRow"></el-switch>
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('designer.setting.formatOfColumn')" width="200" prop="formatS">
            <template slot-scope="scope">
              <el-select v-model="scope.row.formatS" @change="changeFormatS(scope.row)" clearable>
                <el-option-group :label="i18nt('designer.setting.customRenderGroup')">
                  <el-option value="render" label="render"></el-option>
                </el-option-group>
                <el-option-group v-for="t in op" :key="t.label" :label="t.label">
                  <el-option v-for="e in t.options" :key="e.value" :value="e.value" :label="e.label"></el-option>
                </el-option-group>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="格式化配置" width="70" fixed="right" align="center">
            <template slot-scope="scope">
              <el-button size="mini" plain="" round="" icon="el-icon-edit"
                         @click="openFormatConfigDialog(scope.row,scope.$index)"
                         :disabled="!columnFormatMap[scope.row.formatS]"></el-button>
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('designer.setting.renderFunction')" width="70" fixed="right" align="center">
            <template slot-scope="scope">
              <el-button :disabled="'render' !== scope.row.formatS" size="mini" plain="" round="" icon="el-icon-edit"
                         @click="showRenderDialog(scope.row)"></el-button>
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('designer.setting.actionColumn')" width="100" fixed="right" align="center">
            <template #header>
              <span>{{ i18nt('designer.setting.actionColumn') }}</span>
              <!--              <el-button :title="i18nt('designer.setting.addTableColumn')" size="mini" type="" circle=""
                                       icon="el-icon-plus" @click="openFieldTreeDialog"></el-button>-->
            </template>
            <template slot-scope="scope">
              <el-button :title="i18nt('designer.setting.addTableColumn')" size="mini" type="" circle=""
                         icon="el-icon-plus" @click="addCol"></el-button>
              <el-button
                :title="i18nt('designer.setting.deleteTableColumn')"
                size="mini"
                type=""
                circle=""
                icon="el-icon-minus"
                @click="handleDelete(scope.$index, scope.row)"
              ></el-button>
            </template>
          </el-table-column>

        </el-table>
      </div>

    </el-dialog>
    <el-dialog
      v-if="showRenderDialogFlag"
      :title="i18nt('designer.setting.renderFunction')"
      :visible.sync="showRenderDialogFlag"
      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" title="function customRender(params,h) {"/>
      <code-editor ref="dsResultEditor" mode="javascript" :readonly="!1" v-model="renderJson"></code-editor>
      <el-alert type="info" :closable="!1" title="}"/>
      <div class="dialog-footer" slot="footer">
        <el-button @click="showRenderDialogFlag = !1" class="button-sty" icon="el-icon-close">
          {{ i18nt('designer.hint.cancel') }}
        </el-button>
        <el-button type="primary" @click="saveColumnRender" 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="dialogVisible"
      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>
    <!--    <el-dialog
          v-if="showDateConfigDialog"
          :title="i18nt('日期配置编辑')"
          :visible.sync="showDateConfigDialog"
          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
        >
          <div class="cont">
            <el-form>
              <template v-for="(editorName, index) in dateFieldList">
                <component
                  :is="editorName"
                  :designer="designer"
                  :selected-widget="selectedWidget"
                  :option-model="columnOption"
                  :key="index"
                ></component>
              </template>
            </el-form>
          </div>
          <div class="dialog-footer" slot="footer">
            <el-button @click="showDateConfigDialog = !1" class="button-sty" icon="el-icon-close">
              {{ i18nt('designer.hint.cancel') }}
            </el-button>
            <el-button type="primary" class="button-sty" icon="el-icon-check" @click="confirmDateConfigDialog">
              {{ i18nt('designer.hint.confirm') }}
            </el-button>
          </div>
        </el-dialog>-->
    <!--    <el-dialog
          v-if="showDateConfigDialog"
          :title="i18nt('日期配置编辑')"
          :visible.sync="showDateConfigDialog"
          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
        >
          <div class="cont">
            <el-scrollbar class="setting-scrollbar">
                <el-form :model="columnOption" size="mini" label-position="left" label-width="120px" class="setting-form"
                         @submit.native.prevent>
                  <el-collapse v-model="widgetActiveCollapseNames" class="setting-collapse">
                    <el-collapse-item name="1" v-if="showCollapse(commonProps)"
                                      :title="i18nt('designer.setting.commonSetting')">
                      <template v-for="(editorName, propName) in commonProps">
                        <component
                          v-if="hasPropEditor(propName, editorName)"
                          :is="getPropEditor(propName, editorName)"
                          :designer="designer"
                          :selected-widget="columnSelectedWidget"
                          :option-model="columnOption"
                          :key="propName"
                        ></component>
                      </template>
                    </el-collapse-item>

                    <el-collapse-item name="2" v-if="showCollapse(advProps)"
                                      :title="i18nt('designer.setting.advancedSetting')">
                      <template v-for="(editorName, propName) in advProps">
                        <component
                          v-if="hasPropEditor(propName, editorName)"
                          :is="getPropEditor(propName, editorName)"
                          :designer="designer"
                          :selected-widget="selectedWidget"
                          :option-model="columnOption"
                          :key="propName"
                        ></component>
                      </template>
                    </el-collapse-item>

                    <el-collapse-item name="3" v-if="showEventCollapse() && showCollapse(eventProps)"
                                      :title="i18nt('designer.setting.eventSetting')">
                      <template v-for="(editorName, propName) in eventProps">
                        <component
                          v-if="hasPropEditor(propName, editorName)"
                          :is="getPropEditor(propName, editorName)"
                          :designer="designer"
                          :selected-widget="selectedWidget"
                          :option-model="columnOption"
                          :key="propName"
                        ></component>
                      </template>
                    </el-collapse-item>
                  </el-collapse>
                </el-form>
            </el-scrollbar>
          </div>
          <div class="dialog-footer" slot="footer">
            <el-button @click="showDateConfigDialog = !1" class="button-sty" icon="el-icon-close">
              {{ i18nt('designer.hint.cancel') }}
            </el-button>
            <el-button type="primary" class="button-sty" icon="el-icon-check" @click="confirmDateConfigDialog">
              {{ i18nt('designer.hint.confirm') }}
            </el-button>
          </div>
        </el-dialog>-->
  </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'

export default {
  name: 'list-h5-editor',
  componentName: 'PropertyEditor',
  mixins: [i18n],
  components: {
    requestaccessDialog
  },
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object
  },
  inject: ['getReportTemplate', 'showEventCollapse', 'openWidgetPropertyDialog'],
  data: function () {
    return {
      dialogVisible: !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: '查看按钮'
            },
            {
              value: 'button',
              label: '按钮'
            }
          ]
        },
      ],
      columnFormatMap: {
        editInput: 'input',
        editNumber: 'number',
        editDate: 'date',
        editSelect: 'select',
        editSearch: 'vabsearch',
        button:'button'
      },
      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: []
    };
  },
  computed: {
    dataSourceList: function () {
      return this.designer.formConfig && this.designer.formConfig.dataSources ? this.designer.formConfig.dataSources : [];
    },
    reportTemplate: function () {
      return this.getReportTemplate();
    }
  },
  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);
  },
  mounted: function () {
    /*let dateFieldList = Object.keys(dateFieldComponents);
    this.dateFieldList = dateFieldList;*/
  },
  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 () {
      var e = this;
      (this.dialogVisible = !0),
        this.$nextTick(function () {
          e.dragSort();
        });
    },
    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,
        showForRow: 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;
      }
    },
    getColumnWidgetConfig(row, isChange) {
      let columnSelectedWidget = null;
      let columnEditFields = null;

      let type = this.columnFormatMap[row.formatS];

      if (type) {
        if (!isChange) {
          const sourceWidget = this.designer.getColumnWidget(row, false);
          if (sourceWidget) {
            columnSelectedWidget = this.$baseLodash.cloneDeep(sourceWidget);
            columnSelectedWidget.options.required = row.required || false;
          } else {
            columnSelectedWidget = this.$baseLodash.cloneDeep(this.designer.getFieldWidgetByType(type));
            let tmpId = generateId();
            let idVal = row.prop ? row.prop : (type + tmpId);
            columnSelectedWidget.id = idVal;
            columnSelectedWidget.options.name = idVal;
            columnSelectedWidget.options.required = row.required || false;
          }
        } else {
          columnSelectedWidget = this.$baseLodash.cloneDeep(this.designer.getFieldWidgetByType(type));
          let tmpId = generateId();
          let idVal = row.prop ? row.prop : (type + tmpId);
          columnSelectedWidget.id = idVal;
          columnSelectedWidget.options.name = idVal;
          columnSelectedWidget.options.required = row.required || false;
        }
        columnSelectedWidget.options.name = row.prop;
        columnSelectedWidget.options.label = row.label;
        columnSelectedWidget.options.labelHidden = true;

      }
      return {columnSelectedWidget, columnEditFields};
    },
    openFormatConfigDialog(row, index) {
      const {columnSelectedWidget, columnEditFields} = this.getColumnWidgetConfig(row);
      if (!columnSelectedWidget) {
        return;
      }
      columnSelectedWidget.options = this.$baseLodash.cloneDeep(
        columnSelectedWidget.options
      );
      this.operateIndex = index;

      this.openWidgetPropertyDialog({
        row: row,
        columnSelectedWidget,
        index: index,
        columnEditFields: columnEditFields,
        callback: (confirmedWidget) => {
          this.confirmFormatConfigDialog(confirmedWidget);
        }
      })
    },
    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)
    },
  }
};
</script>

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