<template>
  <div>
    <el-form
      :model="formConfig"
      size="mini"
      label-position="left"
      label-width="120px"
      class="setting-form"
      @submit.native.prevent
    >
      <el-collapse v-model="formActiveCollapseNames" class="setting-collapse">
        <el-collapse-item name="1" :title="i18nt('designer.setting.basicSetting')">
          <el-form-item :label="i18nt('数据库表')">
            <el-input type="text" v-model="formConfig.entity"></el-input>
          </el-form-item>
          <el-form-item :label="i18nt('数据保存脚本编码')">
            <el-input
              type="text"
              v-model="formConfig.saveScriptCode"
              placeholder="默认saveUpdatge"
            ></el-input>
          </el-form-item>
          <el-form-item label="全局参数配置">
            <a
              href="javascript:void(0);"
              class="a-link link-oneLind"
              @click="editFormEventHandler('globalConfig')"
            >
              <span>{{ formConfig.globalConfig }}</span>
              <i class="el-icon-edit"></i>
            </a>
          </el-form-item>
          <el-form-item :label="i18nt('designer.setting.globalFunctions')">
            <a
              href="javascript:void(0);"
              class="a-link link-oneLind"
              @click="editGlobalFunctions"
            >
              <span>{{ formConfig.functions }}</span>
              <i class="el-icon-edit"></i>
            </a>
          </el-form-item>
          <el-form-item :label="i18nt('designer.setting.formCss')">
            <el-button type="info" icon="el-icon-edit" plain round @click="editFormCss">
              {{ i18nt("designer.setting.addCss") }}
            </el-button>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item name="2" title="详情表单信息">
          <el-form-item :label="i18nt('加载详情数据')">
            <el-switch v-model="formConfig.isLoadEntity"></el-switch>
          </el-form-item>
          <el-form-item :label="i18nt('详情数据脚本编码')">
            <el-input
              type="text"
              v-model="formConfig.formScriptCode"
              placeholder="默认getOne"
            ></el-input>
          </el-form-item>
          <el-form-item :label="i18nt('详情数据脚本参数')">
            <a
              href="javascript:void(0);"
              class="a-link link-oneLind"
              @click="editFormScriptParam"
            >
              <span>{{ formConfig.formScriptParam }}</span>
              <i class="el-icon-edit"></i>
            </a>
          </el-form-item>
          <el-form-item :label="i18nt('详情数据脚本回调')">
            <a
              href="javascript:void(0);"
              class="a-link link-oneLind"
              @click="editFormScriptSuccess"
            >
              <span>{{ formConfig.formScriptSuccess }}</span>
              <i class="el-icon-edit"></i>
            </a>
          </el-form-item>
          <el-form-item :label="i18nt('查看页面表单编码')">
            <el-input
              class="search-input"
              max="200"
              v-model="formConfig.editFormCode"
              @clear="
                formConfig.editFormName = null;
                $forceUpdate();
              "
              v-el-readonly
              clearable
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="openFormTemplate(2)"
              ></i>
            </el-input>
          </el-form-item>
          <el-form-item :label="i18nt('查看页面表单名称')">
            {{ formConfig.editFormName }}
          </el-form-item>
          <el-form-item :label="i18nt('新增页面表单编码')">
            <el-input
              class="search-input"
              max="200"
              v-model="formConfig.addFormCode"
              @clear="
                formConfig.addFormCode = null;
                formConfig.addFormName = null;
                $forceUpdate();
              "
              v-el-readonly
              clearable
              placeholder="默认使用查看表单编码"
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="openFormTemplate(1)"
              ></i>
            </el-input>
          </el-form-item>
          <el-form-item :label="i18nt('新增页面表单名称')">
            {{ formConfig.addFormName }}
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item name="3" title="流程信息">
          <el-form-item :label="i18nt('启用流程')">
            <el-switch
              v-model="formConfig.wfEnabled"
              @change="changeWfEnabled"
            ></el-switch>
          </el-form-item>
          <el-form-item :label="i18nt('默认流程单据类型名称')">
            <el-input
              type="text"
              v-model="designer.vueInstance.reportTemplate.objTypeName"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <span slot="label"
              >流程主题
              <scriptDescriptionButton
                title="流程主题说明"
                path="static/readme/WfSubject.txt"
              ></scriptDescriptionButton>
            </span>
          </el-form-item>
          <div>
            <el-input
              style="word-break: break-word"
              type="textarea"
              :rows="3"
              v-model="formConfig.wfTheme"
              clearable
            ></el-input>
          </div>
          <el-form-item :label="i18nt('流程启动时自动保存表单数据')">
            <el-switch v-model="formConfig.wfStartBindSave"></el-switch>
          </el-form-item>

          <el-form-item :label="i18nt('流程通过时自动保存表单数据')">
            <el-switch v-model="formConfig.wfAgreenBindSave"></el-switch>
          </el-form-item>
          <el-form-item :label="i18nt('流程通过时自动保存表单数据的节点配置')">
            <a
              href="javascript:void(0);"
              class="a-link link-oneLind"
              @click="openWfConfigDataDialog2"
            >
              <span>{{
                formConfig.wfAgreeConfigData && formConfig.wfAgreeConfigData.length
                  ? "已维护"
                  : ""
              }}</span>
              <i class="el-icon-edit"></i>
            </a>
          </el-form-item>
          <el-form-item :label="i18nt('启用流程节点可编辑表单')">
            <el-switch v-model="formConfig.wfConfigDataEnabled"></el-switch>
          </el-form-item>
          <el-form-item :label="i18nt('流程节点可编辑表单配置')">
            <a
              href="javascript:void(0);"
              class="a-link link-oneLind"
              @click="openWfConfigDataDialog"
            >
              <span>{{
                formConfig.wfConfigData && formConfig.wfConfigData.length ? "已维护" : ""
              }}</span>
              <i class="el-icon-edit"></i>
            </a>
          </el-form-item>
          <el-form-item :label="i18nt('引用流程的表单编码')">
            <el-input
              type="text"
              v-model="designer.vueInstance.reportTemplate.fromWfFormCode"
            ></el-input>
          </el-form-item>
          <el-form-item :label="i18nt('流程自定义配置')">
            <a
              href="javascript:void(0);"
              class="a-link link-oneLind"
              @click="editFormEventHandler('wfConfig')"
            >
              <span>{{ formConfig.wfConfig }}</span>
              <i class="el-icon-edit"></i>
            </a>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item name="4" title="列表标签页信息">
          <el-form-item :label="i18nt('列表启用详情多标签')">
            <el-switch v-model="formConfig.multiTabEnabled"></el-switch>
          </el-form-item>
          <el-form-item :label="i18nt('标签名称字段')">
            <el-input type="text" v-model="formConfig.multiTabLabelField"></el-input>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item name="5" title="其他标签页信息">
          <el-form-item :label="i18nt('自定义列表标签名称')">
            <el-input
              type="text"
              v-model="formConfig.customListTabLabel"
              placeholder="默认`列表`"
            ></el-input>
          </el-form-item>
          <el-form-item :label="i18nt('启用其他标签页')">
            <el-switch v-model="formConfig.otherTabEnabled"></el-switch>
          </el-form-item>
          <el-form-item :label="i18nt('其他标签页配置')"> </el-form-item>
          <el-form-item label-width="0">
            <div>
              <draggable
                tag="ul"
                class="draggable-box"
                :list="formConfig.otherTabList"
                v-bind="{
                  group: 'optionsGroup',
                  ghostClass: 'ghost',
                  handle: '.drag-option',
                }"
              >
                <li v-for="(option, idx) in formConfig.otherTabList" :key="idx">
                  <el-input
                    v-model="option.label"
                    size="mini"
                    style="width: 100px"
                    placeholder="标签名称"
                  ></el-input>
                  <el-input
                    v-model="option.formCode"
                    size="mini"
                    style="width: 100px"
                    placeholder="表单模板编码"
                  ></el-input>
                  <i class="el-icon-s-operation drag-option"></i>
                  <el-button
                    circle
                    plain
                    size="mini"
                    type="danger"
                    @click="formConfig.otherTabList.splice(idx, 1)"
                    icon="el-icon-minus"
                    class="col-delete-button"
                  ></el-button>
                </li>
              </draggable>
              <el-button type="text" @click="addOtherTab">{{
                i18nt("designer.setting.addOption")
              }}</el-button>
            </div>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item name="6" title="查询弹框展示信息">
          <el-form-item :label="i18nt('展示字段')">
            <el-input
              class="search-input"
              max="200"
              v-model="formConfig.searchDialogNameField"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item :label="i18nt('数据唯一标识')">
            <el-input
              class="search-input"
              max="200"
              v-model="formConfig.searchDialogUniqueField"
              clearable
            >
            </el-input>
          </el-form-item>
        </el-collapse-item>

        <el-collapse-item
          v-if="showEventCollapse()"
          name="7"
          :title="i18nt('designer.setting.eventSetting')"
        >
          <!--          <el-form-item label="onBeforeCreated" label-width="150px">
                      <a href="javascript:void(0);" class="a-link link-oneLind"
                         @click="editFormEventHandler('onBeforeCreated', ['dataId','done'])">
                        <span>{{ formConfig.onBeforeCreated }}</span>
                        <i class="el-icon-edit"></i>
                      </a>
                    </el-form-item>-->
          <el-form-item label="onFormCreated" label-width="150px">
            <a
              href="javascript:void(0);"
              class="a-link link-oneLind"
              @click="editFormEventHandler('onFormCreated')"
            >
              <span>{{ formConfig.onFormCreated }}</span>
              <i class="el-icon-edit"></i>
            </a>
          </el-form-item>
          <el-form-item label="onFormBeforeMounted" label-width="150px">
            <a
              href="javascript:void(0);"
              class="a-link link-oneLind"
              @click="editFormEventHandler('onFormBeforeMounted')"
            >
              <span>{{ formConfig.onFormBeforeMounted }}</span>
              <i class="el-icon-edit"></i>
            </a>
          </el-form-item>
          <el-form-item label="onFormMounted" label-width="150px">
            <a
              href="javascript:void(0);"
              class="a-link link-oneLind"
              @click="editFormEventHandler('onFormMounted')"
            >
              <span>{{ formConfig.onFormMounted }}</span>
              <i class="el-icon-edit"></i>
            </a>
          </el-form-item>
          <!-- -->
          <el-form-item label="onFormDataChange" label-width="150px">
            <a
              href="javascript:void(0);"
              class="a-link link-oneLind"
              @click="editFormEventHandler('onFormDataChange')"
            >
              <span>{{ formConfig.onFormDataChange }}</span>
              <i class="el-icon-edit"></i>
            </a>
          </el-form-item>
          <!-- -->
          <!--
          <el-form-item label="onFormValidate">
            <el-button type="info" icon="el-icon-edit" plain round @click="editFormEventHandler('onFormValidate')">
              {{i18nt('designer.setting.addEventHandler')}}</el-button>
          </el-form-item>
          -->
        </el-collapse-item>
      </el-collapse>
    </el-form>

    <el-dialog
      :title="i18nt('designer.setting.editFormEventHandler')"
      :visible.sync="showFormEventDialogFlag"
      v-if="showFormEventDialogFlag"
      :show-close="true"
      custom-class="dialog-style list-dialog"
      v-dialog-drag
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :append-to-body="true"
      :modal-append-to-body="true"
      top="5vh"
    >
      <div class="cont">
        <el-alert
          type="info"
          :closable="false"
          :title="'form.' + eventParamsMap[curEventName]"
        ></el-alert>
        <code-editor
          :mode="'javascript'"
          :readonly="false"
          v-model="formEventHandlerCode"
          ref="ecEditor"
        ></code-editor>
        <el-alert type="info" :closable="false" title="}"></el-alert>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="showFormEventDialogFlag = false"
          class="button-sty"
          icon="el-icon-close"
        >
          {{ i18nt("designer.hint.cancel") }}
        </el-button>
        <el-button
          type="primary"
          @click="saveFormEventHandler"
          class="button-sty"
          icon="el-icon-check"
        >
          {{ i18nt("designer.hint.confirm") }}
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="i18nt('designer.setting.formCss')"
      :visible.sync="showEditFormCssDialogFlag"
      v-if="showEditFormCssDialogFlag"
      :show-close="true"
      custom-class="dialog-style list-dialog"
      v-dialog-drag
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :append-to-body="true"
      :modal-append-to-body="true"
    >
      <div class="cont">
        <code-editor :mode="'css'" :readonly="false" v-model="formCssCode"></code-editor>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="showEditFormCssDialogFlag = false"
          class="button-sty"
          icon="el-icon-close"
        >
          {{ i18nt("designer.hint.cancel") }}
        </el-button>
        <el-button
          type="primary"
          @click="saveFormCss"
          class="button-sty"
          icon="el-icon-check"
        >
          {{ i18nt("designer.hint.confirm") }}
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="i18nt('designer.setting.globalFunctions')"
      :visible.sync="showEditFunctionsDialogFlag"
      v-if="showEditFunctionsDialogFlag"
      :show-close="true"
      custom-class="dialog-style list-dialog"
      v-dialog-drag
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :append-to-body="true"
      :modal-append-to-body="true"
    >
      <div class="cont">
        <code-editor
          :mode="'javascript'"
          :readonly="false"
          v-model="functionsCode"
          ref="gfEditor"
        ></code-editor>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="showEditFunctionsDialogFlag = false"
          class="button-sty"
          icon="el-icon-close"
        >
          {{ i18nt("designer.hint.cancel") }}
        </el-button>
        <el-button
          type="primary"
          @click="saveGlobalFunctions"
          class="button-sty"
          icon="el-icon-check"
        >
          {{ i18nt("designer.hint.confirm") }}
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="i18nt('详情数据脚本参数')"
      :visible.sync="showFormScriptParamDialog"
      v-if="showFormScriptParamDialog"
      :show-close="true"
      custom-class="dialog-style list-dialog"
      v-dialog-drag
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :append-to-body="true"
      :modal-append-to-body="true"
    >
      <div class="cont">
        <code-editor
          :mode="'javascript'"
          :readonly="false"
          v-model="formScriptParam"
          ref="gfEditor"
        ></code-editor>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="showFormScriptParamDialog = false"
          class="button-sty"
          icon="el-icon-close"
        >
          {{ i18nt("designer.hint.cancel") }}
        </el-button>
        <el-button
          type="primary"
          @click="saveFormScriptParam"
          class="button-sty"
          icon="el-icon-check"
        >
          {{ i18nt("designer.hint.confirm") }}
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="i18nt('详情数据脚本回调')"
      :visible.sync="showFormScriptSuccessDialog"
      v-if="showFormScriptSuccessDialog"
      :show-close="true"
      custom-class="dialog-style list-dialog"
      v-dialog-drag
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :append-to-body="true"
      :modal-append-to-body="true"
    >
      <div class="cont">
        <code-editor
          :mode="'javascript'"
          :readonly="false"
          v-model="formScriptSuccess"
          ref="gfEditor"
        ></code-editor>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="showFormScriptSuccessDialog = false"
          class="button-sty"
          icon="el-icon-close"
        >
          {{ i18nt("designer.hint.cancel") }}
        </el-button>
        <el-button
          type="primary"
          @click="saveFormScriptSuccess"
          class="button-sty"
          icon="el-icon-check"
        >
          {{ i18nt("designer.hint.confirm") }}
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      v-if="dialogVisible"
      custom-class="dialog-style list-dialog"
      :title="i18nt('流程节点可编辑表单配置')"
      :visible.sync="dialogVisible"
      :show-close="!0"
      :append-to-body="true"
      :modal="false"
      :close-on-click-modal="!1"
      :close-on-press-escape="!1"
      :destroy-on-close="!0"
      width="1220px"
      top="5vh"
      v-dialog-drag
      :fullscreen="true"
    >
      <div class="cont" style="padding-bottom: 8px">
        <el-table
          ref="singleTable"
          width="100%"
          :data="wfConfigData"
          height="100%"
          border=""
          row-key="columnId"
          stripe=""
          style="margin-bottom: 0px"
        >
          <el-table-column type="index" width="35" fixed="left"></el-table-column>
          <!-- <el-table-column :label="i18nt('服务')" width="150">
            <template slot-scope="{ row }">
              <el-select v-model="row.serveType" @change="changeServeType(row)">
                <el-option :value="1" label="正式"></el-option>
                <el-option :value="2" label="UAT"></el-option>
                <el-option :value="3" label="测试"></el-option>
                <el-option :value="4" label="自定义"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('自定义服务')" width="150">
            <template slot-scope="{ row }">
              <el-input
                v-model="row.serveName"
                clearable
                :disabled="row.serveType !== 4"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('组织编码')" width="250">
            <template slot-scope="{ row, $index }">
              <el-input v-model="row.companyCodes" clearable></el-input>
            </template>
          </el-table-column> -->
          <el-table-column :label="i18nt('组织编码')" width="250">
            <template slot-scope="{ row, $index }">
              <el-input
                class="search-input"
                max="200"
                v-model="row.companyCodes"
                @clear="clearBdCompanyEnv1(row)"
                v-el-readonly
                clearable
              >
                <i
                  slot="suffix"
                  class="el-input__icon el-icon-search"
                  @click="openBdCompanyEnvDialog1($index)"
                ></i>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('服务名称')" width="150">
            <template slot-scope="{ row }">
              {{ row.serveName }}
            </template>
          </el-table-column>
          <!-- <el-table-column :label="i18nt('流程模板编码')" width="150">
            <template slot-scope="{ row }">
              <el-input v-model="row.modelKey" clearable></el-input>
            </template>
          </el-table-column> -->
          <el-table-column :label="i18nt('流程模板序号')" width="150">
            <template slot-scope="{ row }">
              <base-input-number v-model="row.modelOrders" clearable></base-input-number>
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('节点步骤（多个值用“,”隔开）')" width="250">
            <template slot-scope="{ row }">
              <el-input v-model="row.taskSteps" clearable></el-input>
            </template>
          </el-table-column>
          <!--          <el-table-column :label="i18nt('设置')" width="150">
                      <template slot-scope="{row}">
                        <el-select v-model="row.type" clearable>
                          <el-option :value="1" label="可编辑"></el-option>
                          <el-option :value="2" label="仅显示"></el-option>
                          <el-option :value="3" label="隐藏"></el-option>
                        </el-select>
                      </template>
                    </el-table-column>-->
          <el-table-column
            :label="i18nt('designer.setting.actionColumn')"
            width="100"
            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="addItem"
              ></el-button>
            </template>
            <template slot-scope="scope">
              <el-button
                :title="i18nt('designer.setting.deleteTableColumn')"
                size="mini"
                type=""
                circle=""
                icon="el-icon-minus"
                @click="wfConfigData.splice(scope.$index, 1)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="dialog-footer" slot="footer">
        <el-button @click="dialogVisible = false" class="button-sty" icon="el-icon-close">
          {{ i18nt("designer.hint.cancel") }}
        </el-button>
        <el-button
          type="primary"
          @click="confirmWfConfigDataDialog"
          class="button-sty"
          icon="el-icon-check"
        >
          {{ i18nt("designer.hint.confirm") }}
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      v-if="dialogVisible2"
      custom-class="dialog-style list-dialog"
      :title="i18nt('流程通过时自动保存表单数据的节点配置')"
      :visible.sync="dialogVisible2"
      :show-close="!0"
      :append-to-body="true"
      :modal="false"
      :close-on-click-modal="!1"
      :close-on-press-escape="!1"
      :destroy-on-close="!0"
      width="1220px"
      top="5vh"
      v-dialog-drag
      :fullscreen="true"
    >
      <div class="cont" style="padding-bottom: 8px">
        <el-table
          ref="singleTable"
          width="100%"
          :data="wfAgreeConfigData"
          height="100%"
          border=""
          row-key="columnId"
          stripe=""
          style="margin-bottom: 0px"
        >
          <el-table-column type="index" width="35" fixed="left"></el-table-column>
          <!-- <el-table-column :label="i18nt('服务')" width="150">
            <template slot-scope="{ row }">
              <el-select v-model="row.serveType" @change="changeServeType(row)">
                <el-option :value="1" label="正式"></el-option>
                <el-option :value="2" label="UAT"></el-option>
                <el-option :value="3" label="测试"></el-option>
                <el-option :value="4" label="自定义"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('自定义服务')" width="150">
            <template slot-scope="{ row }">
              <el-input
                v-model="row.serveName"
                clearable
                :disabled="row.serveType !== 4"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('组织编码')" width="250">
            <template slot-scope="{ row, $index }">
              <el-input v-model="row.companyCodes" clearable></el-input>
            </template>
          </el-table-column> -->
          <el-table-column :label="i18nt('组织编码')" width="250">
            <template slot-scope="{ row, $index }">
              <el-input
                class="search-input"
                max="200"
                v-model="row.companyCodes"
                @clear="clearBdCompanyEnv2(row)"
                v-el-readonly
                clearable
              >
                <i
                  slot="suffix"
                  class="el-input__icon el-icon-search"
                  @click="openBdCompanyEnvDialog2($index)"
                ></i>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('服务名称')" width="150">
            <template slot-scope="{ row }">
              {{ row.serveName }}
            </template>
          </el-table-column>
          <!-- <el-table-column :label="i18nt('流程模板编码')" width="150">
            <template slot-scope="{ row }">
              <el-input v-model="row.modelKey" clearable></el-input>
            </template>
          </el-table-column> -->
          <el-table-column :label="i18nt('流程模板序号')" width="150">
            <template slot-scope="{ row }">
              <base-input-number v-model="row.modelOrders" clearable></base-input-number>
            </template>
          </el-table-column>
          <el-table-column :label="i18nt('节点步骤（多个值用“,”隔开）')" width="250">
            <template slot-scope="{ row }">
              <el-input v-model="row.taskSteps" clearable></el-input>
            </template>
          </el-table-column>
          <!--          <el-table-column :label="i18nt('设置')" width="150">
                      <template slot-scope="{row}">
                        <el-select v-model="row.type" clearable>
                          <el-option :value="1" label="可编辑"></el-option>
                          <el-option :value="2" label="仅显示"></el-option>
                          <el-option :value="3" label="隐藏"></el-option>
                        </el-select>
                      </template>
                    </el-table-column>-->
          <el-table-column
            :label="i18nt('designer.setting.actionColumn')"
            width="100"
            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="addItem2"
              ></el-button>
            </template>
            <template slot-scope="scope">
              <el-button
                :title="i18nt('designer.setting.deleteTableColumn')"
                size="mini"
                type=""
                circle=""
                icon="el-icon-minus"
                @click="wfAgreeConfigData.splice(scope.$index, 1)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="dialog-footer" slot="footer">
        <el-button
          @click="dialogVisible2 = false"
          class="button-sty"
          icon="el-icon-close"
        >
          {{ i18nt("designer.hint.cancel") }}
        </el-button>
        <el-button
          type="primary"
          @click="confirmWfConfigDataDialog2"
          class="button-sty"
          icon="el-icon-check"
        >
          {{ i18nt("designer.hint.confirm") }}
        </el-button>
      </div>
    </el-dialog>

    <formTemplateDialog
      v-if="showFormTemplateDialog"
      :visiable.sync="showFormTemplateDialog"
      @confirm="confirmFormTemplate"
      multi="false"
    />
    <wfObjConfigDialog
      v-if="showWfObjConfigDialog"
      :visiable.sync="showWfObjConfigDialog"
      @confirm="confirmWfObjConfigDialog"
      :formTemplate="designer.vueInstance.reportTemplate"
    />

    <bdCompanyEnvDialog
      v-if="showBdCompanyEnvDialog1"
      :visiable.sync="showBdCompanyEnvDialog1"
      @confirm="confirmBdCompanyEnvDialog1"
      :multi="false"
    />
    <bdCompanyEnvDialog
      v-if="showBdCompanyEnvDialog2"
      :visiable.sync="showBdCompanyEnvDialog2"
      @confirm="confirmBdCompanyEnvDialog2"
      :multi="false"
    />
  </div>
