<template>
  <div class="agencyinfo">
    <el-form ref="formData" :model="formData" :rules="rules" label-width="130px">
      <div style="z-index: 999;position: relative;">
        <el-button type="primary" @click="submit" class="float-r" v-if="isShowSubmit">提交</el-button>
        <!-- <el-button type="primary" @click="showDepend" class="float-r mr-15" v-if="currentRow.id">依赖检测</el-button> -->
      </div>
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="一般信息" name="first">
          <div class="formGroup">
            <el-row :gutter="20">
              <el-col :span="20">
                <el-form-item label="名称：" prop="name">
                  <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="说明：">
                  <el-input type="textarea" v-model="formData.description"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="消息定义" name="second">
          <div class="formGroup">
            <el-row :gutter="20">
              <el-col :span="20">
                <el-form-item label="消息类型：" prop="messageType">
                  <el-select
                    v-model="formData.messageType"
                    clearable
                    placeholder="请选择"
                    @change="messageTypeChange"
                    style="width: 100%">
                    <el-option v-for="item in messageList" :key="item.name" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="报文格式：" prop="payloadType" v-if="formData.messageType ">
                  <el-radio-group v-model="formData.payloadType" @change="payloadTypeChange">
                    <el-radio
                      v-for="item in payloadTypeList"
                      :label="item.value"
                      :key="item.value"
                      v-show="item.isShow">
                      {{ item.name }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="定义文件类型：" prop="defineFileType" v-if="formData.messageType ">
                  <el-select v-model="formData.defineFileType" disabled placeholder="请选择" style="width: 100%">
                    <el-option
                      v-for="item in defineFileTypeList"
                      :key="item.name"
                      :label="item.name"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="定义文件：" prop="defineFile" v-if="formData.defineFileType ">
                  <!--<span v-if="formData.objname">{{ formData.objname }}</span>-->
                  <!--<span v-if="formData.defineFile">{{ formData.defineFile }}</span>-->
                  <span v-if="formData.defineFile">{{ formData.defineFile.substring(formData.defineFile.lastIndexOf('\\')+1,formData.defineFile.length) }}</span>
                  <span v-else style="color:#D3D3D3;">选择定义文件</span>
                  <el-button @click="chooseDefineFile" style="margin-left:60px;" type="primary">选择定义文件</el-button>
                  <!-- <el-input v-model="formData.objname" suffix-icon="el-icon-search" @focus="chooseDefineFile">
                  </el-input> -->
                </el-form-item>
                <!-- <el-form-item v-if="fileList1.length > 0 && formData.payloadType === 'json'">
               <div>字段名</div>
               <el-tree :data="fileList1" :props="defaultProps" @node-click="handleNodeClick">
                 <div style="margin-top:5px;display: flex;width: 100%;justify-content: space-between;" slot-scope="{ node, data }">
                   <div>{{ data.name }}</div>
                 </div>
               </el-tree>
             </el-form-item> -->
                <el-form-item label="定义文件2：" prop="defineFile" v-if="formData.defineFileType === 'jsd'">
                  <!--<span v-if="formData.objname1">{{ formData.objname1 }}</span>-->
                  <span v-if="formData.secondDefineFile">{{ formData.secondDefineFile.substring(formData.secondDefineFile.lastIndexOf('\\')+1,formData.secondDefineFile.length) }}</span>
                  <span v-else style="color:#D3D3D3;">选择定义文件</span>
                  <el-button @click="chooseDefineFile2" style="margin-left:60px;" type="primary">选择定义文件</el-button>
                  <!-- <el-input v-model="formData.objname1" suffix-icon="el-icon-search" @focus="chooseDefineFile2">
                  </el-input> -->
                </el-form-item>
                <!-- <el-form-item  v-if="fileList2.length > 0 && formData.payloadType === 'json'">
                  <div>字段名</div>
                 <el-tree :data="fileList2" :props="defaultProps" @node-click="handleNodeClick">
                   <div style="margin-top:5px;display: flex;width: 100%;justify-content: space-between;" slot-scope="{ node, data }">
                     <div>{{ data.name }}</div>
                   </div>
                 </el-tree>
               </el-form-item> -->
                <el-form-item label="端点：" prop="serviceParamsMap.binding" v-if="formData.messageType === 'SOAP'">
                  <el-select
                    v-model="formData.serviceParamsMap.binding"
                    clearable
                    placeholder="请选择"
                    style="width: 100%">
                    <el-option v-for="item in ports" :key="item.name" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <!-- // 服务参数 -->
        <el-tab-pane v-if="formData.objname  || formData.objname1 " label="服务参数" name="seven">
          <div v-if="formData.payloadType === 'json'">
            <div>
              <el-row :gutter="20">
                <el-col :span="20">
                  <el-form-item label="定义文件：">
                    <div>字段名</div>
                    <el-tree :data="fileList1" :props="defaultProps" @node-click="handleNodeClick">
                      <div
                        style="margin-top:5px;display: flex;width: 100%;justify-content: space-between;"
                        slot-scope="{ node, data }">
                        <div>{{ data.name }}</div>
                        <!-- <div style="margin-left:24%;"><el-select v-model="data.type">
                               {{ data.type }}
                           </el-select></div> -->
                      </div>
                    </el-tree>
                  </el-form-item>
                  <el-form-item label="定义文件2：">
                    <div>字段名</div>
                    <el-tree :data="fileList2" :props="defaultProps">
                      <div
                        style="margin-top:5px;display: flex;width: 100%;justify-content: space-between;"
                        slot-scope="{ node, data }">
                        <div>{{ data.name }}</div>
                      </div>
                    </el-tree>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
          <div v-if="formData.payloadType === 'xml'">
            <el-tabs v-model="activeNamesss" type="card" @tab-click="handleClicks">
              <el-tab-pane v-for="(it, indx) in typeList" :key="indx" :label="it.type" :name="it.type" />
            </el-tabs>
            <el-form-item>
              <div>字段名</div>
              <el-tree :data="fileList1" :props="defaultProps">
                <div
                  style="margin-top:5px;display: flex;width: 100%;justify-content: space-between;"
                  slot-scope="{ node, data }">
                  <div>{{ data.name }}</div>
                </div>
              </el-tree>
            </el-form-item>
          </div>
        </el-tab-pane>
        <el-tab-pane label="传输" name="third">
          <div class="formGroup">
            <el-row :gutter="20">
              <el-col :span="20">
                <el-form-item label="协议：" prop="protocol">
                  <el-select
                    v-model="formData.protocol"
                    clearable
                    placeholder="请选择"
                    @change="protocolChange"
                    style="width: 100%">
                    <el-option v-for="item in protocolList" :key="item.type" :label="item.type" :value="item.type">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="适配器：" prop="connector.name" v-if="formData.protocol && !isSimple">
                  <el-input v-model="formData.connector.name" suffix-icon="el-icon-search" @focus="chooseConnector">
                  </el-input>
                </el-form-item>
                <el-form-item label="端点uri：" prop="uri" v-if="formData.protocol && isSimple">
                  <el-input v-model="formData.uri"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-tabs
              v-model="transActive"
              type="card"
              v-if="formData.protocol && formData.protocol !== 'File'"
              style="margin:10px 50px;">
              <el-tab-pane
                label="基础配置"
                name="1"
                v-if="formData.protocol=='Sap' || formData.protocol=='DB' || formData.protocol==='Ftp' || formData.protocol=='http'|| formData.protocol=='Mail'|| formData.protocol=='Kafka'">
                <div class="formGroup">

                  <el-row :gutter="20" v-if="formData.protocol==='Sap'">
                    <el-col :span="20">
                      <el-form-item label="函数：">
                        <a
                          v-if="formData.connectorSrvParamsMap.sapFunName"
                          style="padding-right:60px;font-weight:500;color:#1e91d2;text-decoration:underline"
                          @click="getFuns(formData.connectorId)">
                          {{ formData.connectorSrvParamsMap.sapFunName }}
                        </a>
                        <span v-else @click="getFuns(formData.connectorId)" style="color:#D3D3D3;padding-right:60px">请选择函数</span>
                        <!-- <span v-else @click="sapFunPage = true" style="color:#D3D3D3;padding-right:60px">请选择函数</span> -->
                        <el-button @click="getFuns(formData.connectorId)" type="primary">函数选择器</el-button>
                      </el-form-item>
                      <el-form-item v-if="formData.connectorSrvParamsMap.sapFunName" label="变量结构：">
                        <el-button @click="filter2('response')" type="primary">请求</el-button>
                        <el-button @click="filter2('request')" type="primary">响应</el-button>
                      </el-form-item>
                      <el-form-item v-if="formData.connectorSrvParamsMap.sapFunName">
                        <el-tree
                          :data="formData.connectorSrvParamsMap.comStructureTree"
                          :props="sapTreeProps2">
                        </el-tree>
                      </el-form-item>
                    </el-col>
                    <el-dialog
                     :close-on-click-modal="false"
                      :before-close="closeFunDialog"
                      title="SAP函数选择页面"
                      :visible.sync="sapFunPage"
                      width="60%"
                      append-to-body>
                      <div class="sap-fun-container">
                        <div class="left">
                          可使用的函数
                          <el-tree
                                 @node-click="funTreeClick"
                                 ref="funTree"
                                  node-key="label"
                                  :current-node-key="sapFunName"
                                  :default-expanded-keys="[sapFunName]"
                                  :default-checked-keys="[sapFunName]"
                                   highlight-current
                                   :data="sapTreeDataArr"
                                   :props="sapTreeProps" >
                          </el-tree>
                        </div>
                        <div v-if="sapFunName" class="right">
                          <h2>{{sapFunName}}</h2>
                          <el-button class="sap-fun-span" @click="filter1('response')" type="primary">请求参数</el-button>
                          <el-button class="sap-fun-span" @click="filter1('request')" type="primary">响应参数</el-button>
                          <el-table
                            :data="filterSapFunTabledata"
                            border
                            row-key="id"
                            style="width: 100%">
                            <el-table-column
                              prop="name"
                              label="字段名称"
                              show-overflow-tooltip
                              width="auto"
                              >
                            </el-table-column>
                            <el-table-column
                              prop="description"
                              label="字段描述"
                              show-overflow-tooltip
                              width="auto"
                              >
                            </el-table-column>
                            <el-table-column
                              prop="type"
                              label="字段类型"
                              show-overflow-tooltip
                              width="auto"
                              >
                            </el-table-column>
                            <el-table-column
                              prop="length"
                              label="字段长度"
                              show-overflow-tooltip
                              width="auto"
                              >
                            </el-table-column>
                            <el-table-column
                              prop="must"
                              label="必填"
                              show-overflow-tooltip
                              width="auto"
                              >
                            </el-table-column>
                          </el-table>
                        </div>
                      </div>
                      <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="sapFunSubmit">下一步</el-button>
                      </span>
                    </el-dialog>
                  </el-row>

                  <el-row :gutter="20" v-if="formData.protocol=='DB'">
                    <el-col :span="20">
                      <!-- <el-radio v-model="radio" class="radios" label="1"> -->
                      <!--<el-form-item label="sql：" :required="radio === '1'">-->
                      <el-form-item label="sql：">
                        <a
                          v-if="formData.connectorSrvParamsMap.name"
                          style="padding-right:60px;font-weight:500;color:#1e91d2;text-decoration:underline"
                          @click="editSqlBuilderVisible=true">
                          {{ formData.connectorSrvParamsMap.name }}
                          <!--{{ sqlObj.name }}-->
                        </a>
                        <span v-else style="color:#D3D3D3;padding-right:60px">请选择sql</span>
                        <el-button @click="isClick=true" type="primary">sql构建器</el-button>
                        <!-- <el-input type="textarea" @input="changeSql" v-model="formData.connectorSrvParamsMap.sql"></el-input> -->
                      </el-form-item>
                      <!-- </el-radio> -->
                      <!-- <el-radio v-model="radio" class="radios" label="2">
                        <el-form-item label="sql文件：" :required="radio === '2'">
                          <span style="margin-right:10px;" v-if="filename">{{ filename }}.sql</span>
                          <el-button @click="resourceVisible = true" size="mini" type="primary">选择</el-button>
                        </el-form-item>
                      </el-radio> -->
                      <!--<el-form-item label="">-->
                      <!--  <el-button size="mini" @click="testSqlFun" plain>测试</el-button>-->
                      <!--  <i class="el-icon-check" v-show="ispass == 'true'"></i>-->
                      <!--  <i class="el-icon-close" v-show="ispass == 'false'"></i>-->
                      <!--</el-form-item>-->
                     <!--<el-form-item label="">-->
                       <!-- <el-checkbox label="批处理" v-model="formData.connectorSrvParamsMap.batch">批处理</el-checkbox> -->
                     <!--   <el-checkbox label="储存过程" v-model="formData.connectorSrvParamsMap.storedProcedure">储存过程</el-checkbox>-->
                     <!--   <el-checkbox label="延迟启动" v-model="formData.connectorSrvParamsMap.lazyStartProducer">延迟启动</el-checkbox>-->
                     <!-- </el-form-item>-->
                     <!-- <el-form-item label="">-->
                     <!--   <el-button size="mini" plain>解析结构</el-button>-->
                     <!-- </el-form-item>-->
                       <el-form-item label="变量结构：">
                       <el-tabs type="border-card">
                         <el-tab-pane label="请求">
                         <div>{{ analysisData }}</div>
                         <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
                         </el-tab-pane>
                        <!--<el-tab-pane label="响应">-->
                        <!--  <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>-->
                        <!--</el-tab-pane>-->
                       </el-tabs>
                       </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20" v-if="formData.protocol==='Ftp'">
                    <el-col :span="20">
                      <el-form-item label="目录路径：" prop="connectorSrvParamsMap.path">
                        <el-input v-model="formData.connectorSrvParamsMap.path"></el-input>
                      </el-form-item>
                      <el-form-item label="文件编码：">
                        <el-input v-model="formData.connectorSrvParamsMap.charset"></el-input>
                      </el-form-item>
                      <el-form-item label="自动创建文件目录：">
                        <el-checkbox v-model="formData.connectorSrvParamsMap.autoCreate"></el-checkbox>
                      </el-form-item>
                      <el-form-item label="忽略目录结构：">
                        <el-checkbox v-model="formData.connectorSrvParamsMap.flatten"></el-checkbox>
                      </el-form-item>
                      <el-form-item label="文件已存在策略：" prop="connectorSrvParamsMap.fileExist">
                        <el-select
                          v-model="formData.connectorSrvParamsMap.fileExist"
                          clearable
                          placeholder="请选择"
                          style="width: 100%;">
                          <el-option v-for="item in options" :key="item.value" :label="item.key" :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item
                        label="移动目录："
                        prop="connectorSrvParamsMap.moveExisting"
                        v-if="formData.connectorSrvParamsMap.fileExist === 'Move'">
                        <el-input v-model="formData.connectorSrvParamsMap.moveExisting"></el-input>
                      </el-form-item>
                      <el-form-item
                        label="临时文件名："
                        prop="connectorSrvParamsMap.tempFileName"
                        v-if="formData.connectorSrvParamsMap.fileExist === 'TryRename'">
                        <el-input v-model="formData.connectorSrvParamsMap.tempFileName"></el-input>
                      </el-form-item>
                      <el-form-item label="临时文件前缀：" v-if="formData.connectorSrvParamsMap.fileExist === 'TryRename'">
                        <el-input v-model="formData.connectorSrvParamsMap.tempPrefix"></el-input>
                      </el-form-item>
                      <el-form-item label="写入文件名称：">
                        <el-input v-model="formData.connectorSrvParamsMap.fileName"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20" v-if="formData.protocol==='http'">
                    <el-col :span="20">
                      <el-form-item
                        label="请求方法："
                        prop="connectorSrvParamsMap.httpMethod"
                        v-if="formData.messageType === 'REST'">
                        <!-- <el-checkbox-group v-model="httpMethod">
                          <el-checkbox v-for="item in httpMethodList" :label="item.value" :key="item.value">{{ item.name }}
                          </el-checkbox>
                        </el-checkbox-group> -->
                        <el-radio-group v-model="httpMethodRadio" @input="httpMethodChange">
                          <el-radio v-for="item in httpMethodList" :label="item.value" :key="item.value">{{ item.name }}
                          </el-radio>
                        </el-radio-group>
                      </el-form-item>
                      <el-form-item label="压缩：">
                        <el-checkbox v-model="formData.compress"></el-checkbox>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <!-- 邮件适配器 -->
                  <el-row :gutter="20" v-if="formData.protocol==='Mail'">
                    <el-col :span="20">
                      <el-form-item label="发件人：" prop="connectorSrvParamsMap.from">
                        <el-input v-model="formData.connectorSrvParamsMap.from"></el-input>
                      </el-form-item>
                      <el-form-item label="主题：" prop="connectorSrvParamsMap.subject">
                        <el-input v-model="formData.connectorSrvParamsMap.subject"></el-input>
                      </el-form-item>
                      <el-form-item label="收件人：" prop="connectorSrvParamsMap.to">
                        <el-input type="textarea" :rows="3" v-model="formData.connectorSrvParamsMap.to"></el-input>
                      </el-form-item>
                      <el-form-item label="回复：">
                        <el-input type="textarea" :rows="3" v-model="formData.connectorSrvParamsMap.replyTo"></el-input>
                      </el-form-item>
                      <el-form-item label="抄送：">
                        <el-input type="textarea" :rows="3" v-model="formData.connectorSrvParamsMap.cc"></el-input>
                      </el-form-item>
                      <el-form-item label="密送：">
                        <el-input type="textarea" :rows="3" v-model="formData.connectorSrvParamsMap.bcc"></el-input>
                      </el-form-item>
                      <!-- <el-form-item label="延时启动：">
                        <el-checkbox v-model="formData.connectorSrvParamsMap.lazyStartProducer"></el-checkbox>
                      </el-form-item> -->
                    </el-col>
                  </el-row>
                  <el-row :gutter="20" v-if="formData.protocol==='Kafka'">
                    <template v-for="(item,i) in kafkaParams">
                      <el-col v-if="item.type==='input'" :span="20" :key="i">
                        <el-form-item :label="item.label" :prop="'connectorSrvParamsMap.'+item.name">
                          <el-input
                            v-model="formData.connectorSrvParamsMap[item.name]"
                            :disabled="item.disabled"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col v-if="item.type==='select'" :span="20" :key="i">
                        <el-form-item :label="item.label" :prop="'connectorSrvParamsMap.'+item.name">
                          <el-select
                            v-model="formData.connectorSrvParamsMap[item.name]"
                            clearable
                            placeholder="请选择"
                            style="width: 100%;"
                            :disabled="item.disabled">
                            <el-option
                              v-for="(option,index) in item.options"
                              :key="index"
                              :label="option"
                              :value="option">
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </template>
                  </el-row>
                </div>
              </el-tab-pane>
              <el-tab-pane label="基础配置" name="1" v-if="formData.protocol === 'Jms'">
                <el-row :gutter="20">
                  <el-col :span="20">
                    <el-form-item label="类型：" prop="connectorSrvParamsMap.destinationType">
                      <el-radio-group v-model="formData.connectorSrvParamsMap.destinationType">
                        <el-radio label="queue">队列</el-radio>
                        <el-radio label="topic">主题</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="目标名称：" prop="connectorSrvParamsMap.destinationName">
                      <el-input v-model="formData.connectorSrvParamsMap.destinationName"></el-input>
                    </el-form-item>
                    <!-- 启用服务质量 -->
                    <el-form-item>
                      <el-checkbox label="启用事务" v-model="formData.connectorSrvParamsMap.transacted"></el-checkbox>
                    </el-form-item>
                    <el-form-item v-if="formData.connectorSrvParamsMap.transacted">
                      <el-checkbox
                        label="将事务用于响应"
                        v-model="formData.connectorSrvParamsMap.transactedInOut"></el-checkbox>
                    </el-form-item>
                    <el-form-item label="事务超时时间：" v-if="formData.connectorSrvParamsMap.transacted">
                      <el-input type="number" v-model="formData.connectorSrvParamsMap.transactionTimeout"></el-input>
                    </el-form-item>
                    <!-- 启用服务质量 -->
                    <el-form-item>
                      <el-checkbox
                        label="启用服务质量"
                        v-model="formData.connectorSrvParamsMap.explicitQosEnabled"></el-checkbox>
                    </el-form-item>
                    <el-form-item v-if="formData.connectorSrvParamsMap.explicitQosEnabled">
                      <el-checkbox
                        label="持久化消息"
                        v-model="formData.connectorSrvParamsMap.deliveryPersistent"></el-checkbox>
                    </el-form-item>
                    <el-form-item label="优先级：" v-if="formData.connectorSrvParamsMap.explicitQosEnabled">
                      <el-select
                        v-model="formData.connectorSrvParamsMap.priority"
                        clearable
                        placeholder="请选择"
                        style="width: 100%">
                        <el-option
                          v-for="item in priorityJmsList"
                          :key="item.value"
                          :label="item.value"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item v-if="formData.connectorSrvParamsMap.explicitQosEnabled">
                      <el-checkbox
                        label="禁用消息存活时间"
                        v-model="formData.connectorSrvParamsMap.disableTimeToLive"></el-checkbox>
                    </el-form-item>
                    <el-form-item label="消息存活时间：" v-if="formData.connectorSrvParamsMap.explicitQosEnabled">
                      <el-input type="number" v-model="formData.connectorSrvParamsMap.timeToLive"></el-input>
                    </el-form-item>
                    <!-- 是否允许空报文 -->
                    <el-form-item>
                      <el-checkbox label="是否允许空报文" v-model="formData.connectorSrvParamsMap.allowNullBody"></el-checkbox>
                    </el-form-item>
                    <el-form-item>
                      <el-checkbox label="启用流传输模式" v-model="formData.connectorSrvParamsMap.streamMessageTypeEnabled">
                      </el-checkbox>
                    </el-form-item>
                    <el-form-item label="请求超时时间：">
                      <el-input type="number" v-model="formData.connectorSrvParamsMap.requestTimeOut"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="安全验证" name="2" v-if="formData.protocol==='http'">
                <el-row :gutter="20">
                  <el-col :span="20">
                    <el-form-item label="安全验证">
                      <el-checkbox
                        v-model="formData.securityConf.enableSecurity"
                        :checked="formData.securityConf && formData.securityConf.enableSecurity">
                        启用安全验证
                      </el-checkbox>
                    </el-form-item>
                    <el-form-item
                      label="验证策略："
                      prop="securityConf.authStrategy"
                      v-show="formData.securityConf.enableSecurity">
                      <el-select
                        v-model="formData.securityConf.authStrategy"
                        clearable
                        placeholder="请选择"
                        style="width: 200px;">
                        <el-option
                          v-for="(item,index) in strategyList"
                          :key="index"
                          :label="item.name"
                          :value="item.key"></el-option>
                      </el-select>
                      <el-button type="text" style="margin-left:15px" @click="userListVisible = true">授权</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-tab-pane>
        <!--        <el-tab-pane label="基础配置" name="fifth" v-if="formData.protocol=='DB' || formData.protocol==='Ftp' || formData.protocol=='http'|| formData.protocol=='Mail'|| formData.protocol=='Kafka'">-->
        <!--          <div class="formGroup">-->
        <!--            <el-row :gutter="20" v-if="formData.protocol=='DB'">-->
        <!--              <el-col :span="20">-->
        <!--                <el-radio v-model="radio" class="radios" label="1">-->
        <!--                  <el-form-item label="sql：" :required="radio === '1'">-->
        <!--                    <el-input type="textarea" @input="changeSql" v-model="formData.connectorSrvParamsMap.sql"></el-input>-->
        <!--                  </el-form-item>-->
        <!--                </el-radio>-->
        <!--                &lt;!&ndash; <el-radio v-model="radio" class="radios" label="2">-->
        <!--                  <el-form-item label="sql文件：" :required="radio === '2'">-->
        <!--                    <span style="margin-right:10px;" v-if="filename">{{ filename }}.sql</span>-->
        <!--                    <el-button @click="resourceVisible = true" size="mini" type="primary">选择</el-button>-->
        <!--                  </el-form-item>-->
        <!--                </el-radio> &ndash;&gt;-->
        <!--                <el-form-item label="">-->
        <!--                  <el-button size="mini" @click="testSqlFun" plain>测试</el-button>-->
        <!--                  <i class="el-icon-check" v-show="ispass == 'true'"></i>-->
        <!--                  <i class="el-icon-close" v-show="ispass == 'false'"></i>-->
        <!--                </el-form-item>-->
        <!--                <el-form-item label="">-->
        <!--                  <el-checkbox label="批处理" v-model="formData.connectorSrvParamsMap.batch">批处理</el-checkbox>-->
        <!--                  <el-checkbox label="储存过程" v-model="formData.connectorSrvParamsMap.storedProcedure">储存过程</el-checkbox>-->
        <!--                  <el-checkbox label="延迟启动" v-model="formData.connectorSrvParamsMap.lazyStartProducer">延迟启动</el-checkbox>-->
        <!--                </el-form-item>-->
        <!--                &lt;!&ndash; <el-form-item label="">-->
        <!--                  <el-button size="mini" plain>解析结构</el-button>-->
        <!--                </el-form-item> &ndash;&gt;-->
        <!--                <el-form-item label="变量结构：">-->
        <!--                  <el-tabs type="border-card">-->
        <!--                    <el-tab-pane label="请求">-->
        <!--                      <div>{{ analysisData }}</div>-->
        <!--                      &lt;!&ndash; <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree> &ndash;&gt;-->
        <!--                    </el-tab-pane>-->
        <!--                    &lt;!&ndash; <el-tab-pane label="响应">-->
        <!--                      <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>-->
        <!--                    </el-tab-pane> &ndash;&gt;-->
        <!--                  </el-tabs>-->
        <!--                </el-form-item>-->
        <!--              </el-col>-->
        <!--            </el-row>-->
        <!--            <el-row :gutter="20" v-if="formData.protocol==='Ftp'">-->
        <!--              <el-col :span="20">-->
        <!--                <el-form-item label="目录路径：" prop="connectorSrvParamsMap.path">-->
        <!--                  <el-input v-model="formData.connectorSrvParamsMap.path"></el-input>-->
        <!--                </el-form-item>-->
        <!--                <el-form-item label="文件编码：">-->
        <!--                  <el-input v-model="formData.connectorSrvParamsMap.charset"></el-input>-->
        <!--                </el-form-item>-->
        <!--                <el-form-item label="自动创建文件目录：">-->
        <!--                  <el-checkbox v-model="formData.connectorSrvParamsMap.autoCreate"></el-checkbox>-->
        <!--                </el-form-item>-->
        <!--                <el-form-item label="忽略目录结构：">-->
        <!--                  <el-checkbox v-model="formData.connectorSrvParamsMap.flatten"></el-checkbox>-->
        <!--                </el-form-item>-->
        <!--                <el-form-item label="文件已存在策略：" prop="connectorSrvParamsMap.fileExist">-->
        <!--                  <el-select v-model="formData.connectorSrvParamsMap.fileExist" clearable placeholder="请选择"-->
        <!--                    style="width: 100%;">-->
        <!--                    <el-option v-for="item in options" :key="item.value" :label="item.key" :value="item.value">-->
        <!--                    </el-option>-->
        <!--                  </el-select>-->
        <!--                </el-form-item>-->
        <!--                <el-form-item label="移动目录：" prop="connectorSrvParamsMap.moveExisting"-->
        <!--                  v-if="formData.connectorSrvParamsMap.fileExist === 'Move'">-->
        <!--                  <el-input v-model="formData.connectorSrvParamsMap.moveExisting"></el-input>-->
        <!--                </el-form-item>-->
        <!--                <el-form-item label="临时文件名：" prop="connectorSrvParamsMap.tempFileName"-->
        <!--                  v-if="formData.connectorSrvParamsMap.fileExist === 'TryRename'">-->
        <!--                  <el-input v-model="formData.connectorSrvParamsMap.tempFileName"></el-input>-->
        <!--                </el-form-item>-->
        <!--                <el-form-item label="临时文件前缀：" v-if="formData.connectorSrvParamsMap.fileExist === 'TryRename'">-->
        <!--                  <el-input v-model="formData.connectorSrvParamsMap.tempPrefix"></el-input>-->
        <!--                </el-form-item>-->
        <!--                <el-form-item label="写入文件名称：">-->
        <!--                  <el-input v-model="formData.connectorSrvParamsMap.fileName"></el-input>-->
        <!--                </el-form-item>-->
        <!--              </el-col>-->
        <!--            </el-row>-->
        <!--            <el-row :gutter="20" v-if="formData.protocol==='http'">-->
        <!--              <el-col :span="20">-->
        <!--                <el-form-item label="请求方法：" prop="connectorSrvParamsMap.httpMethod" v-if="formData.messageType === 'rest'">-->
        <!--                  &lt;!&ndash; <el-checkbox-group v-model="httpMethod">-->
        <!--                    <el-checkbox v-for="item in httpMethodList" :label="item.value" :key="item.value">{{ item.name }}-->
        <!--                    </el-checkbox>-->
        <!--                  </el-checkbox-group> &ndash;&gt;-->
        <!--                  <el-radio-group v-model="httpMethodRadio" @input="httpMethodChange">-->
        <!--                    <el-radio v-for="item in httpMethodList" :label="item.value" :key="item.value">{{ item.name }}-->
        <!--                    </el-radio>-->
        <!--                  </el-radio-group>-->
        <!--                </el-form-item>-->
        <!--                <el-form-item label="压缩：">-->
        <!--                  <el-checkbox v-model="formData.compress"></el-checkbox>-->
        <!--                </el-form-item>-->
        <!--              </el-col>-->
        <!--            </el-row>-->
        <!--            &lt;!&ndash; 邮件适配器 &ndash;&gt;-->
        <!--            <el-row :gutter="20" v-if="formData.protocol==='Mail'">-->
        <!--              <el-col :span="20">-->
        <!--                  <el-form-item label="发件人：" prop="connectorSrvParamsMap.from">-->
        <!--                    <el-input v-model="formData.connectorSrvParamsMap.from"></el-input>-->
        <!--                  </el-form-item>-->
        <!--                  <el-form-item label="主题：" prop="connectorSrvParamsMap.subject">-->
        <!--                    <el-input v-model="formData.connectorSrvParamsMap.subject"></el-input>-->
        <!--                  </el-form-item>-->
        <!--                  <el-form-item label="收件人：" prop="connectorSrvParamsMap.to">-->
        <!--                    <el-input type="textarea" :rows="3" v-model="formData.connectorSrvParamsMap.to"></el-input>-->
        <!--                  </el-form-item>-->
        <!--                  <el-form-item label="回复：" >-->
        <!--                    <el-input type="textarea" :rows="3" v-model="formData.connectorSrvParamsMap.replyTo"></el-input>-->
        <!--                  </el-form-item>-->
        <!--                  <el-form-item label="抄送：" >-->
        <!--                    <el-input type="textarea" :rows="3" v-model="formData.connectorSrvParamsMap.cc"></el-input>-->
        <!--                  </el-form-item>-->
        <!--                  <el-form-item label="密送：" >-->
        <!--                    <el-input type="textarea" :rows="3" v-model="formData.connectorSrvParamsMap.bcc"></el-input>-->
        <!--                  </el-form-item>-->
        <!--                  &lt;!&ndash; <el-form-item label="延时启动：">-->
        <!--                    <el-checkbox v-model="formData.connectorSrvParamsMap.lazyStartProducer"></el-checkbox>-->
        <!--                  </el-form-item> &ndash;&gt;-->
        <!--              </el-col>-->
        <!--            </el-row>-->
        <!--            <el-row :gutter="20" v-if="formData.protocol==='Kafka'">-->
        <!--              <template v-for="(item,i) in kafkaParams"  >-->
        <!--                <el-col v-if="item.type==='input'" :span="20" :key="i">-->
        <!--                  <el-form-item :label="item.label" :prop="'connectorSrvParamsMap.'+item.name">-->
        <!--                    <el-input v-model="formData.connectorSrvParamsMap[item.name]" :disabled="item.disabled"></el-input>-->
        <!--                  </el-form-item>-->
        <!--                </el-col>-->
        <!--                <el-col v-if="item.type==='select'" :span="20" :key="i">-->
        <!--                  <el-form-item :label="item.label" :prop="'connectorSrvParamsMap.'+item.name">-->
        <!--                    <el-select v-model="formData.connectorSrvParamsMap[item.name]" clearable placeholder="请选择" style="width: 100%;" :disabled="item.disabled">-->
        <!--                      <el-option v-for="(option,index) in item.options" :key="index" :label="option" :value="option">-->
        <!--                      </el-option>-->
        <!--                    </el-select>-->
        <!--                  </el-form-item>-->
        <!--                </el-col>-->
        <!--              </template>-->
        <!--            </el-row>-->
        <!--          </div>-->
        <!--        </el-tab-pane>-->
        <!--        <el-tab-pane label="基础配置" name="fifths" v-if="formData.protocol === 'Jms'">-->
        <!--          <el-row :gutter="20">-->
        <!--            <el-col :span="20">-->
        <!--              <el-form-item label="类型：" prop="connectorSrvParamsMap.destinationType">-->
        <!--                <el-radio-group v-model="formData.connectorSrvParamsMap.destinationType">-->
        <!--                  <el-radio label="queue">队列</el-radio>-->
        <!--                  <el-radio label="topic">主题</el-radio>-->
        <!--                </el-radio-group>-->
        <!--              </el-form-item>-->
        <!--              <el-form-item label="目标名称：" prop="connectorSrvParamsMap.destinationName">-->
        <!--                <el-input v-model="formData.connectorSrvParamsMap.destinationName"></el-input>-->
        <!--              </el-form-item>-->
        <!--              &lt;!&ndash; 启用服务质量 &ndash;&gt;-->
        <!--              <el-form-item>-->
        <!--                <el-checkbox label="启用事务" v-model="formData.connectorSrvParamsMap.transacted"></el-checkbox>-->
        <!--              </el-form-item>-->
        <!--              <el-form-item v-if="formData.connectorSrvParamsMap.transacted">-->
        <!--                <el-checkbox label="将事务用于响应" v-model="formData.connectorSrvParamsMap.transactedInOut"></el-checkbox>-->
        <!--              </el-form-item>-->
        <!--              <el-form-item label="事务超时时间：" v-if="formData.connectorSrvParamsMap.transacted">-->
        <!--                <el-input type="number" v-model="formData.connectorSrvParamsMap.transactionTimeout"></el-input>-->
        <!--              </el-form-item>-->
        <!--              &lt;!&ndash; 启用服务质量 &ndash;&gt;-->
        <!--              <el-form-item>-->
        <!--                <el-checkbox label="启用服务质量" v-model="formData.connectorSrvParamsMap.explicitQosEnabled"></el-checkbox>-->
        <!--              </el-form-item>-->
        <!--              <el-form-item v-if="formData.connectorSrvParamsMap.explicitQosEnabled">-->
        <!--                <el-checkbox label="持久化消息" v-model="formData.connectorSrvParamsMap.deliveryPersistent"></el-checkbox>-->
        <!--              </el-form-item>-->
        <!--              <el-form-item label="优先级：" v-if="formData.connectorSrvParamsMap.explicitQosEnabled">-->
        <!--                <el-select v-model="formData.connectorSrvParamsMap.priority" clearable placeholder="请选择"-->
        <!--                  style="width: 100%">-->
        <!--                  <el-option v-for="item in priorityJmsList" :key="item.value" :label="item.value" :value="item.value">-->
        <!--                  </el-option>-->
        <!--                </el-select>-->
        <!--              </el-form-item>-->
        <!--              <el-form-item v-if="formData.connectorSrvParamsMap.explicitQosEnabled">-->
        <!--                <el-checkbox label="禁用消息存活时间" v-model="formData.connectorSrvParamsMap.disableTimeToLive"></el-checkbox>-->
        <!--              </el-form-item>-->
        <!--              <el-form-item label="消息存活时间：" v-if="formData.connectorSrvParamsMap.explicitQosEnabled">-->
        <!--                <el-input type="number" v-model="formData.connectorSrvParamsMap.timeToLive"></el-input>-->
        <!--              </el-form-item>-->
        <!--              &lt;!&ndash; 是否允许空报文 &ndash;&gt;-->
        <!--              <el-form-item>-->
        <!--                <el-checkbox label="是否允许空报文" v-model="formData.connectorSrvParamsMap.allowNullBody"></el-checkbox>-->
        <!--              </el-form-item>-->
        <!--              <el-form-item>-->
        <!--                <el-checkbox label="启用流传输模式" v-model="formData.connectorSrvParamsMap.streamMessageTypeEnabled">-->
        <!--                </el-checkbox>-->
        <!--              </el-form-item>-->
        <!--              <el-form-item label="请求超时时间：">-->
        <!--                <el-input type="number" v-model="formData.connectorSrvParamsMap.requestTimeOut"></el-input>-->
        <!--              </el-form-item>-->
        <!--            </el-col>-->
        <!--          </el-row>-->
        <!--        </el-tab-pane>-->
        <el-tab-pane v-if="currentRow.id" label="依赖检测" name="thirds">
          <depend-onthe-test
            type="business"
            :formData="formData"
            :titleName="titleName"
            :dialogVisible="dialogVisible" />
        </el-tab-pane>
      </el-tabs>
      <choose-connector-dialog
        v-model="connectorVisible"
        :connectorId="formData.connectorId"
        :connectorType="formData.protocol"
        @confirm="handleConnector" />
      <choose-resourcefile-dialog
        v-model="resourcefileVisible"
        :seleted-id="chickId1"
        :defineFileType="defineFileType"
        @confirm="handleResourcefile(arguments)" />
      <choose-resourcefile-dialog
        v-model="resourceFileVisible2"
        :seleted-id="chickId2"
        :defineFileType="defineFileType"
        @confirm="handleResourceFile2(arguments)" />
      <TestSql v-model="testSqlVisible" :sqlData="sqlData" :sqlFormData="sqlFormData" @confirm="getStatus" />
      <choose-resource-dialog v-model="resourceVisible" resourceType="sql" @confirm="handleResource" />
    </el-form>
    <!-- <depend-onthe-test v-model="dependVisible" :showDependOtherFlag="showDependOtherFlag" type="business" :formData="formData" :titleName="titleName">
    </depend-onthe-test> -->
    <!-- 构建器列表弹框 -->
    <el-dialog :close-on-click-modal="false" class="scrollbar-dialog" :visible.sync="isClick" width="900px" top="5vh" append-to-body>
      <sql-list @getSqlData="getSql" />
    </el-dialog>
    <!-- 构建器详情 -->
    <sql-details
      v-model='editSqlBuilderVisible'
      :buildId="this.formData.connectorSrvParamsMap.id"
      @closeEditDialog="closeEditDialog"
      :porjectId="sqlObj.perjectId"
      @confirmEdit="confirmEdit" />
    <user-list-dialog
      v-model='userListVisible'
      :userListOld="userList"
      @getCheckeduserList="getCheckeduserList"
      :id="formData.securityConf.accountId"
      @closeUserList="closeUserList" />
  </div>
</template>

<script>
import DependOntheTest from '@/components/Dependonthetest/Dependonthetest'
import ChooseConnectorDialog from '@/components/connector/ChooseConnectorDialog'
import ChooseResourcefileDialog from '@/components/resourcefile/ChooseResourcefileDialog'
import ChooseResourceDialog from '@/components/resource/ChooseResourceDialog'
import TestSql from '../agency_service/TestSql'
import userListDialog from './AccountListDialog'
import sqlList from '@/views/esb_service/sql_builder/sqlList' // 获取sql列表
import sqlDetails from '@/views/esb_service/sql_builder/sqldatil'
import {
  saveBusinessService,
  getBusinessServiceDetail,
  saveSql,
  generateSql,
  // getResourceFile,
  scriptValidate,
  getFuns,
  getFunDetails
} from '@/api/esb_service'
import { checkFormData } from '@/utils/common'
import EsbServiceInfoMixins from '@/mixins/esb_service_info_mixins'
import { createNamespacedHelpers } from 'vuex'

const { mapGetters } = createNamespacedHelpers('app')
export default {
  mixins: [EsbServiceInfoMixins],
  components: {
    ChooseConnectorDialog,
    ChooseResourcefileDialog,
    TestSql,
    ChooseResourceDialog,
    DependOntheTest,
    sqlList,
    sqlDetails,
    userListDialog
  },
  data() {
    return {
      StructureTree: {},
      filterSapFunTabledata: [],
      sapFunName: '',
      // sapFunTabledata:[
      //   {
      //   id:1,
      //   name:'dadad',
      //   description:'afa',
      //   type: 'ad',
      //   length: 'sd',
      //   must: 'ad'
      // },
      // {
      //   id:2,
      //   name:'dadad',
      //   description:'afa',
      //   type: 'ad',
      //   length: 'sd',
      //   must: 'ad'
      // },
      // {
      //   id:3,
      //   name:'dadad',
      //   description:'afa',
      //   type: 'ad',
      //   length: 'sd',
      //   must: 'ad'
      // },
      // {
      //   id:4,
      //   name:'dadad',
      //   description:'afa',
      //   type: 'ad',
      //   length: 'sd',
      //   must: 'ad',
      //   children:[
      //     {
      //       id:5,
      //       name:'dadad',
      //       description:'afa',
      //       type: 'ad',
      //       length: 'sd',
      //       must: 'ad'
      //     },
      //     {
      //       id:6,
      //       name:'dadad',
      //       description:'afa',
      //       type: 'ad',
      //       length: 'sd',
      //       must: 'ad',
      //       children: [
      //         {
      //           id:7,
      //           name:'dadad',
      //           description:'afa',
      //           type: 'ad',
      //           length: 'sd',
      //           must: 'ad'
      //         },
      //       ]
      //     },
      //   ]
      // }
      // ],
      sapFunTabledata: {},
      sapFunPage: false,
      // sapTreeDatatest:[{
      //     label: '一级 1',
      //     children: [{
      //       label: '二级 1-1',
      //       children: [{
      //         label: '三级 1-1-1'
      //       }]
      //     }]
      //   }, {
      //     label: '一级 2',
      //     children: [{
      //       label: '二级 2-1',
      //       children: [{
      //         label: '三级 2-1-1'
      //       }]
      //     }, {
      //       label: '二级 2-2',
      //       children: [{
      //         label: '三级 2-2-1'
      //       }]
      //     }]
      //   }, {
      //     label: '一级 3',
      //     children: [{
      //       label: '二级 3-1',
      //       children: [{
      //         label: '三级 3-1-1'
      //       }]
      //     }, {
      //       label: '二级 3-2',
      //       children: [{
      //         label: '三级 3-2-1'
      //       }]
      //     }]
      //   }],
      // sapTreeData:{
      //   '分类1':{
      //     '分类1-1':['函数名1-1'],
      //     '分类1-2':['函数名1-2']
      //   },
      //   '分类2':{
      //     '分类2-1':['函数名2-1', '函数名2-1-1'],
      //     '分类2-2':['函数名2-2']
      //   },
      //   '分类3': ['aaa', 'sss'],
      //   '分类4': {
      //     '分类5': {
      //       'aaa':['1','2'],
      //       'ada':{
      //         'ad':['as']
      //       }
      //     }
      //   },
      // },
      sapTreeData: {},
      sapTreeProps: {
        children: 'children',
        label: 'label'
      },
      sapTreeProps2: {
        children: 'children',
        label: 'name'
      },
      sqlObj: {},
      editSqlBuilderVisible: false, // 打开详情页面
      isClick: false, // 打开构建器列表
      showDependOtherFlag: true, // 是否显示依赖项
      // Jms
      rules: {
        'connectorSrvParamsMap.destinationType': [
          { required: true, message: '不能为空', trigger: ['change', 'blur'] }
        ],
        'connectorSrvParamsMap.destinationName': [
          { required: true, message: '不能为空', trigger: ['change', 'blur'] }
        ],
        'connectorSrvParamsMap.from': [
          { required: true, message: '不能为空', trigger: ['change', 'blur'] }
        ],
        'connectorSrvParamsMap.subject': [
          { required: true, message: '不能为空', trigger: ['change', 'blur'] }
        ],
        'connectorSrvParamsMap.to': [
          { required: true, message: '不能为空', trigger: ['change', 'blur'] }
        ]
      },
      priorityJmsList: [
        { 'key': 'type', 'value': '1' },
        { 'key': 'type', 'value': '2' },
        { 'key': 'type', 'value': '3' },
        { 'key': 'type', 'value': '4' },
        { 'key': 'type', 'value': '5' },
        { 'key': 'type', 'value': '6' }
      ],

      formData: {
        serviceParamsMap: {},
        connector: {},
        connectorSrvParamsMap: {
          StructureTree: {},
          comStructureTree: [],
          sapFunName: '',
          sql: '',
          name: '',
          id: '',
          httpMethod: ''
        },
        protocol: '',
        securityConf: {
          accountId: '',
          enableSecurity: false, // 是否启用安全验证
          authStrategy: '' // 验证策略
        }
      },
      userList: [],
      userListVisible: false,
      ispass: {},
      testSqlVisible: false,
      resourceVisible: false,
      sqlData: [],
      sqlFormData: {},
      analysisData: '',
      dependVisible: false,
      activeName: 'first',
      dialogVisible: false,
      options: [
        { key: '覆盖', value: 'Override' },
        { key: '拼接', value: 'Append' },
        { key: '报错', value: 'Fail' },
        { key: '忽略', value: 'Ignore' },
        { key: '移动', value: 'Move' },
        { key: '重命名', value: 'TryRename' }
      ],
      titleName: '业务服务',
      httpMethodRadio: '',
      transActive: '1'
    }
  },
  created: function() {
    const _this = this
    this.kafkaParams.forEach(function(item) {
      if (item.isrequired) {
        _this.rules['connectorSrvParamsMap.' + item.name] = [
          { required: true, message: '不能为空', trigger: ['change', 'blur'] }
        ]
      }
    })
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    currentRow: {
      type: Object,
      default: () => {
      }
    }
  },
  watch: {
    value: {
      immediate: true,
      handler: function(val) {
        this.dialogVisible = val
        if (val) {
          this.$nextTick(() => {
            this.$refs.formData.clearValidate()
          })
          this.formData = {
            serviceParamsMap: {},
            connector: {},
            connectorSrvParamsMap: {
              sql: '',
              name: '',
              id: '',
              batch: false,
              storedProcedure: false,
              lazyStartProducer: false,
              autoCreate: false,
              flatten: false,
              httpMethod: ''
            },
            securityConf: {
              accountId: '',
              enableSecurity: false, // 是否启用安全验证
              authStrategy: '' // 验证策略
            }
          }
          // this.httpMethod = []
          this.httpMethodRadio = ''
          this.ispass = ''
          this.analysisData = ''
        }
        this.$set(this.currentRow, 'changetime', Date.parse(new Date()))
      },
      deep: true
    },
    dialogVisible(val) {
      this.$emit('input', val)
    },
    currentRow: {
      immediate: true,
      handler: function(val) {
        if (val && val.id) {
          this.getBusinessServiceDetail(val.id)
          console.log(val.id)
        }
      },
      deep: true
    }
  },
  computed: {
    ...mapGetters(['projectID']),
    sapTreeDataArr() {
      // 把接口返回的数据 转换格式 成树形的格式
      function conversionTree(origin, ele) {
        if (Array.isArray(ele)) {
          ele.forEach(it => {
            origin.push({
              label: it
            })
          })
        } else {
          for (const prop in ele) {
            if (Object.hasOwnProperty.call(ele, prop)) {
              const element = ele[prop]
              const arr = []
              origin.push({
                label: prop,
                children: arr
              })
              conversionTree(arr, element)
            }
          }
        }
      }
      const arr = []
      conversionTree(arr, this.sapTreeData)
      // 在树形格式基础上 添加funName属性
      function test(it) {
        if (it.children) {
          it.funName = it.funName ? it.funName : it.label
          it.children.forEach(it2 => {
            it2.funName = it.funName + '/' + it2.label
            test(it2)
          })
        }
      }
      arr.forEach(it => {
        test(it)
      })
      console.log(arr)
      return arr
    },
    sapFunTabledataArr() {
      function test(origin, ele) {
        for (const prop in ele) {
          if (Object.hasOwnProperty.call(ele, prop)) {
            const element = ele[prop]
            if (typeof element === 'string') {
              origin.push({
                id: Math.random(),
                name: prop,
                description: '',
                type: '',
                length: '',
                must: ''
              })
            } else {
              const arr = []
              origin.push({
                id: Math.random(),
                name: prop,
                description: '',
                type: '',
                length: '',
                must: '',
                children: arr
              })
              test(arr, element)
            }
          }
        }
      }
      const arr = []
      test(arr, this.sapFunTabledata)
      console.log(111, arr)
      return arr
    }
  },
  methods: {
    filter1(type = '') {
      this.filterSapFunTabledata = this.filterSapFunTabledataArr(this.sapFunTabledata, type)
    },
    filter2(type = '') {
      this.formData.connectorSrvParamsMap.comStructureTree = this.filterSapFunTabledataArr(this.formData.connectorSrvParamsMap.StructureTree, type)
      this.$forceUpdate()
    },
    // 显示请求参数还是响应参数
    filterSapFunTabledataArr(dataObj, type = '') {
      console.log('报错', dataObj, type)
      let arr = []
      for (const prop in dataObj) {
        if (Object.hasOwnProperty.call(dataObj, prop)) {
          const element = dataObj[prop]
          if (prop !== type) {
            arr = [
              ...arr,
              ...element
            ]
            // console.log(prop , element)
            // arr.push({
            //   name: prop,
            //   children: element
            // })
          }
        }
      }
      console.log(arr)
      // this.filterSapFunTabledata = arr;
      return arr
    },
    // 获取变量结构的树 只剩下name属性了的
    getStructureTree() {
      function test(arr) {
        return arr.map(it => {
          if (!it.children) {
            return {
              name: it.name
            }
          } else {
            return {
              name: it.name,
              children: test(it.children)
            }
          }
        })
      }
      // return test(this.filterSapFunTabledataArr());
      const obj = {}
      for (const prop in this.sapFunTabledata) {
        if (Object.hasOwnProperty.call(this.sapFunTabledata, prop)) {
          const element = this.sapFunTabledata[prop]
          obj[prop] = test(element)
        }
      }
      console.log(111, obj)
      return obj
    },
    // 获取可使用函数
    getFuns(id) {
      if (!id) {
        this.$message({
          message: '请先选择适配器',
          type: 'warning'
        })
        return
      }
      console.log(id)
      getFuns(id).then(res => {
        console.log(res)
        this.sapTreeData = res.data
        this.sapFunPage = true
      })

      // this.sapTreeData = {
      //   '分类1':{
      //     '分类1-1':['函数名1-1'],
      //     '分类1-2':['函数名1-2']
      //   },
      //   '分类2':{
      //     '分类2-1':['函数名2-1', '函数名2-1-1'],
      //     '分类2-2':['函数名2-2']
      //   },
      //   '分类3': ['aaa', 'sss'],
      //   '分类4': {
      //     '分类5': {
      //       'aaa':['1','2'],
      //       'ada':{
      //         'ad':['as']
      //       }
      //     }
      //   },
      // };
      // this.sapFunPage = true;
    },
    // 关闭SAP函数选择页面
    closeFunDialog() {
      this.sapFunName = this.formData.connectorSrvParamsMap.sapFunName
      this.sapFunPage = false
    },
    // SAP函数选择页面 下一步
    sapFunSubmit() {
      this.sapFunPage = false
      this.formData.connectorSrvParamsMap.sapFunName = this.sapFunName
      this.formData.connectorSrvParamsMap.StructureTree = this.getStructureTree()
      this.filter2()
      console.log(this.formData.connectorSrvParamsMap.comStructureTree)
    },
    // 点击可使用函数
    funTreeClick(data) {
      if (!data.children) {
        this.sapFunName = data.label
        console.log(data)

        getFunDetails(this.formData.connectorId, data.funName).then(res => {
          const data = res.data
          console.log(data)
          this.sapFunTabledata = data
          this.filterSapFunTabledata = this.filterSapFunTabledataArr(data)
        }, err => {
          console.log(err)
        })
      }
    },
    handleClicks(tab) {
      this.fileList1 = []
      this.typeList.map(item => {
        if (item.type === tab.name) {
          this.fileList1.push(item.content)
        }
      })
    },
    confirmEdit(data) {
      this.generateSql(data.id, data.name)
      this.$set(this.sqlObj, 'name', data.name)
      this.getResourceFile(this.sqlObj.id, this.sqlObj.perjectId)
      this.editSqlBuilderVisible = false
    },
    closeEditDialog(val) {
      this.editSqlBuilderVisible = val
    },
    // 构建器列表选中的回调
    getSql(data) {
      // console.log('data', data)
      this.sqlObj = data
      this.generateSql(data.id, data.name)
      this.isClick = false
    },
    // 获取sql
    generateSql(id, name) {
      console.log('name', name)
      generateSql({
        id: id
      }).then(res => {
        console.log(res, '1')
        if (res.status === '200') {
          this.formData.connectorSrvParamsMap.sql = res.data.sql
          this.formData.connectorSrvParamsMap.name = name
          this.formData.connectorSrvParamsMap.id = id
          this.formData.connectorSrvParams.sql = res.data.sql
          this.formData.connectorSrvParams.name = name
          this.formData.connectorSrvParams.id = id
        }
      })
    },
    // 获取默认的配置文件
    // getResourceFile (id, pid) {
    //   getResourceFile(id, pid).then(res => {
    //     console.log(res, '1')
    //   })
    // },
    httpMethodChange() {
      this.$set(this.formData.connectorSrvParamsMap, 'httpMethod', this.httpMethodRadio)
    },
    changeSql() {
      this.analysisData = ''
      this.ispass = ''
    },
    handleResource(data) {
      this.filename = data.name
    },
    // sql测试
    testSqlFun(type) {
      this.activeType = type
      if (!this.formData.connectorId) {
        this.$message.warning('请先选择适配器！')
        return
      }
      let sqlstr = ''
      if (!this.formData.connectorSrvParamsMap.sql) {
        this.$message.warning('请输入sql语句！')
        return
      }
      sqlstr = this.formData.connectorSrvParamsMap.sql
      this.sqlFormData = {
        id: this.formData.connectorId,
        script: sqlstr
      }
      saveSql({
        id: this.formData.connectorId,
        script: sqlstr
      })
        .then((rt) => {
          if (rt.status === '200') {
            this.analysisData = rt.data
            this.sqlData = Object.keys(rt.data)
            if (this.sqlData.length > 0) {
              this.testSqlVisible = true
            } else {
              scriptValidate({
                id: this.formData.connectorId,
                script: sqlstr,
                params: {}
              })
                .then((res) => {
                  this.ispass = res.status === '200' ? 'true' : 'false'
                })
                .catch(() => {
                })
            }
          }
        })
        .catch(() => {
        })
    },
    getStatus(data) {
      this.ispass = data
    },
    getBusinessServiceDetail(id) {
      getBusinessServiceDetail(id)
        .then((rt) => {
          if (rt.status === '200' && rt.data) {
            // rt.data.connectorSrvParamsMap = rt.data.connectorSrvParams;
            this.formData = rt.data
            console.log('this.formData111', this.formData)
            if (!this.formData.serviceParamsMap) {
              this.$set(this.formData, 'serviceParamsMap', {})
            }
            if (!this.formData.connectorSrvParamsMap) {
              this.$set(this.formData, 'connectorSrvParamsMap', {})
            } else {
              this.httpMethodRadio = this.formData.connectorSrvParamsMap.httpMethod
              // this.httpMethod = this.formData.connectorSrvParamsMap.httpMethod
              //   ? this.formData.connectorSrvParamsMap.httpMethod.split(",")
              //   : [];
            }
            if (!this.formData.connector) {
              this.$set(this.formData, 'connector', {})
            }
            if (!this.formData.securityConf) {
              this.$set(this.formData, 'securityConf', {
                accountId: '',
                enableSecurity: false, // 是否启用安全验证
                authStrategy: '' // 验证策略
              })
            }
            if (this.formData.protocol === 'DB') {
              if (
                this.formData.connectorId &&
                  this.formData.connectorSrvParamsMap.sql
              ) {
                saveSql({
                  id: this.formData.connectorId,
                  script: this.formData.connectorSrvParamsMap.sql
                })
                  .then((rt) => {
                    if (rt.status === '200') {
                      this.analysisData = rt.data
                      if (this.analysisData) {
                        this.ispass = 'true'
                      }
                    }
                  })
                  .catch(() => {
                  })
              }
            }
          }
        })
        .catch(() => {
        })
    },
    async submit() {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          if (this.formData.protocol === 'DB') {
            console.log(this.formData)
            if (!this.formData.connectorSrvParamsMap.sql) {
              this.$message.warning('基础配置中请输入sql语句')
              return
            }
            // if (!this.analysisData) {
            //   this.$message.warning('基础配置中请测试sql，sql有效方可提交')
            //   return
            // }
          }

          // Jms
          let forms = {}
          forms.serviceParamsMap = this.formData.serviceParamsMap
          forms.connector = this.formData.connector
          forms.connectorSrvParamsMap = {}
          if (this.formData.protocol === 'Jms') {
            forms = {
              'id': this.formData.id,
              'name': this.formData.name,
              'description': this.formData.description,
              'messageType': this.formData.messageType,
              'payloadType': this.formData.payloadType,
              'defineFileType': this.formData.defineFileType,
              'defineFile': this.formData.defineFile,
              'secondDefineFile': this.formData.secondDefineFile,
              'protocol': this.formData.protocol,
              'uri': this.formData.uri,
              'compress': this.formData.compress,
              'type': this.formData.type,
              'encoding': this.formData.encoding,
              'connectorType': this.formData.connectorType,
              'connectorId': this.formData.connectorId,
              'defineFileId': this.formData.defineFileId,
              'secondDefineFileId': this.formData.secondDefineFileId,
              'objname': this.formData.objname,
              serviceParamsMap: {
                'binding': this.formData.serviceParamsMap.binding,
                'httpMethod': this.formData.serviceParamsMap.httpMethod
              },
              connector: {
                'name': this.formData.connector.name,
                'connector': this.formData.connector.name,
                'connectorType': this.formData.connector.connectorType,
                'host': this.formData.connector.host,
                'id': this.formData.connector.id,
                'mark': this.formData.connector.mark,
                'password': this.formData.connector.password,
                'port': this.formData.connector.port,
                'resourceSubType': this.formData.connector.resourceSubType,
                'resourceType': this.formData.connector.resourceType,
                'type': this.formData.connector.type,
                'username': this.formData.connector.username
              },
              connectorSrvParamsMap: {
                'destinationType': this.formData.connectorSrvParamsMap.destinationType,
                'destinationName': this.formData.connectorSrvParamsMap.destinationName,
                'transacted': this.formData.connectorSrvParamsMap.transacted,
                'transactedInOut': this.formData.connectorSrvParamsMap.transactedInOut,
                'transactionTimeout': this.formData.connectorSrvParamsMap.transactionTimeout,
                'explicitQosEnabled': this.formData.connectorSrvParamsMap.explicitQosEnabled,
                'deliveryPersistent': this.formData.connectorSrvParamsMap.deliveryPersistent,
                'priority': this.formData.connectorSrvParamsMap.priority,
                'timeToLive': this.formData.connectorSrvParamsMap.timeToLive,
                'disableTimeToLive': this.formData.connectorSrvParamsMap.disableTimeToLive,
                'allowNullBody': this.formData.connectorSrvParamsMap.allowNullBody,
                'streamMessageTypeEnabled': this.formData.connectorSrvParamsMap.streamMessageTypeEnabled,
                'requestTimeOut': this.formData.connectorSrvParamsMap.requestTimeOut
              }

            }
          }
          // http
          let httpForm = {}
          httpForm.serviceParamsMap = this.formData.serviceParamsMap
          httpForm.connector = this.formData.connector
          httpForm.connectorSrvParamsMap = {}
          httpForm.defineFileInfo = this.formData.defineFileInfo
          httpForm.connectorSrvParams = this.formData.connectorSrvParams
          if (this.formData.protocol === 'http') {
            httpForm = {
              'connectorType': this.formData.connectorType,
              'defineFileId': this.formData.defineFileId,
              'secondDefineFileId': this.formData.secondDefineFileId,
              'encoding': this.formData.encoding,
              'id': this.formData.id,
              'messageType': this.formData.messageType,
              'name': this.formData.name,
              'type': this.formData.type,
              'payloadType': this.formData.payloadType,
              'description': this.formData.description,
              'defineFileType': this.formData.defineFileType,
              'defineFile': this.formData.defineFile,
              'secondDefineFile': this.formData.secondDefineFile,
              'protocol': this.formData.protocol,
              'uri': this.formData.uri,
              'compress': this.formData.compress,
              'connectorId': this.formData.connectorId,
              'objname': this.formData.objname,
              connectorSrvParamsMap: {
                'httpMethod': this.formData.connectorSrvParamsMap.httpMethod
              },
              serviceParamsMap: {
                'binding': this.formData.serviceParamsMap.binding,
                'httpMethod': this.formData.serviceParamsMap.httpMethod
              },
              connectorSrvParams: {
                // "httpMethod":this.formData.connectorSrvParams.httpMethod
              },
              securityConf: {
                'accountId': this.formData.securityConf.accountId,
                'enableSecurity': this.formData.securityConf.enableSecurity,
                'authStrategy': this.formData.securityConf.authStrategy
              },
              authAccounts: this.formData.authAccounts
            }
          }
          // Ftp
          let ftpForm = {}
          ftpForm.serviceParamsMap = this.formData.serviceParamsMap
          ftpForm.connector = this.formData.connector
          ftpForm.connectorSrvParamsMap = {}
          if (this.formData.protocol === 'Ftp') {
            ftpForm = {
              'id': this.formData.id,
              'name': this.formData.name,
              'description': this.formData.description,
              'messageType': this.formData.messageType,
              'payloadType': this.formData.payloadType,
              'defineFileType': this.formData.defineFileType,
              'defineFile': this.formData.defineFile,
              'secondDefineFile': this.formData.secondDefineFile,
              'protocol': this.formData.protocol,
              'uri': this.formData.uri,
              'type': this.formData.type,
              'encoding': this.formData.encoding,
              'connectorType': this.formData.connectorType,
              'connectorId': this.formData.connectorId,
              'defineFileId': this.formData.defineFileId,
              'secondDefineFileId': this.formData.secondDefineFileId,
              'domainId': this.formData.domainId,
              'domainName': this.formData.domainName,
              'targetId': this.formData.targetId,
              'targetType': this.formData.targetType,
              'compress': this.formData.compress,
              'resourceType': this.formData.resourceType,
              'publishStatus': this.formData.publishStatus,
              'objname': this.formData.objname,
              connectorSrvParamsMap: {
                'antExclude': this.formData.connectorSrvParamsMap.antExclude,
                'antInclude': this.formData.connectorSrvParamsMap.antInclude,
                'autoCreate': this.formData.connectorSrvParamsMap.autoCreate,
                'charset': this.formData.connectorSrvParamsMap.charset,
                'cron': this.formData.connectorSrvParamsMap.cron,
                'delay': this.formData.connectorSrvParamsMap.delay,
                'greedy': this.formData.connectorSrvParamsMap.greedy,
                // 'httpMethod': this.formData.connectorSrvParamsMap.httpMethod,
                'initialDelay': this.formData.connectorSrvParamsMap.initialDelay,
                'move': this.formData.connectorSrvParamsMap.move,
                'moveFailed': this.formData.connectorSrvParamsMap.moveFailed,
                'path': this.formData.connectorSrvParamsMap.path,
                'pollType': this.formData.connectorSrvParamsMap.pollType,
                'preMove': this.formData.connectorSrvParamsMap.preMove,
                'readLock': this.formData.connectorSrvParamsMap.readLock,
                'flatten': this.formData.connectorSrvParamsMap.flatten,
                'fileExist': this.formData.connectorSrvParamsMap.fileExist,
                'moveExisting': this.formData.connectorSrvParamsMap.moveExisting,
                'tempFileName': this.formData.connectorSrvParamsMap.tempFileName,
                'tempPrefix': this.formData.connectorSrvParamsMap.tempPrefix,
                'fileName': this.formData.connectorSrvParamsMap.fileName
              },
              serviceParamsMap: {
                'binding': this.formData.serviceParamsMap.binding,
                'httpMethod': this.formData.serviceParamsMap.httpMethod
              }
            }
          }
          // File
          let fileForm = {}
          fileForm.serviceParamsMap = this.formData.serviceParamsMap
          fileForm.connector = this.formData.connector
          fileForm.connectorSrvParamsMap = this.formData.connectorSrvParamsMap
          if (this.formData.protocol === 'File') {
            fileForm = {
              'id': this.formData.id,
              'name': this.formData.name,
              'description': this.formData.description,
              'messageType': this.formData.messageType,
              'payloadType': this.formData.payloadType,
              'defineFileType': this.formData.defineFileType,
              'defineFile': this.formData.defineFile,
              'secondDefineFile': this.formData.secondDefineFile,
              'protocol': this.formData.protocol,
              'uri': this.formData.uri,
              'compress': this.formData.compress,
              'type': this.formData.type,
              'encoding': this.formData.encoding,
              'connectorType': this.formData.connectorType,
              'connectorId': this.formData.connectorId,
              'defineFileId': this.formData.defineFileId,
              'secondDefineFileId': this.formData.secondDefineFileId,
              'domainId': this.formData.domainId,
              'domainName': this.formData.domainName,
              'targetId': this.formData.targetId,
              'targetType': this.formData.targetType,
              'resourceType': this.formData.resourceType,
              'publishStatus': this.formData.publishStatus,
              'objname': this.formData.objname,
              serviceParamsMap: {
                'binding': this.formData.serviceParamsMap.binding,
                'httpMethod': this.formData.serviceParamsMap.httpMethod
              }
            }
          }
          forms.projectId = this.projectID
          httpForm.projectId = this.projectID
          ftpForm.projectId = this.projectID
          fileForm.projectId = this.projectID
          this.formData.projectId = this.projectID
          if (this.formData.protocol === 'Ftp') {
            saveBusinessService(ftpForm).then((rt) => {
              if (rt.status === '200') {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                })
                this.$emit('confirm')
              }
            })
              .catch((err) => {
                const data = err.data || []
                const hint = [
                  { fieName: '名称', field: 'name' },
                  { fieName: '说明', field: 'description' },
                  { fieName: '目标', field: 'targetService.name' },
                  { fieName: '消息类型', field: 'messageType' },
                  {
                    fieName: 'Http Method',
                    field: 'connectorSrvParamsMap.httpMethod'
                  },
                  { fieName: '报文格式', field: 'payloadType' },
                  { fieName: '定义文件类型', field: 'defineFileType' },
                  { fieName: '定义文件', field: 'defineFile' },
                  { fieName: '定义文件2', field: 'secondDefineFile' },
                  { fieName: '端点', field: 'serviceParamsMap.binding' },
                  { fieName: '协议', field: 'protocol' },
                  { fieName: '适配器', field: 'connector.name' },
                  { fieName: '端点uri', field: 'uri' }
                ]
                checkFormData(data, hint)
              })
          } else if (this.formData.protocol === 'http') {
            saveBusinessService(httpForm).then((rt) => {
              if (rt.status === '200') {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                })
                this.$emit('confirm')
              }
            })
              .catch((err) => {
                const data = err.data || []
                const hint = [
                  { fieName: '名称', field: 'name' },
                  { fieName: '说明', field: 'description' },
                  { fieName: '目标', field: 'targetService.name' },
                  { fieName: '消息类型', field: 'messageType' },
                  {
                    fieName: 'Http Method',
                    field: 'connectorSrvParamsMap.httpMethod'
                  },
                  { fieName: '报文格式', field: 'payloadType' },
                  { fieName: '定义文件类型', field: 'defineFileType' },
                  { fieName: '定义文件', field: 'defineFile' },
                  { fieName: '定义文件2', field: 'secondDefineFile' },
                  { fieName: '端点', field: 'serviceParamsMap.binding' },
                  { fieName: '协议', field: 'protocol' },
                  { fieName: '适配器', field: 'connector.name' },
                  { fieName: '端点uri', field: 'uri' }
                ]
                checkFormData(data, hint)
              })
          } else if (this.formData.protocol === 'File') {
            saveBusinessService(fileForm).then((rt) => {
              if (rt.status === '200') {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                })
                this.$emit('confirm')
              }
            })
              .catch((err) => {
                const data = err.data || []
                const hint = [
                  { fieName: '名称', field: 'name' },
                  { fieName: '说明', field: 'description' },
                  { fieName: '目标', field: 'targetService.name' },
                  { fieName: '消息类型', field: 'messageType' },
                  {
                    fieName: 'Http Method',
                    field: 'connectorSrvParamsMap.httpMethod'
                  },
                  { fieName: '报文格式', field: 'payloadType' },
                  { fieName: '定义文件类型', field: 'defineFileType' },
                  { fieName: '定义文件', field: 'defineFile' },
                  { fieName: '定义文件2', field: 'secondDefineFile' },
                  { fieName: '端点', field: 'serviceParamsMap.binding' },
                  { fieName: '协议', field: 'protocol' },
                  { fieName: '适配器', field: 'connector.name' },
                  { fieName: '端点uri', field: 'uri' }
                ]
                checkFormData(data, hint)
              })
          } else if (this.formData.protocol === 'Jms') {
            saveBusinessService(forms).then((rt) => {
              if (rt.status === '200') {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                })
                this.$emit('confirm')
              }
            })
              .catch((err) => {
                const data = err.data || []
                const hint = [
                  { fieName: '名称', field: 'name' },
                  { fieName: '说明', field: 'description' },
                  { fieName: '目标', field: 'targetService.name' },
                  { fieName: '消息类型', field: 'messageType' },
                  {
                    fieName: 'Http Method',
                    field: 'connectorSrvParamsMap.httpMethod'
                  },
                  { fieName: '报文格式', field: 'payloadType' },
                  { fieName: '定义文件类型', field: 'defineFileType' },
                  { fieName: '定义文件', field: 'defineFile' },
                  { fieName: '定义文件2', field: 'secondDefineFile' },
                  { fieName: '端点', field: 'serviceParamsMap.binding' },
                  { fieName: '协议', field: 'protocol' },
                  { fieName: '适配器', field: 'connector.name' },
                  { fieName: '端点uri', field: 'uri' }
                ]
                checkFormData(data, hint)
              })
          } else {
            console.log(12334)
            saveBusinessService(this.formData).then((rt) => {
              if (rt.status === '200') {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                })
                this.$emit('confirm')
              }
            })
              .catch((err) => {
                const data = err.data || []
                const hint = [
                  { fieName: '名称', field: 'name' },
                  { fieName: '说明', field: 'description' },
                  { fieName: '目标', field: 'targetService.name' },
                  { fieName: '消息类型', field: 'messageType' },
                  {
                    fieName: 'Http Method',
                    field: 'connectorSrvParamsMap.httpMethod'
                  },
                  { fieName: '报文格式', field: 'payloadType' },
                  { fieName: '定义文件类型', field: 'defineFileType' },
                  { fieName: '定义文件', field: 'defineFile' },
                  { fieName: '定义文件2', field: 'secondDefineFile' },
                  { fieName: '端点', field: 'serviceParamsMap.binding' },
                  { fieName: '协议', field: 'protocol' },
                  { fieName: '适配器', field: 'connector.name' },
                  { fieName: '端点uri', field: 'uri' }
                ]
                checkFormData(data, hint)
              })
          }
        }
      })
    },
    // tree事件
    handleNodeClick(data) {
    },
    // 依赖检测
    showDepend(showDependOther) {
      this.dependVisible = true
      if (!showDependOther) {
        this.showDependOtherFlag = false
      }
    },
    // 用户列表
    closeUserList(val) {
      this.userListVisible = val
    },
    getCheckeduserList(val) {
      var that = this
      that.userListVisible = false
      this.userList = val
      if (val.length) {
        that.formData.securityConf.accountId = []
        val.map(function(item) {
          that.formData.securityConf.accountId.push(item.id)
          that.formData.securityConf.accountId = that.formData.securityConf.accountId.join('')
        })
      } else {
        that.formData.securityConf.accountId = ''
      }
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
  .radios {
    position: relative;
    width: 100%;

    /deep/ .el-radio__input {
      position: relative;
      top: 22px;
      left: 18px;
    }
  }

  .el-icon-check {
    color: #67c23a;
    font-size: 20px;
    font-weight: 600;
    margin: 0 10px;
  }

  .el-icon-close {
    color: #f56c6c;
    font-size: 20px;
    font-weight: 600;
    margin: 0 10px;
  }

  .changgename {
    cursor: pointer;
  }

  .sap-fun-container{
    display: flex;
    width: 100%;
    height: 100%;
    .left{
      height: 400px;
      width: 30%;
      overflow: auto;
      flex: 0 0 auto;
    }
    .right{
      flex: 1 1 auto;
    }
    .sap-fun-span{
      // display: inline-block;
      // border: 1px solid #ebeef5;
      // box-sizing: border-box;
      // padding: 5px 10px;
      margin: 15px 10px 15px 0;
    }
  }
</style>
