<template>
  <div class="fwcs">
    <el-breadcrumb 
      v-if="is_map != 0"
      separator="/"
      class="bread_crumb"
    >
      <el-breadcrumb-item :to="{ path: '/workplace' }">
        在线组件工具
      </el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/intelligent_drawing' }">
        智能制图
      </el-breadcrumb-item>
      <el-breadcrumb-item>发布信息填写</el-breadcrumb-item>
    </el-breadcrumb>
    <el-breadcrumb
      v-else-if="process_id != ''"
      separator="/"
      class="bread_crumb"
    >
      <el-breadcrumb-item :to="{ path: '/workplace' }">
        在线组件工具
      </el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/progress/designer' }">
        流程设计
      </el-breadcrumb-item>
      <el-breadcrumb-item>发布信息填写</el-breadcrumb-item>
    </el-breadcrumb>
    <el-breadcrumb
      v-else
      separator="/"
      class="bread_crumb"
    >
      <el-breadcrumb-item :to="{ path: '/fwzc' }">服务注册</el-breadcrumb-item>
      <el-breadcrumb-item v-if="!jcxxtx">服务测试</el-breadcrumb-item>
      <el-breadcrumb-item
        v-else
        :to="{ path: '/fwzc' }"
      >服务测试</el-breadcrumb-item>
      <el-breadcrumb-item v-if="jcxxtx">基础信息填写</el-breadcrumb-item>
    </el-breadcrumb>
    <div v-if="!jcxxtx">
      <block-radius>
        <el-row>
          <el-button
            v-for="(item, index) in btnList"
            :key="item.id"
            @click="clickBtn(index)"
            :class="activeBtn == index ? 'fwcs_btn_act' : 'fwcs_btn_dis'"
          >
            <img
              v-if="activeBtn == index"
              :src="require('@/assets/imgs/' + item.active + '.png')"
              class="fwcs_btn_img"
            />
            <img
              v-else
              :src="require('@/assets/imgs/' + item.default + '.png')"
              class="fwcs_btn_img"
            />
            {{ item.name }}
          </el-button>
        </el-row>
        <div class="gray_line"></div>
        <div v-if="activeBtn == 4">
          <div class="sqxx_title">服务类型：</div>
          <el-select
            @change="changeZhType"
            v-model="zhyyVal"
            placeholder="请选择"
            class="zhyy_select"
          >
            <el-option
              v-for="item in optionsZhyy"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div
          v-if="activeBtn == 4 && zhyyVal == 24"
          class="lc_alert"
        >
          <i class="el-icon-warning-outline"></i>
          <p>
            说明：支持多个流程服务接口的注册，若流程服务包含多个接口，每个接口需分别注册为独立的服务地址才可使用。<br />
            示例：http(s)://www.apaas.com(自有域名)/xxx，其中xxx为该流程服务的不同接口后缀，需分别进行单个接口的注册。<br />
            比如：服务地址1：http(s)://www.apaas.com(自有域名)/create(用于新建流程实例)
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;服务地址2：http(s)://www.apaas.com(自有域名)/query
            （用于查询流程状态）
          </p>
        </div>
        <div v-show="
            (activeBtn == 4 && zhyyVal == 24) ||
            activeBtn == 3 ||
            activeBtn == 2
          ">
          <div class="fwcs_fwdz">
            上传接口文档
            <span class="title_bc">（请上传所有服务地址完整接口文档）</span>：
          </div>
          <upload-file
            :multiple="false"
            :unique="false"
            :max="1"
            type="zip"
            :readOnly="false"
            :drag="true"
            @getNewList="getNewListOne"
            class="lc_upf"
            up_fz="支持.pdf，.docx，.doc，.zip，.rar 格式文件"
            accepts=".pdf, .docx, .doc, .zip, .rar"
            :list="jkwds"
          ></upload-file>
        </div>
        <div v-if="activeBtn == 3">
          <div class="fwcs_fwdz">返回数据格式</div>
          <el-radio-group
            v-model="gz_fhsjgs"
            class="gz_fhsjgs_rad"
          >
            <el-radio label="JSON">JSON</el-radio>
            <el-radio label="xml">XML</el-radio>
          </el-radio-group>
        </div>
        <div
          v-if="!(activeBtn == 4 && zhyyVal == 24)"
          class="fwcs_fwdz"
        >
          服务地址：
        </div>
        <div
          v-if="!(activeBtn == 4 && zhyyVal == 24)"
          class="fwcs_fwdz_inner"
        >
          <el-input
            placeholder="请输入内容"
            @input="getUrl"
            v-model="serviceUrl"
            class="input-with-select"
          >
            <el-select
              v-if="activeBtn == 1"
              v-model="select"
              slot="prepend"
              placeholder="请选择"
            >
              <el-option
                v-for="item in optionType1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-select
              v-else-if="activeBtn == 2 || activeBtn == 3"
              v-model="select"
              slot="prepend"
              placeholder="请选择"
            >
              <el-option
                v-for="item in optionType2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-select
              v-else
              v-model="select"
              slot="prepend"
              placeholder="请选择"
            >
              <el-option
                v-for="item in optionType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-input>
          <el-button
            @click="clickFwcs()"
            class="fwcs_btn_fwcs"
          >
            服务测试
          </el-button>
        </div>
        <div v-if="activeBtn == 0 || activeBtn == 2 || activeBtn == 3">
          <el-tabs
            v-model="activeName"
            class="fwcs_tabs"
            @tab-click="clickTab"
          >
            <el-tab-pane
              label="请求参数"
              name="0"
            >
              <ces-table
                ref="fwcs_sjfw_qq"
                size="mini"
                :border="true"
                :headers="sjfwQqcs"
                url
                :datas="datasSj"
                :searchShow="false"
                :addRowBtn="false"
                :autoAdd="true"
                :isDialog="false"
                :isSelection="false"
                :isIndex="true"
                :radius="true"
                :emptyText="emptyText"
                :stripe="false"
                :paginationShow="false"
                :pageSizeShow="false"
                headerCellClassName="th_pink"
                @changeTable="changeTable"
              ></ces-table>
            </el-tab-pane>
            <el-tab-pane
              label="请求体"
              name="1"
            >
              <div class="sjfw_qqt">
                <el-radio-group v-model="sjfwQqt">
                  <el-radio label="JSON">JSON</el-radio>
                </el-radio-group>
              </div>
              <v-apaas-code
                :key="'code' + code_1_index"
                ref="jsonCodes"
              ></v-apaas-code>
            </el-tab-pane>
            <el-tab-pane
              label="授权信息"
              name="2"
            >
              <el-row class="sqxx_row">
                <el-col :span="6">
                  <div class="sqxx_title">授权方式：</div>
                  <el-select
                    v-model="sqfsVal"
                    placeholder="请选择"
                    class="sqxx_select"
                  >
                    <el-option
                      v-for="item in optionsSq"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-col>
                <el-col
                  :span="2"
                  class="center_line_c"
                >
                  <div class="center_line"></div>
                </el-col>
                <el-col :span="16">
                  <div class="sqxx_title">Token：</div>
                  <el-input
                    v-model="tokenVal"
                    placeholder="请输入内容"
                  ></el-input>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane
              label="请求头Header"
              name="3"
            >
              <ces-table
                ref="fwcs_zhfw_qqtcs"
                size="mini"
                :border="true"
                :headers="sjfwQqtcs"
                url
                :datas="datasQqu"
                :searchShow="false"
                :addRowBtn="false"
                :autoAdd="true"
                :isDialog="false"
                :isSelection="false"
                :isIndex="true"
                :radius="true"
                :emptyText="emptyText"
                :stripe="false"
                :paginationShow="false"
                :pageSizeShow="false"
                headerCellClassName="th_pink"
              ></ces-table>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div v-if="activeBtn == 1">
          <div class="skfw_fwlx">服务类型：</div>
          <div class="skfw_fwlx_radios">
            <el-radio
              v-for="item in skfwRadios"
              :key="item.name"
              v-model="skfwQqt"
              :label="item.id"
            >{{ item.name }}</el-radio>
          </div>
        </div>
        <div v-if="activeBtn == 4 && zhyyVal != 34 && zhyyVal != 24">
          <el-tabs
            v-model="activeZh"
            class="fwcs_tabs"
            @tab-click="clickTab"
          >
            <el-tab-pane
              label="请求参数"
              name="0"
            >
              <ces-table
                ref="fwcs_zhfw_qq"
                size="mini"
                :border="true"
                :headers="sjfwQqcs"
                url
                :datas="datasZh"
                :searchShow="false"
                :addRowBtn="false"
                :autoAdd="true"
                :isDialog="false"
                :isSelection="false"
                :isIndex="true"
                :radius="true"
                :emptyText="emptyText"
                :stripe="false"
                :paginationShow="false"
                :pageSizeShow="false"
                headerCellClassName="th_pink"
                @changeTable="changeTable"
              ></ces-table>
            </el-tab-pane>
            <el-tab-pane
              label="请求体"
              name="1"
            >
              <div class="sjfw_qqt">
                <el-radio-group
                  v-model="zhfwQqt"
                  @change="changeZhfwQqt"
                >
                  <el-radio label="JSON">JSON</el-radio>
                  <el-radio label="form-data">form-data</el-radio>
                  <el-radio label="x-www-form-urlencoded">x-www-form-urlencoded</el-radio>
                </el-radio-group>
              </div>
              <div v-show="zhfwQqt == 'JSON'">
                <v-apaas-code
                  :key="'code' + code_2_index"
                  ref="zhfwJsonCodes"
                ></v-apaas-code>
              </div>
              <div v-show="zhfwQqt == 'form-data'">
                <ces-table
                  ref="fwcs_zhfw_qq_form"
                  size="mini"
                  :border="true"
                  :headers="zhfwQqcsForm"
                  url
                  :datas="datasZhForm"
                  :searchShow="false"
                  :addRowBtn="false"
                  :autoAdd="true"
                  :isDialog="false"
                  :isSelection="false"
                  :isIndex="true"
                  :radius="true"
                  :emptyText="emptyText"
                  :stripe="false"
                  :paginationShow="false"
                  :pageSizeShow="false"
                  headerCellClassName="th_pink"
                  @primary-del="delItemQq"
                ></ces-table>
              </div>
              <div v-show="zhfwQqt == 'x-www-form-urlencoded'">
                <ces-table
                  ref="fwcs_zhfw_www"
                  size="mini"
                  :border="true"
                  :headers="sjfwQqcs"
                  url
                  :datas="datasZhwww"
                  :searchShow="false"
                  :addRowBtn="false"
                  :autoAdd="true"
                  :isDialog="false"
                  :isSelection="false"
                  :isIndex="true"
                  :radius="true"
                  :emptyText="emptyText"
                  :stripe="false"
                  :paginationShow="false"
                  :pageSizeShow="false"
                  headerCellClassName="th_pink"
                ></ces-table>
              </div>
            </el-tab-pane>
           <el-tab-pane
              label="请求头Header"
              name="2"
            >
              <ces-table
                ref="fwcs_zhfw_qqtcs"
                size="mini"
                :border="true"
                :headers="sjfwQqtcs"
                url
                :datas="datasQqu"
                :searchShow="false"
                :addRowBtn="false"
                :autoAdd="true"
                :isDialog="false"
                :isSelection="false"
                :isIndex="true"
                :radius="true"
                :emptyText="emptyText"
                :stripe="false"
                :paginationShow="false"
                :pageSizeShow="false"
                headerCellClassName="th_pink"
              ></ces-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </block-radius>
      <block-radius v-show="resultShow">
        <div v-show="
            (activeBtn == 0 ||
              activeBtn == 3 ||
              (activeBtn == 4 && (zhyyVal == 22 || zhyyVal == 23))) &&
            resSuccess
          ">
          <div class="sjfw_qqcstx">请求参数信息填写：</div>
          <ces-table
            ref="fwcs_sjfw_qqcs"
            size="mini"
            :border="true"
            :headers="sjfwQqcstx"
            url
            :datas="datasQqcs"
            :searchShow="false"
            :addRowBtn="false"
            :autoAdd="false"
            :isDialog="false"
            :isSelection="false"
            :isIndex="true"
            :radius="true"
            :emptyText="emptyText"
            :stripe="false"
            :paginationShow="false"
            :pageSizeShow="false"
            headerCellClassName="th_pink"
          ></ces-table>
          <div class="sjfw_fhcstx">返回参数信息填写：</div>
          <ces-table
            ref="fwcs_sjfw_fhcs"
            size="mini"
            :border="true"
            :headers="sjfwFhcstx"
            url
            :datas="datasFhcs"
            :searchShow="false"
            :addRowBtn="false"
            :autoAdd="false"
            :isDialog="false"
            :isSelection="false"
            :isIndex="true"
            :radius="true"
            :emptyText="emptyText"
            :stripe="false"
            :paginationShow="false"
            :pageSizeShow="false"
            headerCellClassName="th_pink"
          ></ces-table>
        </div>
        <div v-show="
            (activeBtn == 1 ||
              activeBtn == 2 ||
              (activeBtn == 4 && zhyyVal == 34)) &&
            resSuccess
          ">
          <div class="skfw_csfwxx">测试服务信息：</div>
          <div class="test_succ">
            <div class="skcs_jg">
              <img
                src="@/assets/imgs/test_icon_success.png"
                class="skcs_jg_img"
              />&nbsp;测试成功
            </div>
          </div>
        </div>
        <div v-show="
            (activeBtn == 0 ||
              activeBtn == 1 ||
              activeBtn == 2 ||
              activeBtn == 3 ||
              activeBtn == 4) &&
            !resSuccess
          ">
          <div class="skfw_csfwxx">测试服务信息：</div>
          <div class="test_succ">
            <div class="skcs_jg">
              <img
                src="@/assets/imgs/test_icon_error.png"
                class="skcs_jg_img"
              />&nbsp;测试失败
            </div>
          </div>
        </div>
        <div class="btn_footer">
          <el-button
            class="reset"
            v-if="activeBtn == 0 && resSuccess"
            @click="resetSjfw"
          >
            重置
          </el-button>
          <el-button
            :disabled="!resSuccess"
            :class="resSuccess ? 'next' : ''"
            @click="nextJcxx"
          >
            下一步
          </el-button>
        </div>
      </block-radius>
      <div v-if="activeBtn == 4 && zhyyVal == 24">
        <!-- 24 -->
        <block-radius
          v-for="(itemOne, indexOne) in liucheng_list"
          :key="`liucheng_${indexOne}`"
        >
          <div class="one_service">
            <div class="one_name">服务接口名称：</div>
            <div class="one_name_in">
              <el-form
                :model="itemOne"
                :rules="rulesOne"
                :ref="`ruleFormOne_${indexOne}`"
              >
                <el-form-item prop="one_input">
                  <el-input
                    v-model="itemOne.one_input"
                    placeholder="请输入内容"
                  >
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
            <div class="one_url">服务地址{{ indexOne + 1 }}：</div>
            <div class="fwcs_fwdz_inner">
              <el-input
                placeholder="请输入内容"
                @input="
                  (val) => {
                    getUrlOne(val, indexOne);
                  }
                "
                v-model="itemOne.serviceUrl"
                class="input-with-select"
              >
                <el-select
                  v-model="itemOne.select"
                  slot="prepend"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in optionType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-input>
              <el-button
                @click="clickFwcsOne(indexOne)"
                class="fwcs_btn_fwcs"
              >服务测试</el-button>
            </div>
            <el-tabs
              v-model="itemOne.activeName"
              class="fwcs_tabs"
              @tab-click="clickTabOne"
            >
              <el-tab-pane
                label="请求参数"
                name="0"
              >
                <ces-table
                  :ref="`one_qqcs_${indexOne}`"
                  size="mini"
                  :border="true"
                  :headers="sjfwQqcs"
                  url
                  :datas="itemOne.datasSj"
                  :searchShow="false"
                  :addRowBtn="false"
                  :autoAdd="true"
                  :isDialog="false"
                  :isSelection="false"
                  :isIndex="true"
                  :radius="true"
                  :emptyText="emptyText"
                  :stripe="false"
                  :paginationShow="false"
                  :pageSizeShow="false"
                  headerCellClassName="th_pink"
                  @changeTable="
                    (val) => {
                      changeTableOne(val, indexOne);
                    }
                  "
                ></ces-table>
              </el-tab-pane>
              <el-tab-pane
                label="请求体"
                name="1"
              >
                <div class="sjfw_qqt">
                  <el-radio-group v-model="itemOne.sjfwQqt">
                    <el-radio label="JSON">JSON</el-radio>
                  </el-radio-group>
                </div>
                <v-apaas-code
                  :key="'code' + indexOne"
                  :ref="`one_json_${indexOne}`"
                ></v-apaas-code>
              </el-tab-pane>
              <el-tab-pane
                label="授权信息"
                name="2"
              >
                <el-row class="sqxx_row">
                  <el-col :span="6">
                    <div class="sqxx_title">授权方式：</div>
                    <el-select
                      v-model="itemOne.sqfsVal"
                      placeholder="请选择"
                      class="sqxx_select"
                    >
                      <el-option
                        v-for="item in optionsSq"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-col>
                  <el-col
                    :span="2"
                    class="center_line_c"
                  >
                    <div class="center_line_one"></div>
                  </el-col>
                  <el-col :span="16">
                    <div class="sqxx_title">Token：</div>
                    <el-input
                      v-model="itemOne.tokenVal"
                      placeholder="请输入内容"
                    ></el-input>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane
                label="请求头Header"
                name="3"
              >
                <ces-table
                ref="fwcs_zhfw_qqtcs"
                size="mini"
                :border="true"
                :headers="sjfwQqtcs"
                url
                :datas="datasQqu"
                :searchShow="false"
                :addRowBtn="false"
                :autoAdd="true"
                :isDialog="false"
                :isSelection="false"
                :isIndex="true"
                :radius="true"
                :emptyText="emptyText"
                :stripe="false"
                :paginationShow="false"
                :pageSizeShow="false"
                headerCellClassName="th_pink"
              ></ces-table>
              </el-tab-pane>
            </el-tabs>
            <div v-show="itemOne.resultShow">
              <div v-show="itemOne.resSuccess">
                <div class="sjfw_qqcstx">请求参数信息填写：</div>
                <ces-table
                  :ref="`one_qqxx_${indexOne}`"
                  size="mini"
                  :border="true"
                  :headers="sjfwQqcstx"
                  url
                  :datas="itemOne.datasQqcs"
                  :searchShow="false"
                  :addRowBtn="false"
                  :autoAdd="false"
                  :isDialog="false"
                  :isSelection="false"
                  :isIndex="true"
                  :radius="true"
                  :emptyText="emptyText"
                  :stripe="false"
                  :paginationShow="false"
                  :pageSizeShow="false"
                  headerCellClassName="th_pink"
                ></ces-table>
                <div class="sjfw_fhcstx">返回参数信息填写：</div>
                <ces-table
                  :ref="`one_fhxx_${indexOne}`"
                  size="mini"
                  :border="true"
                  :headers="sjfwFhcstx"
                  url
                  :datas="itemOne.datasFhcs"
                  :searchShow="false"
                  :addRowBtn="false"
                  :autoAdd="false"
                  :isDialog="false"
                  :isSelection="false"
                  :isIndex="true"
                  :radius="true"
                  :emptyText="emptyText"
                  :stripe="false"
                  :paginationShow="false"
                  :pageSizeShow="false"
                  headerCellClassName="th_pink"
                ></ces-table>
              </div>
              <div v-show="!itemOne.resSuccess">
                <div class="skfw_csfwxx">测试服务信息：</div>
                <div class="test_succ">
                  <div class="skcs_jg">
                    <img
                      src="@/assets/imgs/test_icon_error.png"
                      class="skcs_jg_img"
                    />&nbsp;测试失败
                  </div>
                </div>
              </div>
            </div>
            <div class="btn_footer_one">
              <el-button
                v-if="
                  indexOne + 1 == liucheng_list.length && itemOne.resSuccess
                "
                class="new_one"
                @click="newOne(indexOne)"
              >新增服务地址</el-button>
              <el-button
                v-if="!(indexOne == liucheng_list.length || liucheng_list.length == 1)"
                class="del_one"
                @click="delOne(indexOne)"
              >移除</el-button>
              <el-button
                v-if="itemOne.resultShow"
                class="reset_one"
                @click="resetOne(indexOne)"
              >重置</el-button>
              <el-button
                v-if="
                  indexOne + 1 == liucheng_list.length && itemOne.resSuccess
                "
                class="next_one"
                @click="nextOne"
              >
                下一步
              </el-button>
            </div>
          </div>
        </block-radius>
      </div>
    </div>
    <div v-else>
      <block-radius>
        <div class="fwcs_add">
          <el-form
            ref="form"
            :model="form"
            :rules="process_id == '' ? rules : rules_process"
          >
            <el-form-item prop="name">
              <p class="formname">服务名称：</p>
              <el-input
                v-model="form.name"
                placeholder="请输入服务名称"
                class="form_in"
              ></el-input>
            </el-form-item>
            <el-form-item prop="desc">
              <p class="formname">服务描述：</p>
              <el-input
                type="textarea"
                v-model="form.desc"
                placeholder="请输入服务描述"
                class="form_in"
              ></el-input>
            </el-form-item>
            <el-form-item prop="area">
              <p class="formname">服务领域：</p>
              <el-select
                v-model="form.area"
                placeholder="请选择"
                class="form_in"
              >
                <el-option
                  v-for="item in optionsArea"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="origin">
              <p class="formname">所属组织：</p>
              <el-input
                v-model="form.origin"
                class="form_in"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <p class="formname">服务封面：</p>
              <upload-file
                :multiple="false"
                :max="1"
                type="cropper"
                :readOnly="false"
                :list="cover"
                @getNewList="getNewList"
              ></upload-file>
            </el-form-item>
            <el-form-item>
              <p class="formname">接口编码：</p>
              <el-input
                v-model="form.code"
                class="form_in"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item prop="resource">
              <p class="formname">开放程度：</p>
              <el-radio-group v-model="form.resource">
                <el-radio :label="1">共享</el-radio>
                <el-radio :label="2">受限</el-radio>
                <el-radio :label="3">敏感</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-if="is_map != 0"
              class="btn_footer"
            >
              <el-button
                class="previous"
                @click="goBack('map')"
              >
                {{ mapBackText }}
              </el-button>
              <el-button
                class="registe"
                :disabled="mapR"
                @click="registeMap"
              >
                服务发布
              </el-button>
            </el-form-item>
            <el-form-item
              v-else-if="process_id != ''"
              class="btn_footer"
            >
              <el-button
                class="previous"
                @click="goBack('process')"
              >
                返回流程管理
              </el-button>
              <el-button
                class="registe"
                :disabled="proR"
                @click="registeProcess"
              >
                服务发布
              </el-button>
            </el-form-item>
            <el-form-item
              v-else
              class="btn_footer"
            >
              <el-button
                class="previous"
                @click="previous"
              >上一步</el-button>
              <el-button
                class="registe"
                :disabled="fwR"
                @click="registe"
              >服务注册</el-button>
            </el-form-item>
          </el-form>
        </div>
      </block-radius>
    </div>
    <div style="display: none">
      <iframe
        id="listener"
        :src="addPortalItemUrl"
      ></iframe>
    </div>
    <apass-dialog
      ref="alertChange"
      :title="dialogInfo.title"
      :msg="dialogInfo.msg"
      :submit="dialogInfo.submit"
      :cancelHide="true"
    ></apass-dialog>
  </div>