</template>

<script>
import i18n from "../../../../components/xform/utils/i18n";
import {
  deepClone,
  insertCustomCssToHead,
  insertGlobalFunctionsToHtml,
} from "../../../../components/xform/utils/util";
import formTemplateDialog from "../../../../views/bd/setting/form_template/dialog.vue";
import wfObjConfigDialog from "./wfObjConfigDialog.vue";
import bdCompanyEnvDialog from "@base/views/bd/setting/bd_company_env/dialog";
import Draggable from "vuedraggable";

export default {
  name: "form-setting",
  mixins: [i18n],
  components: {
    formTemplateDialog,
    wfObjConfigDialog,
    bdCompanyEnvDialog,
    Draggable,
  },
  props: {
    designer: Object,
    formConfig: Object,
  },
  inject: ["getDesignerConfig"],
  data() {
    return {
      designerConfig: this.getDesignerConfig(),

      formActiveCollapseNames: ["1", "2", "7"],

      formSizes: [
        { label: "default", value: "" },
        { label: "large", value: "large" },
        { label: "medium", value: "medium" },
        { label: "small", value: "small" },
        { label: "mini", value: "mini" },
      ],

      showEditFormCssDialogFlag: false,
      formCssCode: "",
      cssClassList: [],

      showEditFunctionsDialogFlag: false,
      functionsCode: "",

      showFormEventDialogFlag: false,
      formEventHandlerCode: "",
      curEventName: "",

      eventParamsMap: {
        onBeforeCreated: "onBeforeCreated(dataId,formCode,done) {",
        onFormCreated: "onFormCreated(dataId,formCode) {",
        onFormBeforeMounted: "onFormBeforeMounted(dataId,formCode, done) {",
        onFormMounted: "onFormMounted(dataId,formCode) {",
        onFormDataChange:
          "onFormDataChange(fieldName, newValue, oldValue, formModel, subFormName, subFormRowIndex) {",
        wfConfig: "wfConfig(dataId, formCode, formData) {",
        globalConfig: "globalConfig(dataId, formCode) {",
        //'onFormValidate':     'onFormValidate() {',
      },
      showVabsearchConfigDialog: false,
      vabsearchConfigType: 1,
      showFormTemplateDialog: false,

      formScriptParam: null,
      showFormScriptParamDialog: false,
      formScriptSuccess: null,
      showFormScriptSuccessDialog: false,
      wfObjConfigs: [],
      showWfObjConfigDialog: false,

      dialogVisible: false,
      wfConfigData: [],

      dialogVisible2: false,
      wfAgreeConfigData: [],

      showBdCompanyEnvDialog1: false,
      showBdCompanyEnvDialog2: false,

      globalConfigParams: ["dataId", "formCode"],

      tip1: `流程主题表达式设置说明。

1、可使用参数：
wf：流程对象
    name：流程名称
    objTypeCode：单据类型编码
    objId：对象id
    procInstId：act流程实例id
    procDefId：act流程定义id
    modelId：act流程模板id
    starterId：启动人ID
    starterName：启动人姓名
    uuid：流程实例唯一标识
identityInfo：身份信息对象
    id：用户ID
    loginAccount：用户登录名
    nickName：用户姓名
    companyCode：企业编码
    parentCompanyCode：集团企业编码
nowDate：当前时间
nowDateStr：当前时间字符串（yyyy-MM-dd HH:mm:ss）
nowDayStr：当前天字符串（yyyy-MM-dd）
tableName：数据库表名，取表单设计中维护的表名作为参数名称
    tableField1：数据库表字段名1
    tableField2：数据库表字段名2
    tableField3：数据库表字段名3
    ......

2、可使用函数：
func.orgName(orgId)：根据机构id获取机构名称
func.convertDate(date, format)：时间转换，如当前时间转为当前天字符串，则$\{func.convertDate(nowDate, 'yyyy-MM-dd')\}，当前时间转为当前月字符串，则$\{func.convertDate(nowDate, 'yyyy-MM')\}

3、配置示例
比如表名为：pm_product_project，配置如下：
$\{wf.starterName\}提交的$\{pm_product_project.product_code\}$\{pm_product_project.product_name\}$\{wf.name\}$\{pm_product_project.sn\}$\{func.orgName(pm_product_project.f_sale_org_id)\}$\{nowDayStr\}`,
    };
  },
  created() {
    //导入表单JSON后需要重新加载自定义CSS样式！！！
    this.designer.handleEvent("form-json-imported", () => {
      this.formCssCode = this.formConfig.cssCode || "";
      insertCustomCssToHead(this.formCssCcssCodeode);
      this.extractCssClass();
      this.designer.emitEvent("form-css-updated", deepClone(this.cssClassList));
    });
  },
  mounted() {
    /* SettingPanel和FormWidget为兄弟组件, 在FormWidget加载formConfig时，
         此处SettingPanel可能无法获取到formConfig.cssCode, 故加个延时函数！ */
    setTimeout(() => {
      this.formCssCode = this.formConfig.cssCode || "";
      insertCustomCssToHead(this.formCssCode);
      this.extractCssClass();
      this.designer.emitEvent("form-css-updated", deepClone(this.cssClassList));
    }, 1200);
    this.getListByObjTypeCode();
  },
  methods: {
    showEventCollapse() {
      if (this.designerConfig["eventCollapse"] === undefined) {
        return true;
      }

      return !!this.designerConfig["eventCollapse"];
    },

    editFormCss() {
      this.formCssCode = this.designer.formConfig.cssCode;
      this.showEditFormCssDialogFlag = true;
    },

    extractCssClass() {
      let regExp = /\..*{/g;
      let result = this.formCssCode ? this.formCssCode.match(regExp) : [];
      let cssNameArray = [];

      if (!!result && result.length > 0) {
        result.forEach((rItem) => {
          let classArray = rItem.split(","); //切分逗号分割的多个class
          if (classArray.length > 0) {
            classArray.forEach((cItem) => {
              let caItem = cItem.trim();
              if (caItem.indexOf(".", 1) !== -1) {
                //查找第二个.位置
                let newClass = caItem.substring(
                  caItem.indexOf(".") + 1,
                  caItem.indexOf(".", 1)
                ); //仅截取第一、二个.号之间的class
                if (!!newClass) {
                  cssNameArray.push(newClass.trim());
                }
              } else if (caItem.indexOf(" ") !== -1) {
                //查找第一个空格位置
                let newClass = caItem.substring(
                  caItem.indexOf(".") + 1,
                  caItem.indexOf(" ")
                ); //仅截取第一、二个.号之间的class
                if (!!newClass) {
                  cssNameArray.push(newClass.trim());
                }
              } else {
                if (caItem.indexOf("{") !== -1) {
                  //查找第一个{位置
                  let newClass = caItem.substring(
                    caItem.indexOf(".") + 1,
                    caItem.indexOf("{")
                  );
                  cssNameArray.push(newClass.trim());
                } else {
                  let newClass = caItem.substring(caItem.indexOf(".") + 1);
                  cssNameArray.push(newClass.trim());
                }
              }
            });
          }
        });
      }

      //this.cssClassList.length = 0
      this.cssClassList.splice(0, this.cssClassList.length); //清除数组必须用splice，length=0不会响应式更新！！
      this.cssClassList = Array.from(new Set(cssNameArray)); //数组去重
    },

    saveFormCss() {
      this.extractCssClass();
      this.designer.formConfig.cssCode = this.formCssCode;
      insertCustomCssToHead(this.formCssCode);
      this.showEditFormCssDialogFlag = false;

      this.designer.emitEvent("form-css-updated", deepClone(this.cssClassList));
    },

    editGlobalFunctions() {
      this.functionsCode = this.designer.formConfig.functions;
      this.showEditFunctionsDialogFlag = true;
    },
    editFormScriptParam() {
      this.formScriptParam = this.designer.formConfig.formScriptParam;
      this.showFormScriptParamDialog = true;
    },

    saveGlobalFunctions() {
      const codeHints = this.$refs.gfEditor.getEditorAnnotations();
      let syntaxErrorFlag = false;
      if (!!codeHints && codeHints.length > 0) {
        codeHints.forEach((chItem) => {
          if (chItem.type === "error") {
            syntaxErrorFlag = true;
          }
        });

        if (syntaxErrorFlag) {
          this.$message.error(this.i18nt("designer.setting.syntaxCheckWarning"));
          return;
        }
      }

      this.designer.formConfig.functions = this.functionsCode;
      insertGlobalFunctionsToHtml(this.functionsCode);
      this.showEditFunctionsDialogFlag = false;
    },

    editFormEventHandler(eventName) {
      this.curEventName = eventName;
      this.formEventHandlerCode = this.formConfig[eventName];
      this.showFormEventDialogFlag = true;
    },

    saveFormEventHandler() {
      const codeHints = this.$refs.ecEditor.getEditorAnnotations();
      let syntaxErrorFlag = false;
      if (!!codeHints && codeHints.length > 0) {
        codeHints.forEach((chItem) => {
          if (chItem.type === "error") {
            syntaxErrorFlag = true;
          }
        });

        if (syntaxErrorFlag) {
          this.$message.error(this.i18nt("designer.setting.syntaxCheckWarning"));
          return;
        }
      }

      this.formConfig[this.curEventName] = this.formEventHandlerCode;
      this.showFormEventDialogFlag = false;
    },
    openFormTemplate(flag) {
      this.formTemplateFlag = flag;
      this.showFormTemplateDialog = true;
    },
    confirmFormTemplate(rows) {
      if (rows.length) {
        let row = rows[0];
        if (this.formTemplateFlag == 1) {
          //新增
          this.$set(this.formConfig, "addFormCode", row.formCode);
          this.$set(this.formConfig, "addFormName", row.formName);
        } else {
          //查看
          this.$set(this.formConfig, "editFormCode", row.formCode);
          this.$set(this.formConfig, "editFormName", row.formName);
        }
      }
    },
    getEventButtonName(funStr) {
      let name = this.i18nt("designer.setting.addEventHandler");
      if (funStr) name = "已维护";
      return name;
    },
    saveFormScriptParam() {
      const codeHints = this.$refs.gfEditor.getEditorAnnotations();
      let syntaxErrorFlag = false;
      if (!!codeHints && codeHints.length > 0) {
        codeHints.forEach((chItem) => {
          if (chItem.type === "error") {
            syntaxErrorFlag = true;
          }
        });

        if (syntaxErrorFlag) {
          this.$message.error(this.i18nt("designer.setting.syntaxCheckWarning"));
          return;
        }
      }

      this.designer.formConfig.formScriptParam = this.formScriptParam;
      this.showFormScriptParamDialog = false;
    },
    editFormScriptSuccess() {
      this.formScriptSuccess = this.designer.formConfig.formScriptSuccess;
      this.showFormScriptSuccessDialog = true;
    },
    saveFormScriptSuccess() {
      const codeHints = this.$refs.gfEditor.getEditorAnnotations();
      let syntaxErrorFlag = false;
      if (!!codeHints && codeHints.length > 0) {
        codeHints.forEach((chItem) => {
          if (chItem.type === "error") {
            syntaxErrorFlag = true;
          }
        });

        if (syntaxErrorFlag) {
          this.$message.error(this.i18nt("designer.setting.syntaxCheckWarning"));
          return;
        }
      }

      this.designer.formConfig.formScriptSuccess = this.formScriptSuccess;
      this.showFormScriptSuccessDialog = false;
    },
    openWfObjConfigDialog() {
      this.showWfObjConfigDialog = true;
    },
    confirmWfObjConfigDialog(rows) {
      this.wfObjConfigs = rows || [];
    },
    getListByObjTypeCode() {
      let reportTemplate = this.designer.vueInstance.reportTemplate;
      this.$http({
        url: `/${reportTemplate.serviceName}/wf_obj_config/listByObjTypeCode`,
        method: `post`,
        data: {
          stringOne: reportTemplate.objTypeCode,
        },
        isLoading: true,
        success: (res) => {
          this.wfObjConfigs = res.objx || [];
        },
      });
    },
    changeWfEnabled(val) {
      this.designer.vueInstance.reportTemplate.objTypeName = null;
      this.designer.vueInstance.reportTemplate.fromWfFormCode = null;
    },
    openWfConfigDataDialog() {
      let wfConfigData = this.formConfig.wfConfigData || [];
      this.dialogVisible = true;
      this.wfConfigData = this.$baseLodash.cloneDeep(wfConfigData);
    },
    addItem() {
      let newItem = {
        type: null,
        serveType: null,
        serveName: null,
        modelKey: null,
        modelOrders: undefined,
        taskSteps: null,
        companyCodes: null,
      };
      this.wfConfigData.push(newItem);
    },
    confirmWfConfigDataDialog() {
      let tableData = this.wfConfigData;
      let map = {};
      for (let i = 0; i < tableData.length; i++) {
        let item = tableData[i];
        if (!item.serveName) {
          this.$message({
            type: "error",
            message: "服务名称不能为空",
          });
          return;
        }
        if (!item.companyCodes) {
          this.$message({
            type: "error",
            message: "组织编码不能为空",
          });
          return;
        }
        let modelOrders = item.modelOrders ?? "";

        let serveName = item.serveName;
        let companyCodes = item.companyCodes;
        let key = serveName + "_" + companyCodes + "_" + modelOrders;
        if (!map[key]) {
          map[key] = true;
        } else {
          this.$message({
            type: "error",
            message: "[服务+组织+流程模板序号]不能重复",
          });
          return;
        }
      }

      this.dialogVisible = !1;
      this.formConfig.wfConfigData = this.wfConfigData;
    },

    openWfConfigDataDialog2() {
      let wfAgreeConfigData = this.formConfig.wfAgreeConfigData || [];
      this.dialogVisible2 = true;
      this.wfAgreeConfigData = this.$baseLodash.cloneDeep(wfAgreeConfigData);
    },
    addItem2() {
      let newItem = {
        type: null,
        serveType: null,
        serveName: null,
        modelKey: null,
        modelOrders: undefined,
        taskSteps: null,
        companyCodes: null,
      };
      this.wfAgreeConfigData.push(newItem);
    },
    confirmWfConfigDataDialog2() {
      let tableData = this.wfAgreeConfigData;

      let map = {};
      for (let i = 0; i < tableData.length; i++) {
        let item = tableData[i];
        if (!item.serveName) {
          this.$message({
            type: "error",
            message: "服务名称不能为空",
          });
          return;
        }
        if (!item.companyCodes) {
          this.$message({
            type: "error",
            message: "组织编码不能为空",
          });
          return;
        }
        let modelOrders = item.modelOrders ?? "";

        let serveName = item.serveName;
        let companyCodes = item.companyCodes;
        let key = serveName + "_" + companyCodes + "_" + modelOrders;
        if (!map[key]) {
          map[key] = true;
        } else {
          this.$message({
            type: "error",
            message: "[服务+组织+流程模板序号]不能重复",
          });
          return;
        }
      }
      this.dialogVisible2 = !1;
      this.formConfig.wfAgreeConfigData = this.wfAgreeConfigData;
    },

    clearBdCompanyEnv1(row) {
      row.serveName = null;
      row.companyCodes = null;
    },
    openBdCompanyEnvDialog1(rowIndex) {
      this.operateIndex = rowIndex;
      this.showBdCompanyEnvDialog1 = true;
    },
    confirmBdCompanyEnvDialog1(rows) {
      if (rows.length) {
        let row = rows[0];
        let item = this.wfConfigData[this.operateIndex];
        item.serveName = row.bdService;
        item.companyCodes = row.bdCompanyCode;
      }
    },

    clearBdCompanyEnv2(row) {
      row.serveName = null;
      row.companyCodes = null;
    },
    openBdCompanyEnvDialog2(rowIndex) {
      this.operateIndex = rowIndex;
      this.showBdCompanyEnvDialog2 = true;
    },
    confirmBdCompanyEnvDialog2(rows) {
      if (rows.length) {
        let row = rows[0];
        let item = this.wfAgreeConfigData[this.operateIndex];
        item.serveName = row.bdService;
        item.companyCodes = row.bdCompanyCode;
      }
    },
    addOtherTab() {
      if (!this.formConfig.otherTabList) {
        this.$set(this.formConfig, "otherTabList", []);
      }
      this.formConfig.otherTabList.push({
        label: null,
        formCode: null,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.setting-form {
  ::v-deep .el-form-item__label {
    font-size: 13px;
    //text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  ::v-deep .el-form-item--mini.el-form-item {
    margin-bottom: 6px;
  }

  .radio-group-custom {
    ::v-deep .el-radio-button__inner {
      padding-left: 12px;
      padding-right: 12px;
    }
  }

  .custom-divider.el-divider--horizontal {
    margin: 10px 0;
  }
}

.setting-collapse {
  ::v-deep .el-collapse-item__content {
    padding-bottom: 6px;
  }

  ::v-deep .el-collapse-item__header {
    font-weight: bold;
  }
}

.small-padding-dialog {
  ::v-deep .el-dialog__body {
    padding: 6px 15px 12px 15px;
  }
}
::v-deep .el-textarea .el-textarea__inner {
  word-break: break-all;
}
</style>
