<template>
  <el-dialog
    :append-to-body="true"
    :visible.sync="dialogBtnActionVisible"
    top="30px"
    @close="$refs['btnActionForm'].resetFields()"
    :before-close="cancel"
    :title="dialogBtnActionTiTle + $t('form.activity_button')"
    width="60%"
  >
    <div class="obpm-main mt-3">
      <div id="contentTable" class="dialog-content">
        <el-form
          :model="btnActionForm"
          size="small"
          label-position="left"
          :rules="btnActionRules"
          ref="btnActionForm"
          label-width="90px"
        >
          <el-form-item :label="$t('form.name')" prop="name">
            <el-input v-model="btnActionForm.name" class="width-400"></el-input>
          </el-form-item>
          <el-form-item :label="$t('form.name_label_script')">
            <el-input
              type="textarea"
              :rows="6"
              :placeholder="$t('placeholder.name_label_script')"
              class="width-400"
              v-model="btnActionForm.label"
            ></el-input>
            <i
              class="el-icon-edit-outline"
              @click="showScriptEditor('btnActionFormLabel')"
            ></i>
          </el-form-item>
          <el-form-item :label="$t('form.multi_language')">
            <el-input
              v-model="btnActionForm.multiLanguageLabel"
              readonly
              class="width-400"
            ></el-input>
            <el-button
              plain
              @click="showMultiLanguage('btnActionFormMultiLang')"
              class="ml-2"
              >{{ $t('btns.select') }}</el-button
            >
          </el-form-item>
          <el-form-item :label="$t('form.action')" prop="type">
            <el-select
              v-model="btnActionForm.type"
              :placeholder="$t('placeholder.select')"
              class="width-400"
              :disabled="dialogBtnActionTiTle === $t('form.edit')"
              @change="changeActionType"
            >
              <el-option
                v-for="item in btnActionTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <p
              style="color: #33bd00; line-height: 1; margin-top: 10px"
              v-if="showNotSupportTxt"
            >
              *{{$t('unsupport')}}
            </p>
          </el-form-item>
          <el-form-item
            :label="$t('form.with_old_data')"
            v-if="btnActionForm.type === '42'"
          >
            <el-checkbox v-model="btnActionForm.withOld"></el-checkbox>
          </el-form-item>
          <el-form-item
            :label="$t('form.summary_template')"
            v-if="btnActionForm.type === '37'"
          >
            <el-select
              v-model="btnActionForm.transpond"
              :placeholder="$t('placeholder.select')"
              class="width-400"
            >
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="item in summarysListData"
                :key="item.id"
              ></el-option>
            </el-select>
            <p style="color: #33bd00; line-height: 1; margin-top: 10px">
              *{{$t('view.define_format_content')}}
            </p>
          </el-form-item>
          <el-form-item :label="$t('form.icon_type')">
            <el-radio-group v-model="btnActionForm.icontype">
              <el-radio label="img">{{ $t('form.img') }}</el-radio>
              <el-radio label="font">{{ $t('form.font') }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="$t('form.icon')">
            <div v-if="btnActionForm.icontype === 'img'">
              <img
                class="imgIcon"
                :src="btnActionForm.iconurl"
                v-show="btnActionForm.iconurl"
              />
              <el-button size="small" @click="btnActionFormSelectImg">{{
                $t('btns.select')
              }}</el-button>
              <el-button size="small" @click="resetBtnActionFormiconurl">{{
                $t('btns.clean')
              }}</el-button>
              <IconSelect
                :visible.sync="btnActionFormIconSelectCheck"
                :logoUrl="btnActionForm.iconurl"
                @select-ok="onBtnActionFormSelectIconOk"
                v-if="btnActionFormIconSelectCheck"
                :innerDialog="true"
              />
            </div>
            <div v-if="btnActionForm.icontype === 'font'">
              <i
                :class="btnActionForm.fontUrl"
                class="imgIcon"
                v-if="btnActionForm.fontUrl !== ''"
              ></i>
              <el-button size="small" @click="btnActionFormSelectFont">{{
                $t('btns.select')
              }}</el-button>
              <el-button size="small" @click="resetBnActionFormiconurl">{{
                $t('btns.clean')
              }}</el-button>
              <FontSelect
                :visible.sync="btnActionFormFontSelectCheck"
                :logoUrl="btnActionForm.fontUrl"
                @select-ok="onBtnActionFormSelectFontOk"
                v-show="btnActionFormFontSelectCheck"
                :innerDialog="true"
              />
            </div>
            <div v-if="btnActionForm.icontype === ''">
              <el-button size="small" disabled>{{
                $t('btns.choose')
              }}</el-button>
              <el-button size="small">{{ $t('btns.clean') }}</el-button>
            </div>
          </el-form-item>
          <el-form-item :label="$t('form.color_type')">
            <el-select
              v-model="btnActionForm.colorType"
              size="small"
              class="width-400"
            >
              <el-option
                value="default"
                :label="$t('form.default')"
              ></el-option>
              <el-option
                value="primary"
                :label="$t('form.primary')"
                style="background-color: #337ab7"
              ></el-option>
              <el-option
                value="success"
                :label="$t('form.success')"
                style="background-color: #449d44"
              ></el-option>
              <el-option
                value="info"
                :label="$t('form.info')"
                style="background-color: #5bc0de"
              ></el-option>
              <el-option
                value="warning"
                :label="$t('form.warning')"
                style="background-color: #ec971f"
              ></el-option>
              <el-option
                value="danger"
                :label="$t('form.danger')"
                style="background-color: #d9534f"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('form.process_method')"
            v-if="btnActionForm.type === '5'"
          >
            <el-radio label="0" v-model="btnActionForm.workFlowType">{{
              $t('form.default_process')
            }}</el-radio>
            <el-radio label="1" v-model="btnActionForm.workFlowType">{{
              $t('form.free_flow')
            }}</el-radio>
          </el-form-item>
          <el-form-item
            :label="$t('form.action_process')"
            v-if="btnActionForm.type == 5 && btnActionForm.workFlowType == 0"
            prop="onActionFlow"
          >
            <el-select
              v-model="btnActionForm.onActionFlow"
              :placeholder="$t('placeholder.select')"
              class="width-400"
              @change="updateActionFlow"
            >
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="item in flowListData"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('form.process_startup_mode')"
            v-if="btnActionForm.type === '33'"
          >
            <el-radio label="0" v-model="btnActionForm.editMode">{{
              $t('form.select_by_user')
            }}</el-radio>
            <el-radio label="1" v-model="btnActionForm.editMode">{{
              $t('form.iscript')
            }}</el-radio>
          </el-form-item>
          <el-form-item
            :label="$t('form.start_flow_script')"
            v-if="
              btnActionForm.editMode == '1' && btnActionForm.type === '33'
            "
          >
            <el-input
              type="textarea"
              :rows="6"
              class="width-400"
              v-model="btnActionForm.startFlowScript"
            ></el-input>
            <i
              class="el-icon-edit-outline"
              @click="showScriptEditor('btnActionFormStartFlowScript')"
            ></i>
          </el-form-item>
          <el-form-item
            :label="$t('form.on_action_print')"
            v-if="btnActionForm.type == '30'"
            prop="onActionPrint"
          >
            <!-- 隐藏需要传id -->
            <el-input
              v-model="btnActionForm.onActionPrint"
              class="width-400"
              readonly
              type="hidden"
              v-if="false"
            ></el-input>
            <!-- 需显示name -->
            <el-input
              v-model="actionPrintValue"
              class="width-400"
              readonly
            ></el-input>
            <el-button plain @click="showEidtPrint" class="ml-2">{{
              $t('btns.edit_print')
            }}</el-button>
          </el-form-item>
          <el-form-item
            :label="$t('form.file_name_script')"
            v-if="btnActionForm.type == '26'"
            key="btnActionForm.fileNameScript"
            prop="fileNameScript"
          >
            <el-input
              type="textarea"
              :rows="6"
              placeholder="/*创建文件并返回文件路径或文件对象*/"
              class="width-400"
              v-model="btnActionForm.fileNameScript"
            ></el-input>
            <i
              class="el-icon-edit-outline"
              @click="showScriptEditor('btnActionFormFileNameScript')"
            ></i>
          </el-form-item>
          <el-form-item
            :label="$t('form.type')"
            v-if="btnActionForm.type == '43'"
          >
            <el-radio v-model="btnActionForm.jumpMode" label="0">{{
              $t('form.jump_to_dynaform')
            }}</el-radio>
            <el-radio v-model="btnActionForm.jumpMode" label="1">{{
              $t('form.jump_to_url')
            }}</el-radio>
          </el-form-item>
          <el-form-item
            :label="$t('form.jump_config')"
            v-if="showJumpsettings"
          >
            <p>
              {{ $t('form.module') }}：
              <el-select
                v-model="btnActionForm.moduleSelect"
                :placeholder="$t('placeholder.select')"
                @change="changeModules"
              >
                <el-option
                  v-for="item in allmodulesData"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id"
                ></el-option>
              </el-select>
            </p>
            <p>
              {{ $t('form.target_form') }}：
              <el-select
                v-model="btnActionForm.formSelect"
                :placeholder="$t('placeholder.select')"
              >
                <el-option
                  v-for="item in moduleFormOptions"
                  :label="item.name"
                  :value="item.id"
                  :key="item.id"
                ></el-option>
              </el-select>
            </p>
          </el-form-item>
          <el-form-item
            :label="$t('form.dispatcher_url')"
            v-if="btnActionForm.jumpMode == '1' && btnActionForm.type == '43'"
          >
            <el-input
              type="textarea"
              :rows="6"
              class="width-400"
              v-model="btnActionForm.dispatcherUrl"
            ></el-input>
            <i
              class="el-icon-edit-outline"
              @click="showScriptEditor('btnActionFormDispatcherUrl')"
            ></i>
          </el-form-item>
          <el-form-item
            :label="$t('form.paramete')"
            v-if="btnActionForm.jumpMode == '1' && btnActionForm.type == '43'"
          >
            <template>
              <el-table :data="btnActionForm.dispatcherParams">
                <el-table-column :label="$t('form.parametername')">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.paramKey"
                      :placeholder="$t('placeholder.content')"
                      size="mini"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('form.parametervalue')">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.paramValue"
                      :placeholder="$t('placeholder.content')"
                      size="mini"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column>
                  <template slot-scope="scope">
                    <el-button
                      size="small"
                      @click="delTbParamsSystem(scope.$index)"
                      type="danger"
                      >{{ $t('btns.delete') }}</el-button
                    >
                  </template>
                </el-table-column>
                <el-table-column :label="$t('form.op')">
                  <template slot="header">
                    <el-button size="small" @click="addTbParamsSystem">{{
                      $t('btns.add')
                    }}</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-form-item>
          <el-form-item
            :label="$t('form.open_type')"
            v-if="btnActionForm.type == '43'"
          >
            <el-radio-group v-model="btnActionForm.jumpActOpenType">
              <el-radio label="0">{{ $t('form.current_page') }}</el-radio>
              <el-radio label="1">{{ $t('form.pop_layer') }}</el-radio>
              <el-radio label="2">{{ $t('form.tabs') }}</el-radio>
              <el-radio label="3">{{ $t('form.new_page') }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="$t('form.status')">
            <el-input
              v-model="btnActionForm.stateToShow"
              class="width-400"
              readonly
            ></el-input>
            <i class="el-icon-document" @click="showStateSelect"></i>
          </el-form-item>
          <el-form-item :label="$t('form.before_action_script')">
            <el-input
              type="textarea"
              :rows="6"
              :placeholder="$t('placeholder.before_action_script')"
              class="width-400"
              v-model="btnActionForm.beforeActionScript"
            ></el-input>
            <i
              class="el-icon-edit-outline"
              @click="showScriptEditor('btnActionFormBeforeActionScript')"
            ></i>
          </el-form-item>
          <el-form-item
            :label="$t('form.actionselection')"
            v-if="btnActionForm.type == '13'"
          >
            <el-radio v-model="btnActionForm.actionSelection" label="0"
              >{{$t('radio.straight')}}</el-radio
            >
            <el-radio v-model="btnActionForm.actionSelection" label="1"
              >{{$t('radio.get_params')}}</el-radio
            >
          </el-form-item>
          <el-form-item
            :label="$t('label.action_form')"
            v-if="
              btnActionForm.type == '13' && btnActionForm.actionSelection == '1'
            "
            prop="relatedFormId"
          >
            <el-select
              v-model="btnActionForm.relatedFormId"
              :placeholder="$t('placeholder.select')"
            >
              <el-option
                v-for="item in relatedFormOption"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('form.actionscript')"
            v-if="btnActionForm.type == '13'"
          >
            <el-input
              type="textarea"
              :rows="6"
              :placeholder="$t('placeholder.action_script')"
              class="width-400"
              v-model="btnActionForm.actionScript"
            ></el-input>
            <i
              class="el-icon-edit-outline"
              @click="showScriptEditor('btnActionFormActionScript')"
            ></i>
          </el-form-item>
          <el-form-item
            :label="$t('form.afteractionscript')"
            v-if="showAfterActionScript"
          >
            <el-input
              type="textarea"
              :rows="6"
              :placeholder="$t('placeholder.action_script')"
              class="width-400"
              v-model="btnActionForm.afterActionScript"
            ></el-input>
            <i
              class="el-icon-edit-outline"
              @click="showScriptEditor('btnActionFormAfterActionScript')"
            ></i>
          </el-form-item>
          <el-form-item
            :label="$t('form.retractbeforeactionscript')"
            v-if="btnActionForm.type == '5'"
          >
            <el-input
              type="textarea"
              :rows="6"
              :placeholder="$t('placeholder.retract_before_action_script')"
              class="width-400"
              v-model="btnActionForm.retractBeforeActionScript"
            ></el-input>
            <i
              class="el-icon-edit-outline"
              @click="
                showScriptEditor('btnActionFormRetractBeforeActionScript')
              "
            ></i>
          </el-form-item>
          <el-form-item
            :label="$t('form.retract_after_action_script')"
            v-if="btnActionForm.type == '5'"
          >
            <el-input
              type="textarea"
              :rows="6"
              :placeholder="$t('placeholder.action_script')"
              class="width-400"
              v-model="btnActionForm.retractAfterActionScript"
            ></el-input>
            <i
              class="el-icon-edit-outline"
              @click="showScriptEditor('btnActionFormRetractAfterActionScript')"
            ></i>
          </el-form-item>
          <el-form-item
            :label="$t('form.actiontype')"
            v-if="btnActionForm.type == '13'"
          >
            <el-radio-group v-model="btnActionForm.actionType">
              <el-radio label="0">{{ $t('form.none') }}</el-radio>
              <el-radio label="1">{{ $t('form.back') }}</el-radio>
              <el-radio label="2">{{ $t('form.close') }}</el-radio>
              <el-radio label="3">{{ $t('form.jump') }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            :label="$t('form.dispatcher_url')"
            v-if="btnActionForm.actionType == '3' && btnActionForm.type == '13'"
          >
            <el-input
              type="textarea"
              :rows="6"
              class="width-400"
              v-model="btnActionForm.actionDispatcherUrlScript"
            ></el-input>
            <i
              class="el-icon-edit-outline"
              @click="
                showScriptEditor('btnActionFormActionDispatcherUrlScript')
              "
            ></i>
          </el-form-item>
          <el-form-item :label="$t('form.readonly_script')">
            <el-input
              type="textarea"
              :rows="6"
              :placeholder="$t('placeholder.boolean_value')"
              class="width-400"
              v-model="btnActionForm.readonlyScript"
            ></el-input>
            <i
              class="el-icon-edit-outline"
              @click="showScriptEditor('btnActionFormReadonlyScript')"
            ></i>
          </el-form-item>
          <el-form-item :label="$t('form.hidden_script')">
            <el-input
              type="textarea"
              :rows="6"
              :placeholder="$t('placeholder.boolean_value')"
              class="width-400"
              v-model="btnActionForm.hiddenScript"
            ></el-input>
            <i
              class="el-icon-edit-outline"
              @click="showScriptEditor('btnActionFormHiddenScript')"
            ></i>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="bar d-inline-block float-right" slot="footer">
      <el-button size="small" @click="btnActionCancel('btnActionForm')">{{
        $t('btns.cancel')
      }}</el-button>
      <el-button
        type="primary"
        size="small"
        @click="btnActionNewSave('btnActionForm')"
        :loading="btnLoading"
        >{{ $t('btns.save_new') }}</el-button
      >
      <el-button
        type="primary"
        size="small"
        @click="btnActionSave('btnActionForm')"
        :loading="btnLoading"
        >{{ $t('btns.confirm') }}</el-button
      >
    </div>

    <!-- 多语言弹窗 -->
    <!-- multiVisible: 弹框显示  closeMultiLanguage： 关闭前回调  selectRowValue：选择行  isNested：是否为内置嵌套的弹窗 languageData: 多语言数据  delMultiLanguage：删除多语言  changeLanguageParams：参数改变 -->
    <MultiLanguages
      :multiVisible="languagesVisible"
      @closeMultiLanguage="languagesVisible = false"
      @selectRowValue="handelMultiLanguage"
      @showMultiVisible="showMultiVisible"
      :isNested="true"
      :languageData="languageData"
      @delMultiLanguage="delMultiLanguage"
      @changeLanguageParams="changeLanguageParams"
      @resetMultiLanguage="resetMultiLanguage"
    />

    <!-- 选择状态 -->
    <!-- stateSelectVisible： 弹窗显示   setStateToShow： 子传父的数据  -->
    <StateSelect
      ref="status"
      :stateVisible="stateSelectVisible"
      @closeStateVisible="stateSelectVisible = false"
      @setStateToShow="handleStateToShow"
      :isNested="true"
    />

    <!-- 脚本选择器弹窗 -->
    <!-- scriptEditorVisible:弹窗显示   showScritptEditorCode：将文本框的值传给编译器  handleScriptEditor：将编译器的值传给textarea-->
    <ScriptEditorSelect
      v-if="scriptEditorVisible"
      :scriptEditorVisible="scriptEditorVisible"
      :editorCode="showScritptEditorCode"
      @closeScriptEditorDialog="scriptEditorVisible = false"
      @saveScriptEditor="handleScriptEditor"
      :isNested="true"
    />

    <!-- 打印模板弹窗 -->
    <EditPrint
      v-if="editPrintVisible"
      :editPrintVisible="editPrintVisible"
      @closeEditPrintDialog="editPrintVisible = false"
      @searchReportByName="searchReportByName"
      @searchReportByPageNo="searchReportByPageNo"
      @searchReportByLinesPerPage="searchReportByLinesPerPage"
      @printValue="getPrintValue"
      :editPrintData="editPrintData"
      :isNested="true"
    />
  </el-dialog>
</template>
<script>
import { getLogoUrl, getStateLabels } from '@/service/CommontoolsAPI.js'
import {
  getReportsListBySearch,
  getModuleProcessList,
} from '@/service/ModulesApi.js'
import { getAllmodules } from '@/service/CommonApi.js'

import {
  getSummarysListData,
  getModuleFormList,
  addOperationColumn,
  updateOperationColumn,
} from '@/service/FormApi.js'
import {
  getMultiLanguageList,
  deleteMultiLanguageList,
} from '@/service/MultiLanguageAPI.js'

import IconSelect from '@/components/Common/icon_select'
import FontSelect from '@/components/Common/font_select'
import MultiLanguages from '@/components/Common/languages_select'
import StateSelect from '@/components/Common/state_select'
import ScriptEditorSelect from '@/components/Common/scriptEditor'
import EditPrint from '@/components/Common/edit_print'
import { nameCheck, checkHasId } from '@/utils/utils.js'
import {delMsg} from '@/utils/elementui'
export default {
  name: '',
  components: {
    IconSelect,
    FontSelect,
    MultiLanguages,
    ScriptEditorSelect,
    EditPrint,
    StateSelect,
  },
  data() {
    return {
      btnActionRules: {
        name: [
          { required: true, message: this.$t('placeholder.name'), trigger: 'blur' },
          { validator: nameCheck, trigger: 'blur' },
        ],
        fileNameScript: [{ required: true, message: this.$t('placeholder.script_notnull'), trigger: 'blur' }],
        type: [{ required: true, message: this.$t('placeholder.action'), trigger: 'change' }],
        onActionFlow: [
          { required: true, message: this.$t('placeholder.effect_flow'), trigger: 'change' },
        ],
        relatedFormId: [
          { required: true, message:this.$t('placeholder.action_form'), trigger: 'change' },
        ],
        onActionPrint:[
          {required:true,message:this.$t('placeholder.print_template'),trigger:'change'}
        ]
      },

      languagesVisible: false, // 多语言操作弹层
      currentMultiLanguage: '', // 当前点击的是哪一个多语言弹窗
      languageData: {}, // 多语言数据
      languageParams: {
        label: '',
        text: '',
        type: '',
        currpage: 1,
        pagelines: 10,
      },
      moduleFormOptions: [], // 跳转设置模块数据
      relatedFormOption: [], // 动作关联表单数据

      btnActionFormIconSelectCheck: false, // 操作列图片弹层值
      btnActionFormFontSelectCheck: false, // 操作列字体图标弹层值
      stateSelectVisible: false, // 选择状态操作弹层
      stateLabelsData: [], //状态数据

      editPrintVisible: false, // 打印模板弹窗
      editPrintData: {}, // 打印模板的数据
      actionPrintValue: '', // 需要显示的打印模板

      scriptEditorVisible: false, // 脚本编辑器弹窗
      currentScriptEditor: '', // 当前点击的是哪一个脚本编辑器
      flowListData: [], //流程列表数据

      isOpenBtnActDialog: false, // 点击保存并新建后弹窗是否打开

      hasError: false,

      allmodulesData: [], // 跳转模式下的模块
      summarysListData: [], // 通过手机分享下的摘要

      btnLoading: false, // 按钮的加载显示
    }
  },
  created() {
    // 只有在新建页面才请求
    if (this.dialogBtnActionTiTle !== this.$t('form.edit')) {
      // 加载动作关联表单数据
      this.getRelatedForm(this.$route.query.moduleId)
    } else {
      // 操作页面获取目标表单
      if (this.btnActionForm.moduleSelect) {
        this.$nextTick(() => {
          this.getListFrom(this.btnActionForm.moduleSelect)
        })
      }
      // 操作页面获取动作关联表单
      if (this.btnActionForm.relatedFormId) {
        this.$nextTick(() => {
          this.getRelatedForm(this.$route.query.moduleId)
        })
      }
      // 操作页面获取模块
      if(this.btnActionForm.type === '43' && this.btnActionForm.jumpMode == '0'){
        this.getAllmodules()
      }
      //操作页面获取模块
      if(this.btnActionForm.type==='37'){
        this.getSummarysListData()
      }

      // 如果有流程就请求接口
      if (this.btnActionForm.onActionFlow) {
        this.getFlowList()
      }
      // 判断是否需要请求打印模板数据
      if (this.btnActionForm.onActionPrint) {
        let params = {
          appId: sessionStorage.getItem('appId'),
          moduleId: this.$route.query.moduleId,
          searchword: '',
          pageNo: 1,
          linesPerPage: 100000,
          isPrint: 1,
        }
        getReportsListBySearch(params, {
          onSucess: (response) => {
            if (response.data.errcode == 0) {
              this.editPrintData = response.data.data
              this.editPrintData.datas.some((item) => {
                if (item.id == this.btnActionForm.onActionPrint)
                  this.actionPrintValue = item.name
              })
            }
          },
        })
      }
    }
  },
  methods: {
    //重新显示多语言列表
    showMultiVisible() {
      this.languagesVisible = true
      this.getMultiLanguagetions()
    },

    /**
     * 更新作用流程的值
     */
    updateActionFlow(val){
      this.$set(this.btnActionForm, 'onActionFlow', val)
      this.$forceUpdate()
    },

    //获取流程列表
    getFlowList() {
      let searchParams = {
        moduleId: this.$route.query.moduleId,
        name: '',
        pageNo: 1,
        linesPerPage: 100000,
      }
      getModuleProcessList(searchParams, {
        onSucess: (response) => {
          if (response.data.errcode == 0) {
            this.flowListData = response.data.data.data
            this.btnActionForm.onActionFlow = checkHasId(
              this.flowListData,
              this.btnActionForm.onActionFlow
            )
          }
        },
      })
    },
    /**
     * 操作弹框保存并新建
     */
    btnActionNewSave(formName) {
      this.btnActionSave(formName)
      this.isOpenBtnActDialog = true
    },

    /**
     * 操作弹框确认
     */
    btnActionSave(formName) {
      let result = null
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.isOpenBtnActDialog = false
          if (this.btnActionForm.icontype) {
            if (this.btnActionForm.icontype === 'img') {
              if (!this.btnActionForm.iconurl) {
                try{
                  await delMsg(this.$t('msg.confirm_icon'), this.$t('msg.tip'))
                  this.btnActionForm.icon = ''
                  this.saveInfo()
                  result = true
                }catch(e){
                  console.log(e)
                }
              } else {
                let index = this.btnActionForm.iconurl.lastIndexOf('/icon/') + 5
                this.btnActionForm.icon = `{"icon":"${this.btnActionForm.iconurl.slice(
                  index
                )}","type":"${this.btnActionForm.icontype}"}`
                this.saveInfo()
                result = true
              }
            } else if (this.btnActionForm.icontype === 'font') {
              if (!this.btnActionForm.fontUrl) {
                try{
                  await delMsg(this.$t('msg.confirm_icon'), this.$t('msg.tip'))
                  this.btnActionForm.icon = ''
                  this.saveInfo()
                  result = true
                }catch(e){
                  console.log(e)
                }
              } else {
                this.btnActionForm.icon = `{"icon":"${this.btnActionForm.fontUrl}","type":"${this.btnActionForm.icontype}"}`
                this.saveInfo()
                result = true
              }
            }
          } else {
            this.saveInfo()
          }
        } else {
          result = false
          return false
        }
      })
      if (result != null) return result
    },

    saveInfo() {
      // 判断是否有多个流程处理按钮
      if (this.hasError) {
        this.$message.error(this.$t('placeholder.cant_deal_more'))
        return
      }
      if(!this.btnActionForm.onActionFlow && this.btnActionForm.type == 5 && this.btnActionForm.workFlowType == 0){
        this.$message.error(this.$t('placeholder.effect_flow'))
        return false
      }
      // 判断动作类型为跳转 且 类型为跳转到动态表单
      if (
        this.btnActionForm.type === '43' &&
        this.btnActionForm.jumpMode == '0'
      ) {
        if (
          this.btnActionForm.moduleSelect == '' ||
          this.btnActionForm.formSelect == ''
        ) {
          return this.$message.error(this.$t('placeholder.module_goldform'))
        }
      }
      let params = {
        formId: this.formId, // 表单id
        appId: sessionStorage.getItem('appId'),
        activityId: this.btnActionFromColumnId, // 当前行的id
      }

      // 类型转换
      let btnActionForm = {
        ...this.btnActionForm,
        type: parseInt(this.btnActionForm.type),
        actionSelection: parseInt(this.btnActionForm.actionSelection),
        actionType: parseInt(this.btnActionForm.actionType),
        editMode: parseInt(this.btnActionForm.editMode),
        jumpActOpenType: parseInt(this.btnActionForm.jumpActOpenType),
        jumpMode: parseInt(this.btnActionForm.jumpMode),
        workFlowType: parseInt(this.btnActionForm.workFlowType),
        dispatcherParams: JSON.stringify(this.btnActionForm.dispatcherParams),
        targetList:
          this.btnActionForm.formSelect + '|' + this.btnActionForm.moduleSelect, // 跳转设置模块 + 跳转设置目标表单
      }
      delete btnActionForm.moduleSelect
      delete btnActionForm.formSelect
      

      this.btnLoading = true
      // 编辑确认为更新
      if (this.dialogBtnActionTiTle === this.$t('form.edit')) {
        updateOperationColumn(params, btnActionForm, {
          onSucess: (response) => {
            if (response.data.errcode == 0) {
              // 先注释，与4.4stable一样
              // this.$message({
              //   message: this.$t('msg.ss'),
              //   type: "success",
              // });
              this.$parent.getFormActivityList()
              // 判断弹窗是否关闭
              if (this.isOpenBtnActDialog) {
                this.$parent.btnActionCreat()
              } else {
                this.$emit('closeBtnActionDialog')
              }
              this.resetBtnActionData('btnActionForm')
              this.btnLoading = false
            }
          },
        })
      } else {
        // 新建确认为添加
        this.btnLoading = true
        let len = this.$parent.listTableData.length;
        btnActionForm.orderno = len==0?0:this.$parent.listTableData[len - 1].orderno+1;
        // btnActionForm.orderno = this.$parent.listTableData.length
        addOperationColumn(params, btnActionForm, {
          onSucess: (response) => {
            if (response.data.errcode == 0) {
              // 暂时先隐藏，跟 4.4 stable一样
              /* this.$message({
                message: this.$t('msg.ss'),
                type: "success",
              }); */
              this.$parent.getFormActivityList()
              // 判断弹窗是否关闭
              if (this.isOpenBtnActDialog) {
                this.$parent.btnActionCreat()
              } else {
                this.$emit('closeBtnActionDialog')
              }
              this.resetBtnActionData('btnActionForm')
              this.btnLoading = false
            }
          },
        })
      }
    },

    /**
     * 操作弹框取消
     */
    btnActionCancel(formName) {
      this.$refs[formName].resetFields()
      this.$emit('closeBtnActionDialog')
      this.resetBtnActionData(formName)
    },

    /**
     * 关闭弹窗
     */
    cancel() {
      this.resetBtnActionData('btnActionForm')
      this.$emit('closeBtnActionDialog')
    },

    /**
     * 新建关闭弹窗
     */
    resetBtnActionData(formName) {
      this.$refs[formName].resetFields()
      let btnActionForm = {
        //操作表单
        name: '', //名称
        label: '', //标签
        multiLanguageLabel: '', //多语言标签
        type: '', //动作
        transpond: '', // 摘要模板
        withOld: false, // 带旧数据
        icon: '', // 图标类型
        icontype: '', // 图标类型
        iconurl: '', // 图片地址
        fontUrl: '', // 字体图标地址
        colorType: 'default', //颜色类型
        workFlowType: '0', // 流程处理方式，
        editMode: '0', // 指定流程启动模式
        startFlowScript: '', // 流程启动脚本
        onActionPrint: '', // 选择打印模板
        fileNameScript: '', // 文件脚本路径
        jumpMode: '0', // 类型
        targetList: '', // 跳转设置模块 + 跳转设置目标表单
        moduleSelect: '', // 跳转设置模块
        formSelect: '', // 跳转设置目标表单
        dispatcherUrl: '', // 地址脚本
        dispatcherParams: [
          // 参数
          {
            "paramKey": '',
            "paramValue": '',
          },
        ],
        jumpActOpenType: '0', // 打开方式
        stateToShow: '', // 状态
        beforeActionScript: '', //动作执行前脚本
        actionSelection: '0', // 动作处理方式
        relatedFormId: '', // 动作关联表单
        actionScript: '', // 动作执行脚本
        afterActionScript: '', //动作执行后脚本
        retractBeforeActionScript: '', // 执行回撤前脚本
        retractAfterActionScript: '', // 执行回撤后脚本
        actionType: '0', // 动作完成后操作类型
        actionDispatcherUrlScript: '', // 自定义按钮 执行后的跳转动作类型的地址脚本
        readonlyScript: '', //只读条件
        hiddenScript: '', //隐藏条件
        orderno: 0, //排序号
      }
      this.$emit('resetBtnActionFormData', btnActionForm)
    },

    /**
     * 选择状态弹层将值传给父组件
     */
    handleStateToShow(val) {
      this.btnActionForm.stateToShow = val
    },

    /**
     * 显示脚本编辑器弹框
     */
    showScriptEditor(val) {
      this.scriptEditorVisible = true
      this.currentScriptEditor = val
    },

    /**
     * 将脚本编辑器的值写入到textarea中
     */
    handleScriptEditor(val) {
      if (this.currentScriptEditor === 'btnActionFormStartFlowScript') {
        // 流程启动脚本
        this.btnActionForm.startFlowScript = val
      } else if (this.currentScriptEditor === 'btnActionFormFileNameScript') {
        // 文件路径脚本
        this.btnActionForm.fileNameScript = val
      } else if (this.currentScriptEditor === 'btnActionFormDispatcherUrl') {
        // 地址脚本
        this.btnActionForm.dispatcherUrl = val
      } else if (
        this.currentScriptEditor === 'btnActionFormBeforeActionScript'
      ) {
        // 动作执行前脚本
        this.btnActionForm.beforeActionScript = val
      } else if (this.currentScriptEditor === 'btnActionFormActionScript') {
        // 动作执行脚本
        this.btnActionForm.actionScript = val
      } else if (
        this.currentScriptEditor === 'btnActionFormAfterActionScript'
      ) {
        // 动作后执行脚本
        this.btnActionForm.afterActionScript = val
      } else if (
        this.currentScriptEditor === 'btnActionFormActionDispatcherUrlScript'
      ) {
        // 自定义按钮执行后的跳转动作类型的地址脚本
        this.btnActionForm.actionDispatcherUrlScript = val
      } else if (this.currentScriptEditor === 'btnActionFormReadonlyScript') {
        // 只读条件
        this.btnActionForm.readonlyScript = val
      } else if (this.currentScriptEditor === 'btnActionFormHiddenScript') {
        // 隐藏条件
        this.btnActionForm.hiddenScript = val
      } else if (
        this.currentScriptEditor === 'btnActionFormRetractBeforeActionScript'
      ) {
        // 执行回撤前脚本
        this.btnActionForm.retractBeforeActionScript = val
      } else if (
        this.currentScriptEditor === 'btnActionFormRetractAfterActionScript'
      ) {
        // 执行回撤后脚本
        this.btnActionForm.retractAfterActionScript = val
      } else if (this.currentScriptEditor === 'btnActionFormLabel') {
        // 名称标签脚本
        this.btnActionForm.label = val
      }
    },

    /**
     * 显示多语言弹框
     */
    showMultiLanguage(val) {
      this.languagesVisible = true
      this.currentMultiLanguage = val
      this.getMultiLanguagetions()
    },

    /**
     * 多语言列表
     */
    async getMultiLanguagetions() {
      let appId = sessionStorage.getItem('appId')

      const response = await getMultiLanguageList(this.languageParams, appId)
      if (response.data.errcode == 0) {
        let list = response.data.data
        if (list.data == null) {
          list.data = []
        }
        list.data.map((item) => {
          if (item.type == 1) {
            item.language = 'English'
          } else if (item.type == 2) {
            item.language = '简体中文'
          } else if (item.type == 3) {
            item.language = '繁體中文'
          }
        })
        this.languageData = list
      }
    },

    /**
     * 删除多语言
     */
    async delMultiLanguage(arr) {
      try{
        await delMsg(this.$t('msg.delConfirm'), this.$t('msg.tip'))
        const response = await deleteMultiLanguageList(arr)
        if (response.data.errcode == 0) {
          this.$message.success(this.$t('msg.remove_ss'));
          this.getMultiLanguagetions();
        }
      }catch(e){
        console.log(e)
      }
    },

    /**
     * 多语言参数改变时重新请求
     */
    changeLanguageParams(params) {
      this.languageParams = params
      this.getMultiLanguagetions()
    },

    /**
     * 清空多语言的值
     */
    resetMultiLanguage() {
      this.btnActionForm.multiLanguageLabel = ''
    },

    /**
     * 选择多语言的值
     */
    handelMultiLanguage(row) {
      this.btnActionForm.multiLanguageLabel = row.language
    },

    /**
     * 操作列选择图片
     */
    btnActionFormSelectImg() {
      this.btnActionFormIconSelectCheck = true
    },

    /**
     * 操作列清除图片地址
     */
    resetBtnActionFormiconurl() {
      this.btnActionForm.iconurl = ''
    },

    /**
     * 图片上传成功传给父组件方法
     */
    onBtnActionFormSelectIconOk(item) {
      if (item && item.path) {
        this.btnActionForm.iconurl = getLogoUrl(item.path)
      } else {
        this.$message({
          showClose: true,
          type: 'error',
          message: this.$t('msg.select_fail'),
        })
      }
    },

    /**
     * 操作列选择字体图标
     */
    btnActionFormSelectFont() {
      this.btnActionFormFontSelectCheck = true
    },

    /**
     * 操作列清除字体图标地址
     */
    resetBnActionFormiconurl() {
      this.btnActionForm.fontUrl = ''
    },

    /**
     * 字体图标上传成功传给父组件方法
     */
    onBtnActionFormSelectFontOk(font) {
      this.btnActionForm.fontUrl = font
      this.btnActionFormFontSelectCheck = false
    },

    /**
     * 操作列添加参数
     */
    addTbParamsSystem() {
      this.btnActionForm.dispatcherParams.push({ "paramKey": '', "paramValue": '' })
    },

    /**
     * 操作列删除参数
     */
    delTbParamsSystem(index) {
      this.btnActionForm.dispatcherParams.splice(index, 1)
    },

    /**
     * 表单模块的改变
     */
    changeModules() {
      this.btnActionForm.formSelect = ''
      this.moduleFormOptions = []
      this.getListFrom(this.btnActionForm.moduleSelect)
    },

    /**
     * 动作类型改变
     */
    changeActionType() {
      if (this.btnActionForm.type == '5') {
        this.getFlowList()
      } else if (this.btnActionForm.type === '37') {
        this.getSummarysListData()
      } else if (this.showJumpsettings) {
        this.getAllmodules()
      }

      // 判断列表是否有存在的流程处理(如果不存在就可以添加，存在提示错误)
      let flag = false
      if (this.activitiesData.length > 0) {
        for (let i = 0; i < this.activitiesData.length; i++) {
          if (
            parseInt(this.btnActionForm.type) == 5 &&
            this.activitiesData[i].type == 5
          ) {
            flag = true
            break
          }
        }
      }
      if (flag) {
        this.$message.error(this.$t('placeholder.cant_deal_more'))
      }
      // 用于在保存的时候做判断
      this.hasError = flag

      // 清空错误校验信息
      this.$refs.btnActionForm.clearValidate()
    },

    /**
     * 获取菜单树形结构所有模块列表
     */
    async getAllmodules() {
      let appId = sessionStorage.getItem('appId')
      let currentModuleId = ''
      let response = await getAllmodules(appId, currentModuleId)
      if (response.data.errcode == 0) {
        this.allmodulesData = response.data.data
      }
    },

    /**
     * 获取摘要列表
     */
    getSummarysListData() {
      let params = {
        appId: sessionStorage.getItem('appId'),
        id: this.formId,
      }
      this.loading = true
      getSummarysListData(params, {
        onSucess: (response) => {
          if (response.data.errcode == 0) {
            this.summarysListData = response.data.data.data
            this.loading = false
          }
        },
      })
    },

    /**
     * 动作关联表单
     */
    getRelatedForm(moduleId) {
      let params = {
        moduleId: moduleId,
        type: 1048576,
        viewId: '',
        name: '',
        description: '',
        pageNo: 1,
        linesPerPage: 100000,
      }
      getModuleFormList(params, {
        onSucess: (response) => {
          if (response.data.errcode == 0) {
            this.relatedFormOption = response.data.data
          }
        },
      })
    },

    /**
     * 打印模板弹窗
     */
    showEidtPrint() {
      this.editPrintVisible = true
      this.getReportsList({})
    },

    /**
     * 打印模板按关键字筛选
     */
    searchReportByName(searchword) {
      this.getReportsList({ searchword: searchword })
    },
    /**
     * 打印模板按页码值
     */
    searchReportByPageNo(pageNo) {
      this.getReportsList({ pageNo: pageNo })
    },
    /**
     * 打印模板按页码数
     */
    searchReportByLinesPerPage(linesPerPage) {
      this.getReportsList({ linesPerPage: linesPerPage })
    },
    /**
     * 将打印模板的值写入input
     */
    getPrintValue(row) {
      this.btnActionForm.onActionPrint = row.id
      this.actionPrintValue = row.name
      this.editPrintVisible = false
    },

    /**
     * 选择状态弹框
     */
    showStateSelect() {
      this.stateSelectVisible = true
      this.getStateLabels()
    },

    /**
     * 获取打印模板中数据
     */
    getReportsList(value) {
      let params = {
        appId: sessionStorage.getItem('appId'),
        moduleId: this.$route.query.moduleId,
        searchword: value.searchword || '',
        pageNo: value.pageNo || 1,
        linesPerPage: value.linesPerPage || 100000,
        isPrint: 1,
      }
      getReportsListBySearch(params, {
        onSucess: (response) => {
          if (response.data.errcode == 0) {
            this.editPrintData = response.data.data
          }
        },
      })
    },

    /**
     * 获取跳转设置目标表单
     */
    getListFrom(moduleId) {
      if (!moduleId || moduleId == '') {
        moduleId = sessionStorage.getItem('appId')
      }
      let params = {
        moduleId: moduleId,
        type: '',
        viewId: '',
        name: '',
        description: '',
        pageNo: 1,
        linesPerPage: 100000,
      }
      getModuleFormList(params, {
        onSucess: (response) => {
          if (response.data.errcode == 0) {
            let data = response.data.data.datas
            let dataArr = []
            for (let i = 0; i < data.length; i++) {
              if (data[i].type == 1) {
                dataArr.push(data[i])
              }
            }
            this.moduleFormOptions = dataArr
            // 默认选中第一个【只有在新建的时候】
            if (
              this.moduleFormOptions.length > 0 &&
              this.dialogBtnActionTiTle !== this.$t('form.edit')
            ) {
              this.btnActionForm.formSelect = this.moduleFormOptions[0].id
            }
            // 判断目标表单是否有当前的id
            let flag = false
            this.moduleFormOptions.some((item) => {
              if (item.id == this.btnActionForm.formSelect) {
                flag = true
              }
            })
            if (!flag) this.btnActionForm.formSelect = ''
          }
        },
      })
    },

    /**
     * 获取状态标签列表
     */
    async getStateLabels() {
      this.$refs.status.defKeys=[]
      const response = await getStateLabels(
        {
          appId: sessionStorage.getItem('appId'),
          name: '',
          pageNo: 1,
          linesPerPage: 1000000,
        })
      if (response.data.errcode == 0) {
        let list = response.data.data.data
        this.stateLabelsData = list
        // 标签状态的数据
        this.$refs.status.stateData = [
          {
            id: '0',
            name: '状态标签',
            children: this.stateLabelsData,
          },
        ]

        // 判断是否需要默认选中值
        if (this.btnActionForm.stateToShow) {
          this.stateLabelsData.forEach((item) => {
            if (( this.btnActionForm.stateToShow).indexOf(item.name)!=-1) {
              this.$refs.status.defKeys.push(item.id)
            }
          })
        }
      }
    },
  },
  computed: {
    /**
     * 表单操作动作中不支持手机的文字提示
     */
    showNotSupportTxt() {
      let flag
      if (
        this.btnActionForm.type === '' ||
        this.btnActionForm.type === '4' ||
        this.btnActionForm.type === '11' ||
        this.btnActionForm.type === '3' ||
        this.btnActionForm.type === '34' ||
        this.btnActionForm.type === '42' ||
        this.btnActionForm.type === '19' ||
        this.btnActionForm.type === '21' ||
        this.btnActionForm.type === '10' ||
        this.btnActionForm.type === '5' ||
        this.btnActionForm.type === '13' 
      ) {
        flag = false
      } else {
        flag = true
      }
      return flag
    },
    /**
     * 表单操作跳转设置
     */
    showJumpsettings() {
      let flag
      if (
        this.btnActionForm.type === '43' &&
        this.btnActionForm.jumpMode == '0'
      ) {
        flag = true
      } else {
        flag = false
      }
      return flag
    },
    /**
     * 表单操作执行后脚本
     */
    showAfterActionScript() {
      let flag
      if (
        this.btnActionForm.type === '37' ||
        this.btnActionForm.type === '26' ||
        this.btnActionForm.type === '25'
      ) {
        flag = false
      } else {
        flag = true
      }
      return flag
    },

    /**
     * 脚本编辑器的值
     */
    showScritptEditorCode() {
      let code
      if (this.currentScriptEditor === 'btnActionFormStartFlowScript') {
        // 流程启动脚本
        code = this.btnActionForm.startFlowScript
      } else if (this.currentScriptEditor === 'btnActionFormFileNameScript') {
        // 文件路径脚本
        code = this.btnActionForm.fileNameScript
      } else if (this.currentScriptEditor === 'btnActionFormDispatcherUrl') {
        // 地址脚本
        code = this.btnActionForm.dispatcherUrl
      } else if (
        this.currentScriptEditor === 'btnActionFormBeforeActionScript'
      ) {
        // 动作执行前脚本
        code = this.btnActionForm.beforeActionScript
      } else if (this.currentScriptEditor === 'btnActionFormActionScript') {
        // 动作执行脚本
        code = this.btnActionForm.actionScript
      } else if (
        this.currentScriptEditor === 'btnActionFormAfterActionScript'
      ) {
        // 动作后执行脚本
        code = this.btnActionForm.afterActionScript
      } else if (
        this.currentScriptEditor === 'btnActionFormActionDispatcherUrlScript'
      ) {
        // 自定义按钮执行后的跳转动作类型的地址脚本
        code = this.btnActionForm.actionDispatcherUrlScript
      } else if (this.currentScriptEditor === 'btnActionFormReadonlyScript') {
        // 只读条件
        code = this.btnActionForm.readonlyScript
      } else if (this.currentScriptEditor === 'btnActionFormHiddenScript') {
        // 隐藏条件
        code = this.btnActionForm.hiddenScript
      } else if (
        this.currentScriptEditor === 'btnActionFormRetractBeforeActionScript'
      ) {
        // 执行回撤前脚本
        code = this.btnActionForm.retractBeforeActionScript
      } else if (
        this.currentScriptEditor === 'btnActionFormRetractAfterActionScript'
      ) {
        // 执行回撤后脚本
        code = this.btnActionForm.retractAfterActionScript
      } else if (this.currentScriptEditor === 'btnActionFormLabel') {
        // 名称标签脚本
        code = this.btnActionForm.label
      }
      return code
    },
  },
  props: {
    dialogBtnActionVisible: Boolean,
    btnActionForm: Object,
    dialogBtnActionTiTle: String,
    formId: String,
    btnActionFromColumnId: String,
    activitiesData: Array, // 表单操作列表的数据
    btnActionTypeOptions: Array, // 类型数据
  },
}
</script>