</template>

<script>
const gisServiceUrl = window.serviceConfig.gisServiceRoot;
const gisPortalSiteName = window.serviceConfig.gisPortalSiteName
  ? window.serviceConfig.gisPortalSiteName
  : "portal";
import BlockRadius from "@/components/general/block-radius";
import CesTable from "@/components/table/table-um";
import Codes from "@/components/general/codes";
import uploadFile from "@/components/general/upload_file";
import helper from "@/services/helper";
import apassDialog from "@/components/apass-dialog";
export default {
  components: {
    BlockRadius,
    CesTable,
    apassDialog,
    "v-apaas-code": Codes,
    uploadFile
  },
  data() {
    return {
      liucheng_list: [
        {
          one_input: "",
          select: "GET",
          serviceUrl: "",
          datasSj: [],
          sjfwQqt: "JSON",
          sqfsVal: "",
          tokenVal: "",
          noSearchUrl: "",
          resultShow: false,
          resSuccess: false,
          requestRules: 0,
          responseRules: 0,
          request_fields: [],
          response_fields: [],
          checkPass: false,
          dataType: "",
          body_fields: [],
          param_fields: []
        }
      ],
      rulesOne: {
        one_input: [
          { required: true, message: "请输入服务名称", trigger: "blur" },
          { min: 0, max: 15, message: "服务名称不超过15个字", trigger: "blur" }
        ]
      },
      addPortalItemUrl:
        gisServiceUrl +
        "/" +
        gisPortalSiteName +
        "/apaasplat/viewer/addPortalItem.html",
      btnList: [],
      activeBtn: null,
      serviceUrl: "",
      select: "GET",
      optionType: [
        { label: "GET", value: "GET" },
        { label: "POST", value: "POST" },
        { label: "PUT", value: "PUT" },
        { label: "DELETE", value: "DELETE" }
      ],
      optionType1: [{ label: "GET", value: "GET" }],
      optionType2: [
        { label: "GET", value: "GET" },
        { label: "POST", value: "POST" }
      ],
      activeName: "0",
      activeZh: "0",
      sjfwQqcs: [
        {
          label: "请求字段编码",
          prop: "requestEncoding",
          type: "input",
          align: "left"
        },
        { label: "请求值", prop: "requestValue", type: "input", align: "left" }
      ],
      sjfwQqcstx: [
        { label: "字段编码", prop: "name", type: "", align: "left" },
        { label: "示例值", prop: "example", type: "input", align: "left" },
        {
          label: "字段类型",
          prop: "show_type",
          type: "",
          align: "left",
          width: "140"
        },
        {
          label: "字段名称*",
          prop: "label",
          type: "input",
          align: "left"
        },
        {
          label: "是否必须*",
          prop: "is_must",
          type: "select",
          align: "left",
          width: 100,
          selectArr: [
            { label: "是", value: 1 },
            { label: "否", value: 0 }
          ],
          hasDefault: true
        },
        { label: "字段说明", prop: "descript", type: "input", align: "left" }
      ],
      sjfwFhcstx: [
        { label: "字段编码", prop: "name", type: "", align: "left" },
        { label: "示例值", prop: "example", type: "input", align: "left" },
        { label: "字段类型", prop: "show_type", type: "", align: "left" },
        {
          label: "字段名称*",
          prop: "label",
          type: "input",
          align: "left"
        },
        { label: "字段说明", prop: "descript", type: "input", align: "left" }
      ],
      zhfwQqcsForm: [
        { label: "请求字段编码", prop: "key", type: "input", align: "left" },
        {
          label: "参数类型",
          prop: "field_type",
          type: "select",
          align: "center",
          width: 100,
          selectArr: [
            { label: "text", value: "text" },
            { label: "file", value: "file" }
          ]
        },
        {
          label: "请求值",
          prop: "val",
          type: "upload",
          align: "center",
          uploadKey: "field_type"
        },
        {
          label: "操作",
          type: "Button",
          align: "center",
          width: 100,
          btnList: [
            {
              type: "primary-del",
              label: "删除"
            }
          ]
        }
      ],
      sjfwQqtcs:[
        {
          label: "key",
          prop: "requestEncoding",
          type: "input",
          align: "left"
        },
        { label: "value", prop: "requestValue", type: "input", align: "left" }
      ],
      datasQqu:[],
      datasZhForm: [],
      datasZhwww: [],
      emptyText: "暂无数据",
      resultShow: false,
      resSuccess: false,
      optionsSq: [{ label: "Bearer Token", value: "Bearer" }],
      sqfsVal: "",
      tokenVal: "",
      sjfwQqt: "JSON",
      zhfwQqt: "JSON",
      skfwQqt: "",
      skfwRadios: [],
      optionsZhyy: [],
      zhyyVal: 22,
      jcxxtx: false,
      form: {
        name: "",
        desc: "",
        area: "",
        origin: "",
        code: "自动生成",
        resource: 1
      },
      rules: {
        name: [
          { required: true, message: "请输入服务名称", trigger: "blur" },
          { min: 0, max: 15, message: "服务名称不超过15个字", trigger: "blur" }
        ],
        desc: [
          { required: true, message: "请输入服务描述", trigger: "blur" },
          {
            min: 0,
            max: 200,
            message: "服务描述不超过200个字",
            trigger: "blur"
          }
        ],
        area: [
          { required: true, message: "请选择服务领域", trigger: "change" }
        ],
        origin: [
          { required: true, message: "请选择所属组织", trigger: "blur" }
        ],
        resource: [
          { required: true, message: "请选择开放程度", trigger: "blur" }
        ]
      },
      rules_process: {
        name: [
          { required: true, message: "请输入服务名称", trigger: "blur" },
          {
            min: 0,
            max: 100,
            message: "服务名称不超过100个字",
            trigger: "blur"
          }
        ],
        desc: [
          { required: true, message: "请输入服务描述", trigger: "blur" },
          {
            min: 0,
            max: 400,
            message: "服务描述不超过400个字",
            trigger: "blur"
          }
        ],
        area: [{ required: true, message: "请选择服务领域", trigger: "blur" }],
        origin: [
          { required: true, message: "请选择所属组织", trigger: "blur" }
        ],
        resource: [
          { required: true, message: "请选择开放程度", trigger: "blur" }
        ]
      },
      cover: [],
      optionsArea: [],
      datasSj: [],
      datasZh: [],
      datasQqcs: [],
      datasFhcs: [],
      request_fields: [],
      response_fields: [],
      noSearchUrl: "",
      requestRules: 0,
      responseRules: 0,
      is_map: 0,
      mapBackText: "返回智能制图",
      process_id: "",
      param_fields: [],
      body_fields: [],
      dialogInfo: {
        title: "时空服务参数已修改",
        msg: "",
        submit: null
      },
      is_portal: false,
      portal_id: "",
      dataType: "",
      jkwds: [],
      gz_fhsjgs: "JSON",
      code_1_index: 0,
      code_2_index: 0,
      user_id: "",
      fwR: false,
      mapR: false,
      proR: false
    };
  },
  computed: {},
  watch: {},
  methods: {
    getCurrentUser() {
      this.$api.user.getNowUser().then(({ data }) => {
        if (data.success == 1) {
          this.$store.commit("userInfofun", data.data);
        } else {
          console.log(data.errMsg);
        }
      });
    },
    clickBtn(val) {
      this.resultShow = false;
      this.activeBtn = val;
      this.select = "GET";
      this.serviceUrl = "";
      this.noSearchUrl = "";
      this.gz_fhsjgs = "JSON";
      this.zhyyVal = 22;
      this.datasSj = [];
      this.tokenVal = "";
      this.datasZh = [];
      this.zhfwQqt = "JSON";
      this.datasZhForm = [];
      this.datasZhwww = [];
      this.liucheng_list = [
        {
          one_input: "",
          select: "GET",
          serviceUrl: "",
          datasSj: [],
          sjfwQqt: "JSON",
          sqfsVal: "",
          tokenVal: "",
          noSearchUrl: "",
          resultShow: false,
          resSuccess: false,
          requestRules: 0,
          responseRules: 0,
          request_fields: [],
          response_fields: [],
          checkPass: false,
          dataType: "",
          body_fields: [],
          param_fields: []
        }
      ];
      this.activeName = "0";
      this.code_1_index += 1;
      this.code_2_index += 1;
      this.jkwds = [];
    },
    getUrl(enUrl) {
      enUrl = enUrl.replace(/\s*/g, "");
      let url = decodeURI(enUrl);
      let arr = [];
      if (url.indexOf("?") != -1) {
        this.noSearchUrl = url.substring(0, url.indexOf("?"));
        let search = url.substring(url.indexOf("?") + 1);
        let vars = search.split("&");
        for (let i = 0; i < vars.length; i++) {
          if (vars[i] != "") {
            let pair = vars[i].split("=");
            arr[i] = {};
            arr[i].requestEncoding = pair[0] ? pair[0] : "";
            arr[i].requestValue = pair[1] ? pair[1] : "";
          }
        }
      } else {
        this.noSearchUrl = enUrl;
      }
      this.serviceUrl = url;
      if (this.activeBtn == 0 || this.activeBtn == 3) {
        this.datasSj = arr;
      } else if (this.activeBtn == 4) {
        this.datasZh = arr;
      }
    },
    clickFwcs() {
      let headers = {};
      let requestData = {};
      let requestHeaderDataObj = {};
      if (this.activeBtn == 0 || this.activeBtn == 3) {
        if (this.sqfsVal != "") {
          headers.Authorization = [];
          headers.Authorization[0] = this.sqfsVal + " " + this.tokenVal;
        }
        let request = this.$refs.fwcs_sjfw_qq.getTableData();
        for (let i = 0; i < request.length; i++) {
          if (
            request[i] &&
            request[i].requestEncoding &&
            request[i].requestValue &&
            request[i].requestEncoding != "" &&
            request[i].requestValue != ""
          ) {
            if (
              Object.keys(requestData).indexOf(request[i].requestEncoding) == -1
            ) {
              requestData[request[i].requestEncoding] = [];
              requestData[request[i].requestEncoding][0] =
                request[i].requestValue;
            } else {
              requestData[request[i].requestEncoding].push(
                request[i].requestValue
              );
            }
          }
        }
      } else if (this.activeBtn == 1) {
      } else if (this.activeBtn == 4 && this.zhyyVal != 34) {
        let request = this.$refs.fwcs_zhfw_qq.getTableData();
        for (let i = 0; i < request.length; i++) {
          if (
            request[i] &&
            request[i].requestEncoding &&
            request[i].requestValue &&
            request[i].requestEncoding != "" &&
            request[i].requestValue != ""
          ) {
            if (
              Object.keys(requestData).indexOf(request[i].requestEncoding) == -1
            ) {
              requestData[request[i].requestEncoding] = [];
              requestData[request[i].requestEncoding][0] =
                request[i].requestValue;
            } else {
              requestData[request[i].requestEncoding].push(
                request[i].requestValue
              );
            }
          }
        }
      }
      if(this.activeBtn == 0 || this.activeBtn == 2 || this.activeBtn == 3 || this.activeBtn == 4){
        let requestHeader = this.$refs.fwcs_zhfw_qqtcs.getTableData();
         for (let i = 0; i < requestHeader.length; i++) {
          if (
            requestHeader[i] &&
            requestHeader[i].requestEncoding &&
            requestHeader[i].requestValue &&
            requestHeader[i].requestEncoding != "" &&
            requestHeader[i].requestValue != ""
          ) {
            console.log(Object.keys(requestHeaderDataObj).indexOf(requestHeader[i].requestEncoding) == -1)
            if (
              Object.keys(requestHeaderDataObj).indexOf(requestHeader[i].requestEncoding) == -1
            ) {
              requestHeaderDataObj[requestHeader[i].requestEncoding] = [];
              requestHeaderDataObj[requestHeader[i].requestEncoding][0] = requestHeader[i].requestValue;
            } else {
              requestHeaderDataObj[requestHeader[i].requestEncoding].push(
                requestHeader[i].requestValue
              );
            }
          }
        }
        headers = Object.assign(headers, requestHeaderDataObj)
      }
      let bodys = "";
      let contentType = "";
      if (this.activeBtn == 0 || this.activeBtn == 3) {
        bodys = this.$refs.jsonCodes ? this.$refs.jsonCodes.getCodesVal() : "";
        contentType = this.sjfwQqt;
      } else if (this.activeBtn == 4) {
        if (this.activeZh == "1") {
          contentType = this.zhfwQqt;
          if (this.zhfwQqt == "JSON") {
            bodys = this.$refs.zhfwJsonCodes
              ? this.$refs.zhfwJsonCodes.getCodesVal()
              : "";
          } else if (this.zhfwQqt == "form-data") {
            let request = this.$refs.fwcs_zhfw_qq_form.getTableData().concat();
            request.pop();
            bodys = JSON.stringify(request);
          } else if (this.zhfwQqt == "x-www-form-urlencoded") {
            let request = this.$refs.fwcs_zhfw_www.getTableData().concat();
            let arr = [];
            request.pop();
            request.forEach(item => {
              arr.push({
                key: item.requestEncoding,
                val: item.requestValue,
                field_type: "text"
              });
            });
            bodys = JSON.stringify(arr);
          }
        }
      }
      let query = {
        method: this.select,
        url: this.serviceUrl,
        headers: headers,
        params: requestData,
        body: bodys,
        content_type: contentType,
        data_service_type1: this.btnList[this.activeBtn].id,
        data_service_type2:
          this.activeBtn == 0
            ? 12
            : this.activeBtn == 1
            ? this.skfwQqt
            : this.activeBtn == 4
            ? this.zhyyVal
            : 0,
        response_type: this.activeBtn == 3 ? this.gz_fhsjgs : "JSON"
      };
      this.$api.workbench.fwzcFwcs(query).then(response => {
        if (response.data.success == 1) {
          let data = response.data.data;
          this.body_fields = data.body_fields;
          this.param_fields = data.param_fields;
          if (data.body_fields && data.body_fields.length != 0) {
            this.datasQqcs = data.body_fields;
            this.dataType = "body";
          } else {
            this.datasQqcs = data.param_fields;
            this.dataType = "param";
          }
          this.datasFhcs = data.response_fields;
          this.resSuccess = true;
          this.resultShow = true;
        } else {
          this.resSuccess = false;
          this.resultShow = true;
          console.log(response.data.errMsg);
        }
      });
    },
    clickTab() {},
    resetSjfw() {
      this.clickFwcs();
    },
    nextJcxx() {
      if (
        this.activeBtn == 0 ||
        this.activeBtn == 2 ||
        this.activeBtn == 3 ||
        (this.activeBtn == 4 && (this.zhyyVal == 22 || this.zhyyVal == 23))
      ) {
        if (this.activeBtn == 2 || this.activeBtn == 3) {
          if (this.jkwds.length == 0) {
            this.$message.error("请上传接口文档");
          } else {
            if (
              this.activeBtn == 2 ||
              (this.activeBtn == 4 && this.zhyyVal == 22)
            ) {
              this.request_fields = [];
              this.response_fields = [];
              this.jcxxtx = true;
              this.getOrganization();
            } else {
              let requestData = this.$refs.fwcs_sjfw_qqcs.getTableData();
              let responseData = this.$refs.fwcs_sjfw_fhcs.getTableData();
              this.requestRules = 0;
              this.responseRules = 0;
              this.checkTable(requestData, 0);
              this.checkTable(responseData, 1);
              if (this.requestRules == 0 && this.responseRules == 0) {
                this.request_fields = requestData;
                this.response_fields = responseData;
                this.jcxxtx = true;
                this.getOrganization();
              } else if (this.requestRules != 0) {
                this.$message.error("请完善请求参数信息中的字段名称");
              } else if (this.responseRules != 0) {
                this.$message.error("请完善返回参数信息中的字段名称");
              }
            }
          }
        } else {
          let requestData = this.$refs.fwcs_sjfw_qqcs.getTableData();
          let responseData = this.$refs.fwcs_sjfw_fhcs.getTableData();
          this.requestRules = 0;
          this.responseRules = 0;
          this.checkTable(requestData, 0);
          this.checkTable(responseData, 1);
          if (this.requestRules == 0 && this.responseRules == 0) {
            this.request_fields = requestData;
            this.response_fields = responseData;
            this.jcxxtx = true;
            this.getOrganization();
          } else if (this.requestRules != 0) {
            this.$message.error("请完善请求参数信息中的字段名称");
          } else if (this.responseRules != 0) {
            this.$message.error("请完善返回参数信息中的字段名称");
          }
        }
      } else if (this.activeBtn == 1) {
        let value = helper.getQueryString("id", this.serviceUrl);
        console.log(value);
        if (value && value != "") {
          this.getItemInfo(value);
        } else {
          this.form.name = "";
          this.form.desc = "";
          this.form.area = "";
          this.cover = [];
        }
        this.request_fields = [];
        this.response_fields = [];
        this.jcxxtx = true;
        this.getOrganization();
      } else {
        this.request_fields = [];
        this.response_fields = [];
        this.jcxxtx = true;
        this.getOrganization();
      }
    },
    checkTable(arr, rule) {
      let self = this;
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].name && arr[i].name != "") {
          if (!arr[i].label || arr[i].label == "") {
            if (rule == 0) {
              this.requestRules = 1;
            } else if (rule == 1) {
              this.responseRules = 1;
            }
            return false;
          }
        }
        if (arr[i].children && arr[i].children.length != 0) {
          self.checkTable(arr[i].children, rule);
        }
      }
    },
    // edit form
    getNewList(val) {
      this.cover[0] = val[0].url;
    },
    previous() {
      this.datasQqcs = this.request_fields;
      this.datasFhcs = this.response_fields;
      this.jcxxtx = false;
    },
    getNewListOne(val) {
      this.jkwds[0] = val[0].url;
    },
    getOrganization() {
      if (this.$store.state.userInfo && this.$store.state.userInfo.user_id) {
        let query = {
          id: this.$store.state.userInfo.user_id
        };
        this.$api.user.getUserDetail(query).then(request => {
          if (request.data.success == 1) {
            this.form.origin = request.data.data.department;
            this.oid = request.data.data.department_id;
          } else {
            console.log(response.data.errMsg);
          }
        });
      } else {
        let self = this;
        self.$api.user.getNowUser().then(({ data }) => {
          if (data.success == 1) {
            self.$store.commit("userInfofun", data.data);
            let query = {
              id: self.$store.state.userInfo.user_id
            };
            self.$api.user.getUserDetail(query).then(request => {
              if (request.data.success == 1) {
                self.form.origin = request.data.data.department;
                self.oid = request.data.data.department_id;
              } else {
                console.log(response.data.errMsg);
              }
            });
          } else {
            console.log(data.errMsg);
          }
        });
      }
    },
    registeMap() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.cover.length != 0) {
            this.mapR = true;
            let query = {};
            if (this.is_map == 1 || this.is_map == 5) {
              query = {
                name: this.form.name,
                sectors: this.form.area,
                organization: this.form.origin,
                cover: this.cover[0],
                openness: this.form.resource,
                descript: this.form.desc,
                data_service_type1: 6,
                data_service_type2: this.skfwQqt,
                encode_method: this.form.code,
                portal_id: this.portal_id,
                doc_file: "",
                urls: [
                  {
                    name: "",
                    response_type: "JSON",
                    req_auth_mthod: 0,
                    req_auth_token: "",
                    method: "GET",
                    url: this.serviceUrl,
                    request_fields: [],
                    request_query_fields: [],
                    response_fields: [],
                    content_type: "JSON"
                  }
                ]
              };
            } else if (this.is_map == 4) {
              query = {
                name: this.form.name,
                sectors: this.form.area,
                organization: this.form.origin,
                cover: this.cover[0],
                openness: this.form.resource,
                descript: this.form.desc,
                data_service_type1: 21,
                data_service_type2: 34,
                encode_method: this.form.code,
                portal_id: this.portal_id,
                urls: [
                  {
                    name: "",
                    response_type: "JSON",
                    req_auth_mthod: 0,
                    req_auth_token: "",
                    method: "GET",
                    url: this.serviceUrl,
                    request_fields: [],
                    request_query_fields: [],
                    response_fields: [],
                    content_type: "JSON"
                  }
                ]
              };
            }
            this.$api.workbench.serviceAdd(query).then(response => {
              this.mapR = false;
              if (response.data.success == 1) {
                this.$message.success("服务发布成功");
                this.$router.push("/fwgl/" + this.$store.getters.level);
              } else {
                console.log(response.data.errMsg);
                this.$message.error(response.data.errMsg);
              }
            });
          } else {
            this.$message.error("请上传服务封面");
          }
        } else {
          this.$message.error("请完善服务基本信息");
        }
      });
    },
    registeProcess() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.cover.length != 0) {
            this.proR = true;
            let query = {
              workflows_id: Number(this.process_id), // 服务流程id
              service_name: this.form.name, // 服务名称
              describe: this.form.desc, // 服务描述
              sector: this.form.area, // 服务领域id
              oid: this.oid, // 组织id
              encode_method: this.form.code, // 接口编码
              cover: this.cover[0], // 服务封面
              openness: this.form.resource // 开放程度，1共享/2受限/3敏感
            };
            this.$api.workbench.releaseProcess(query).then(response => {
              this.proR = false;
              if (response.data.success == 1) {
                this.$message.success("服务发布成功");
                this.$router.push("/fwgl/" + this.$store.getters.level);
              } else {
                console.log(response.data.errMsg);
                this.$message.error(response.data.errMsg);
              }
            });
          } else {
            this.$message.error("请上传服务封面");
          }
        } else {
          this.$message.error("请完善服务基本信息");
        }
      });
    },
    registe() {
      if (this.activeBtn == 4 && this.zhyyVal == 24) {
        this.registeOne();
      } else {
        this.registePt();
      }
    },
    registePt() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (
            (this.activeBtn == 2 && this.jkwds.length == 0) ||
            (this.activeBtn == 3 && this.jkwds.length == 0)
          ) {
            this.$message.error("请上传接口文档");
          } else {
            if (this.cover.length != 0) {
              let contentType = "";
              if (
                this.activeBtn == 1 &&
                !this.is_portal &&
                window.serviceConfig &&
                window.serviceConfig.state == "needLogin"
              ) {
                this.addPortalItem();
              } else {
                this.fwR = true;
                if (
                  this.activeBtn == 0 ||
                  this.activeBtn == 2 ||
                  this.activeBtn == 3
                ) {
                  contentType = this.sjfwQqt;
                } else if (this.activeBtn == 4) {
                  if (this.activeZh == "1") {
                    contentType = this.zhfwQqt;
                  }
                }
                let query = {
                  name: this.form.name,
                  sectors: this.form.area,
                  organization: this.form.origin,
                  cover: this.cover[0],
                  openness: this.form.resource,
                  descript: this.form.desc,
                  data_service_type1: this.btnList[this.activeBtn].id,
                  data_service_type2:
                    this.activeBtn == 0
                      ? 12
                      : this.activeBtn == 1
                      ? this.skfwQqt
                      : this.activeBtn == 4
                      ? this.zhyyVal
                      : 0,
                  portal_id: this.portal_id,
                  encode_method: this.form.code,
                  doc_file: this.jkwds.length != 0 ? this.jkwds[0] : "",
                  urls: [
                    {
                      name: "",
                      response_type:
                        this.activeBtn == 3 ? this.gz_fhsjgs : "JSON",
                      req_auth_mthod: 0,
                      req_auth_token: this.tokenVal,
                      method: this.select,
                      url: this.serviceUrl,
                      request_fields:
                        this.dataType == "body"
                          ? this.request_fields
                          : this.body_fields,
                      request_query_fields:
                        this.dataType == "param"
                          ? this.request_fields
                          : this.param_fields,
                      response_fields: this.response_fields,
                      content_type: contentType
                    }
                  ]
                };
                this.$api.workbench.serviceAdd(query).then(response => {
                  this.fwR = false;
                  if (response.data.success == 1) {
                    this.$message.success("服务注册成功");
                    this.$router.push("/fwgl/" + this.$store.getters.level);
                  } else {
                    console.log(response.data.errMsg);
                    this.$message.error(response.data.errMsg);
                  }
                });
              }
            } else {
              this.$message.error("请上传服务封面");
            }
          }
        } else {
          this.$message.error("请完善服务基本信息");
        }
      });
    },
    registeOne() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.cover.length != 0) {
            if (this.jkwds.length == 0) {
              this.$message.error("请上传接口文档");
            } else {
              this.fwR = true;
              let urls = [];
              this.liucheng_list.forEach(item => {
                urls.push({
                  req_name: item.one_input,
                  response_type: "JSON",
                  req_auth_mthod: 0,
                  req_auth_token: item.tokenVal,
                  method: item.select,
                  url: item.serviceUrl,
                  request_fields:
                    item.dataType == "body"
                      ? item.request_fields
                      : item.body_fields,
                  request_query_fields:
                    item.dataType == "param"
                      ? item.request_fields
                      : item.param_fields,
                  response_fields: item.response_fields,
                  content_type: "JSON"
                });
              });
              let query = {
                name: this.form.name,
                sectors: this.form.area,
                organization: this.form.origin,
                cover: this.cover[0],
                openness: this.form.resource,
                descript: this.form.desc,
                data_service_type1: this.btnList[this.activeBtn].id,
                data_service_type2: 24,
                portal_id: this.portal_id,
                encode_method: this.form.code,
                urls: urls,
                doc_file: this.jkwds.length != 0 ? this.jkwds[0] : ""
              };
              this.$api.workbench.serviceAdd(query).then(response => {
                this.fwR = false;
                if (response.data.success == 1) {
                  this.$message.success("服务注册成功");
                  this.$router.push("/fwgl/" + this.$store.getters.level);
                } else {
                  console.log(response.data.errMsg);
                  this.$message.error(response.data.errMsg);
                }
              });
            }
          } else {
            this.$message.error("请上传服务封面");
          }
        } else {
          this.$message.error("请完善服务基本信息");
        }
      });
    },
    changeTable(val) {
      let search = "?";
      for (let i = 0; i < val.length; i++) {
        if (val[i].requestEncoding != "") {
          search =
            search +
            val[i].requestEncoding +
            "=" +
            (val[i].requestValue ? val[i].requestValue : "") +
            "&";
        }
      }
      let searchDel = search.substring(0, search.length - 1);
      this.serviceUrl = this.noSearchUrl + searchDel;
    },
    delItemQq(val) {
      let arr = this.$refs.fwcs_zhfw_qq_form.getTableData();
      this.delById(arr, val.id);
    },
    delById(arr, id) {
      let self = this;
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].id == id) {
          arr.splice(i, 1);
          return false;
        }
        if (arr[i].children && arr[i].children.length != 0) {
          self.delById(arr[i].children, id);
        }
      }
    },
    changeZhType(val) {
      this.serviceUrl = "";
      this.select = "GET";
      this.activeZh = "0";
      this.resultShow = false;
      this.resSuccess = false;
    },
    changeZhfwQqt() {},
    getArea() {
      this.$api.workbench.getServiceAreaList().then(response => {
        if (response.data.success == 1) {
          this.optionsArea = response.data.data;
        } else {
          console.log(response.data.errMsg);
        }
      });
    },
    getServiceType1() {
      this.$api.workbench.getServiceTypeList().then(response => {
        if (response.data.success == 1) {
          let arr = response.data.data;
          arr.forEach(item => {
            switch (item.id) {
              case 5:
                item.default = "nav_ic_shujufw";
                item.active = "nav_ic_shujufw_sel";
                break;
              case 6:
                item.default = "nav_ic_shikongfw";
                item.active = "nav_ic_shikongfw_sel";
                break;
              case 7:
                item.default = "nav_ic_shipinfw";
                item.active = "nav_ic_shipinfw_sel";
                break;
              case 10:
                item.default = "nav_ic_ganzhifw";
                item.active = "nav_ic_ganzhifw_sel";
                break;
              case 21:
                item.default = "nav_ic_zonghefw";
                item.active = "nav_ic_zonghefw_sel";
                break;
              case 36:
                item.default = "nav_ic_chanpinzy";
                item.active = "nav_ic_chanpinzy_sel";
                break;
              default:
                break;
            }
          });
          this.btnList = arr;
          let skfwRadios = this.btnList[1].childDomains;
          skfwRadios = skfwRadios.filter(function(item) {
            return item.name != "地图" && item.name != "三维地图";
          });
          this.skfwRadios = skfwRadios;
          this.skfwQqt = this.skfwRadios[0].id;
          this.optionsZhyy = this.btnList[4].childDomains;
          this.activeBtn = 0;
        } else {
          console.log(response.data.errMsg);
        }
      });
    },
    judgeMap() {
      let self = this;
      if (self.$route.query.map && self.$route.query.map != 0) {
        self.is_map = self.$route.query.map;
        self.jcxxtx = true;
        if (self.$store.state.znztParams) {
          self.mapBackText = "返回智能制图";
          let data = this.$store.state.znztParams;
          self.form.name = data.name;
          self.form.desc = data.descript;
          self.form.area = Number(data.sectors);
          self.serviceUrl = data.url;
          self.skfwQqt = Number(data.data_service_type2);
          self.cover[0] = data.cover;
          self.portal_id = data.portalid;
          self.is_portal = true;
        } else if (self.$store.state.cesiumMapParams) {
          self.mapBackText = "返回三维制图";
          let data = this.$store.state.cesiumMapParams;
          self.form.name = data.name;
          self.form.desc = data.descript;
          self.form.area = Number(data.sectors);
          self.serviceUrl = data.url;
          self.skfwQqt = Number(data.data_service_type2);
          self.cover[0] = data.cover;
          self.portal_id = data.portalid;
          self.is_portal = true;
        } else if (self.$store.state.appBuilderParams) {
          self.mapBackText = "返回Web应用程序";
          let data = this.$store.state.appBuilderParams;
          self.form.name = data.name;
          self.form.desc = data.descript;
          self.form.area = Number(data.sectors);
          self.serviceUrl = data.url;
          self.skfwQqt = Number(data.data_service_type2);
          self.cover[0] = data.cover;
          self.portal_id = data.portalid;
          self.is_portal = true;
        }
        this.getOrganization();
      } else if (self.$route.query.process) {
        self.process_id = self.$route.query.process;
        self.jcxxtx = true;
        this.getProcessDetail();
        this.getOrganization();
      } else {
        self.is_map = 0;
        self.getServiceType1();
      }
    },
    goBack(type) {
      let self = this;
      if (type == "map") {
        // self.$store.commit("setZnztDetailsParams", {
        //   type: "",
        //   queryType: "webmap",
        //   id: self.portal_id,
        // });
        // this.$router.push("/intelligent_drawing");
        if (self.is_map == 1) {
          let shareWebMapParam = JSON.parse(
            window.sessionStorage.getItem("shareWebMapParam")
          );
          window.location.href =
            "/vmap/#/map" + `?id=${shareWebMapParam.portalid}`;
        } else if (self.is_map == 4) {
          self.$router.back(-1);
        } else if (self.is_map == 5) {
          let shareCesiumMapParam = JSON.parse(
            window.sessionStorage.getItem("shareCesiumMapParam")
          );
          window.location.href =
            "/cesiummap/#/map" + `?id=${shareCesiumMapParam.portalid}`;
        } else {
          let shareWebMapParam = JSON.parse(
            window.sessionStorage.getItem("shareWebMapParam")
          );
          window.location.href =
            "/vmap/#/map" + `?id=${shareWebMapParam.portalid}`;
        }
      } else if (type == "process") {
        this.$router.push("/progress/designer");
      }
    },
    addPortalItem() {
      console.log("添加portal");
      let self = this;
      document.getElementById("listener").contentWindow.postMessage(
        {
          cmd: "addPortalItem",
          params: {
            name: self.form.name,
            url: self.serviceUrl,
            sectors: self.form.area,
            data_service_type2: self.skfwQqt,
            descript: self.form.desc
          }
        },
        "*"
      );
    },
    getItemInfo(itemid) {
      console.log(`获取portal参数${itemid}`);
      document.getElementById("listener").contentWindow.postMessage(
        {
          cmd: "getPortalItemInfo",
          params: itemid
        },
        "*"
      );
    },
    listeners(event) {
      let self = this;
      if (event && event.origin == gisServiceUrl && event.data) {
        if (event.data.cmd == "getPortalItemInfo") {
          console.log(event.data.params);
          let data = event.data.params;
          self.form.name = data.name;
          self.form.desc = data.descript;
          self.form.area = Number(data.sectors);
          self.portal_id = data.portalid;
          self.cover[0] = data.cover;
          if (
            self.serviceUrl != data.url ||
            self.skfwQqt != Number(data.data_service_type2)
          ) {
            self.serviceUrl = data.url;
            self.skfwQqt = Number(data.data_service_type2);
            self.dialogInfo.msg = `您的时空服务地址已更新为${
              self.serviceUrl
            }，服务类型更新为${
              self.skfwRadios.find(item => {
                return item.id == self.skfwQqt;
              }).name
            }。`;
            self.dialogInfo.submit = () => {
              self.$refs.alertChange.hide();
            };
            self.$refs.alertChange.show();
          }
          self.is_portal = true;
        } else if (event.data.cmd == "getPortalItemInfoError") {
          console.log(event.data.params);
          self.is_portal = false;
        } else if (event.data.cmd == "addPortalItem") {
          console.log(event.data.params);
          self.portal_id = event.data.params;
          self.is_portal = true;
          self.registe();
        } else if (event.data.cmd == "addPortalItemError") {
          console.log(event.data.params);
          self.is_portal = false;
        }
      }
    },
    getProcessDetail() {
      this.$api.workbench
        .getProcessDetail({ id: this.process_id })
        .then(response => {
          if (response.data.success == 1) {
            let data = response.data.data;
            this.form.name = data.name;
            this.form.desc = data.describe;
            this.cover.push(
              "/apaas/static/docs/image/image/blob_75dc5c77-754c-440d-8320-92ba68d239d5.blob"
            );
          }
        });
    },
    newOne(indexOne) {
      this.$refs["ruleFormOne_" + indexOne][0].validate(valid => {
        if (valid) {
          if (this.liucheng_list[indexOne].resSuccess) {
            this.checkOne(indexOne, true);
            console.log(this.liucheng_list[indexOne]);
            if (this.liucheng_list[indexOne].checkPass) {
              this.liucheng_list.push({
                one_input: "",
                select: "GET",
                serviceUrl: "",
                datasSj: [],
                sjfwQqt: "JSON",
                sqfsVal: "",
                tokenVal: "",
                noSearchUrl: "",
                resultShow: false,
                resSuccess: false,
                requestRules: 0,
                responseRules: 0,
                request_fields: [],
                response_fields: [],
                checkPass: false,
                dataType: "",
                body_fields: [],
                param_fields: []
              });
            } else {
              this.$message.error(`请完善服务${indexOne + 1}中的信息`);
            }
          } else {
            this.$message.error("请完善该服务测试");
          }
        } else {
          this.$message.error("请填写该服务名称");
        }
      });
    },
    getUrlOne(enUrl, indexOne) {
      enUrl = enUrl.replace(/\s*/g, "");
      let url = decodeURI(enUrl);
      let arr = [];
      if (url.indexOf("?") != -1) {
        this.liucheng_list[indexOne].noSearchUrl = url.substring(
          0,
          url.indexOf("?")
        );
        let search = url.substring(url.indexOf("?") + 1);
        let vars = search.split("&");
        for (let i = 0; i < vars.length; i++) {
          if (vars[i] != "") {
            let pair = vars[i].split("=");
            arr[i] = {};
            arr[i].requestEncoding = pair[0] ? pair[0] : "";
            arr[i].requestValue = pair[1] ? pair[1] : "";
          }
        }
      } else {
        this.liucheng_list[indexOne].noSearchUrl = enUrl;
      }
      this.liucheng_list[indexOne].serviceUrl = url;
      this.liucheng_list[indexOne].datasSj = arr;
    },
    clickTabOne() {},
    changeTableOne(val, indexOne) {
      let search = "?";
      for (let i = 0; i < val.length; i++) {
        if (val[i].requestEncoding != "") {
          search =
            search +
            val[i].requestEncoding +
            "=" +
            (val[i].requestValue ? val[i].requestValue : "") +
            "&";
        }
      }
      let searchDel = search.substring(0, search.length - 1);
      this.liucheng_list[indexOne].serviceUrl =
        this.liucheng_list[indexOne].noSearchUrl + searchDel;
    },
    resetOne(indexOne) {
      this.clickFwcsOne(indexOne);
    },
    nextOne() {
      let hasError = false;
      this.liucheng_list.forEach((item, index) => {
        this.checkOne(index, false);
        if (!item.checkPass) {
          hasError = true;
          this.$message.error(`请完善服务${index + 1}中的参数信息`);
          return false;
        }
      });
      if (!hasError) {
        this.jcxxtx = true;
        this.getOrganization();
      }
    },
    delOne(indexOne) {
      this.liucheng_list.splice(indexOne, 1);
    },
    clickFwcsOne(indexOne) {
      // console.log(this.$refs["one_qqcs_" + indexOne][0]);
      let headers = {};
      let requestData = {};
      let dataOne = this.liucheng_list[indexOne];
      if (dataOne.sqfsVal != "") {
        headers.Authorization = [];
        headers.Authorization[0] = dataOne.sqfsVal + " " + dataOne.tokenVal;
      }
      let request = this.$refs["one_qqcs_" + indexOne][0].getTableData();
      for (let i = 0; i < request.length; i++) {
        if (
          request[i] &&
          request[i].requestEncoding &&
          request[i].requestValue &&
          request[i].requestEncoding != "" &&
          request[i].requestValue != ""
        ) {
          if (
            Object.keys(requestData).indexOf(request[i].requestEncoding) == -1
          ) {
            requestData[request[i].requestEncoding] = [];
            requestData[request[i].requestEncoding][0] =
              request[i].requestValue;
          } else {
            requestData[request[i].requestEncoding].push(
              request[i].requestValue
            );
          }
        }
      }
      let bodys = "";
      let contentType = "";
      bodys = this.$refs["one_json_" + indexOne][0].getCodesVal();
      contentType = dataOne.sjfwQqt;
      let query = {
        method: dataOne.select,
        url: dataOne.serviceUrl,
        headers: headers,
        params: requestData,
        body: bodys,
        content_type: contentType,
        data_service_type1: this.btnList[this.activeBtn].id,
        data_service_type2: 24,
        response_type: "JSON"
      };
      this.$api.workbench.fwzcFwcs(query).then(response => {
        if (response.data.success == 1) {
          let data = response.data.data;
          this.liucheng_list[indexOne].body_fields = data.body_fields;
          this.liucheng_list[indexOne].param_fields = data.param_fields;
          if (data.body_fields && data.body_fields.length != 0) {
            this.liucheng_list[indexOne].datasQqcs = data.body_fields;
            this.liucheng_list[indexOne].dataType = "body";
          } else {
            this.liucheng_list[indexOne].datasQqcs = data.param_fields;
            this.liucheng_list[indexOne].dataType = "param";
          }
          this.liucheng_list[indexOne].datasFhcs = data.response_fields;
          this.liucheng_list[indexOne].resSuccess = true;
          this.liucheng_list[indexOne].resultShow = true;
        } else {
          this.liucheng_list[indexOne].resSuccess = false;
          this.liucheng_list[indexOne].resultShow = true;
          console.log(response.data.errMsg);
        }
      });
    },
    checkOne(indexOne, showEveryOne) {
      let requestData = this.$refs["one_qqxx_" + indexOne][0].getTableData();
      let responseData = this.$refs["one_fhxx_" + indexOne][0].getTableData();
      this.requestRules = 0;
      this.responseRules = 0;
      this.checkTableOne(requestData, 0, indexOne);
      this.checkTableOne(responseData, 1, indexOne);
      if (this.requestRules == 0 && this.responseRules == 0) {
        this.liucheng_list[indexOne].request_fields = requestData;
        this.liucheng_list[indexOne].response_fields = responseData;
        this.liucheng_list[indexOne].checkPass = true;
      } else if (this.liucheng_list[indexOne].requestRules != 0) {
        if (showEveryOne) {
          this.$message.error(
            `请完善服务${indexOne + 1}中请求参数信息中的字段名称`
          );
        }
        this.liucheng_list[indexOne].checkPass = false;
      } else if (this.liucheng_list[indexOne].responseRules != 0) {
        if (showEveryOne) {
          this.$message.error(
            `请完善服务${indexOne + 1}中返回参数信息中的字段名称`
          );
        }
        this.liucheng_list[indexOne].checkPass = false;
      }
    },
    checkTableOne(arr, rule, indexOne) {
      let self = this;
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].name && arr[i].name != "") {
          if (!arr[i].label || arr[i].label == "") {
            if (rule == 0) {
              this.requestRules = 1;
            } else if (rule == 1) {
              this.responseRules = 1;
            }
            return false;
          }
        }
        if (arr[i].children && arr[i].children.length != 0) {
          self.checkTable(arr[i].children, rule, indexOne);
        }
      }
    }
  },
  mounted() {
    let self = this;
    window.addEventListener("message", self.listeners, false);
    self.judgeMap();
    self.getArea();
  },
  created() {
    let _self = this;
    _self.getCurrentUser();
    let webmap_data = JSON.parse(sessionStorage.getItem("shareWebMapParam"));
    if (webmap_data) {
      _self.$store.commit("setZnztParams", webmap_data);
    }
    let cesiummap_data = JSON.parse(
      sessionStorage.getItem("shareCesiumMapParam")
    );
    if (cesiummap_data) {
      _self.$store.commit("setCesiumMapParams", cesiummap_data);
    }
    let appmap_data = JSON.parse(
      sessionStorage.getItem("shareAppBuilderParam")
    );
    if (appmap_data) {
      _self.$store.commit("setAppBuilderParams", appmap_data);
    }
  }
};
</script>

<style scoped>
.fwcs {
  width: 1200px;
  margin: 0 auto;
  margin-top: -157px;
  margin-bottom: 20px;
}
.fwcs_btn_act {
  background-color: #e56600;
  color: #ffffff;
}
.fwcs_btn_dis {
  background-color: #e3e5ef;
  color: #8890a7;
}
.fwcs_btn_img {
  position: relative;
  top: 2px;
  margin-right: 4px;
}
.gray_line {
  width: 100%;
  margin: 20px auto;
  height: 1px;
  background-color: #dcdfe6;
}
.fwcs_fwdz {
  color: #58617a;
  margin: 20px 15px 15px;
  font-size: 14px;
}
.input-with-select {
  width: 70%;
}
.fwcs_btn_fwcs {
  background-color: #0f2683;
  color: #ffffff;
  margin-left: 10px;
}
.sjfw_qqcstx {
  color: #58617a;
  margin: 10px 15px;
  font-size: 14px;
}
.skfw_csfwxx {
  color: #58617a;
  margin: 10px 15px;
  font-size: 14px;
}
.sjfw_fhcstx {
  color: #58617a;
  margin: 40px 15px 10px;
  font-size: 14px;
}
.btn_footer {
  display: flex;
  justify-content: flex-end;
  margin: 40px 10px 10px;
}
.btn_footer .reset {
  width: 100px;
  background-color: #c3caf8;
  color: #0f2683;
}
.btn_footer .next {
  width: 100px;
  background-color: #0f2683;
  color: #f8f9fd;
}
.btn_footer .previous {
  background-color: #c3caf8;
  color: #0f2683;
}
.btn_footer .registe {
  width: 100px;
  background-color: #0f2683;
  color: #f8f9fd;
}
.sqxx_row {
  padding: 0 20px;
}
.sqxx_title {
  color: #58617a;
  font-size: 14px;
  margin: 10px 15px;
}
.sqxx_select {
  width: 100%;
}
.center_line_c {
  margin: 0 auto;
}
.center_line {
  background-color: #f4f7fc;
  width: 2px;
  height: 400px;
  position: relative;
  left: 50%;
}
.sjfw_qqt {
  margin: 0 20px 15px;
}
.skfw_fwlx {
  margin: 20px 15px;
  color: #58617a;
  font-size: 14px;
}
.skfw_fwlx_radios {
  margin: 10px 0 0;
}
.test_succ {
  width: 100%;
  margin: 0 auto;
}
.skcs_jg {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f2683;
  font-size: 20px;
}
.skcs_jg_img {
  position: relative;
  top: 3px;
}
.zhyy_select {
  width: 70%;
}
.fwcs_add .formname {
  color: #58617a;
  font-size: 14px;
  margin-left: 10px;
}
.form_in {
  width: 1000px;
}
.one_service {
  width: 100%;
}
.one_name {
  color: #58617a;
  font-size: 14px;
  margin: 0 15px 10px 15px;
}
.one_name_in {
  width: 70%;
}
.one_url {
  color: #58617a;
  font-size: 14px;
  margin: 20px 15px 10px;
}
.btn_footer_one {
  margin: 40px 10px 10px;
}
.new_one {
  background-color: #515fe7;
  color: #e6ebfe;
}
.del_one {
  width: 100px;
  background-color: #e15260;
  color: #fcfafa;
}
.reset_one {
  width: 100px;
  background-color: #c3caf8;
  color: #0f2683;
}
.next_one {
  width: 100px;
  background-color: #0f2683;
  color: #e6ebfe;
  float: right;
}
.center_line_one {
  background-color: #f4f7fc;
  width: 2px;
  height: 100px;
  position: relative;
  left: 50%;
}
.lc_alert {
  margin-top: 20px;
  background-color: #f8f9fd;
  border-radius: 8px;
  width: 70%;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  color: #8890a7;
}
.lc_alert i {
  position: relative;
  top: 4px;
}
.lc_alert p {
  width: calc(100% - 24px);
}
.title_bc {
  color: #a9aec0;
}
.lc_upf {
  width: 70%;
}
.gz_fhsjgs_rad {
  margin-left: 10px;
}
.ip_block {
  border-radius: 8px;
  border: solid 1px #e3e5ef;
  padding: 10px 0 0 10px;
  line-height: 24px;
}
.ip_item {
  display: inline-block;
  position: relative;
  background-color: #e6ebfe;
  border-radius: 4px;
  color: #0f2683;
  font-size: 12px;
  line-height: 24px;
  padding: 0 26px 0 8px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.ip_del {
  position: absolute;
  right: 8px;
  top: 6px;
  font-size: 14px;
  color: #6573ae;
  cursor: pointer;
}
.ip_del:hover {
  color: #e56600;
}
.add_ip {
  background-color: #495feb;
  border-radius: 4px;
  color: #f8f9fd;
  font-size: 12px;
  line-height: 24px;
  padding: 0 8px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.ip_input {
  width: 110px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.filebtn {
  width: 76px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  color: #e6ebfe;
  background-color: #515fe7;
  border-radius: 6px;
  display: inline-block;
  font-size: 14px;
  margin-left: 8px;
  cursor: pointer;
  text-decoration: none;
}
.cp_mb {
  padding: 0 0 16px 8px;
}
</style>
<style>
.fwcs_fwdz_inner .el-select .el-input {
  width: 130px;
  background-color: #0f2683;
  color: #ffffff;
  border-radius: 8px 0px 0px 8px;
}
.fwcs_tabs .el-tabs__header {
  margin: 20px 0;
}
.zhyy_select .el-input__prefix,
.el-input__suffix {
  position: absolute;
  top: 0;
  right: 10px;
  -webkit-transition: all 0.3s;
  height: 100%;
  color: #c0c4cc;
  text-align: right;
}
.lc_upf .el-upload {
  width: 100%;
}
.lc_upf .el-upload-dragger {
  width: 100%;
}
.ip_input .el-input__inner {
  border-radius: 4px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 24px;
  height: 24px;
}
</style>
